如何简化/改进/美化我的自动格式JS代码？

Question

我有一个Javascript（dojo）函数，我用它来自动填充表单。我们的想法是传入一个JS对象，其中包含表单字段ID的键，以及有助于定义如何填充字段的值。

它有效，但对我来说感觉有点难看（switch语句，对象语法中的对象）。关于如何改进*此代码的任何想法？

/**
 * Fill in the form with passed in values
 *
 * @param {Object} defaults 
 *
 * Can be used to pass in default values to the form. Expects an object like this:
 *      {<field id>: {type: '<field type>', value:'<value>'}
 *
 *      for example:
 *      {
 *      paymethod: {type: 'select', value:'Account Transfer'},   // html select
 *      fundsource: {type: 'combo', value:'Corporation Account'} // dijit.comboBox
 *      }
 */
function fillDefaults(defaults) {
    var props;
    for (var field in defaults) {
        props = defaults[field];
        switch (props['type']) {
            // so far only select and combo have been implemented 
            // others will be added as needed
            // and maybe grouped depending on how they work 
            // (e.g. all dijits together, <input> with <select>, etc.)
            case 'select':
                dojo.byId(field).value = props['value'];
                dojo.byId(field).onchange()
                break;
            case 'combo':
                dijit.byId(field).attr('value', props['value']);
                break;
        }
    }
}

[*]改进：制作更漂亮，更像js，更像道场，更精简

Answer 1

什么意思？什么是js？

如果您打算使用更多对象进行扩展，那么虽然内存密集，但开关更清晰。

也许，而不是一个开关，有一个包含你的功能的对象：

funcs = {
  select: function(value) {
    dojo.byId(field).value = value;
    dojo.byId(field).onchange()
  },
  combo: function(value) {
    dijit.byId(field).attr('value', value);
  }
};

function payFillDefaults(defaults) {
  var props;
  for(var field in defaults) {
    props = defaults[field];
    if(funcs[props['type']]) {
      funcs[props['type']](props['value']);
    }
  }
}

Answer 2

根据JSLint标准改进了一点：

function fillDefaults(defaults) {
    var props, field;
    for (field in defaults) {
        props = defaults[field];
        switch (props.type) {
        case 'select':
            dojo.byId(field).value = props.value;
            dojo.byId(field).onchange();
            break;
        case 'combo':
            dijit.byId(field).attr('value', props.value);
            break;
        }
    }
}

Answer 3

看看dojox.form.manager - 它大致与您想要实现的目标相同。它支持现有的表单小部件（"main" mixin），几乎所有DOM表单元素（node mixin），统一事件处理等。它可以与未修改的形式一起使用。

正如您可能已经猜到的那样，它被构造为一组独立的混合，因此您只能选择所需的功能。为方便起见，作为一个例子，有一个类，它将所有混合组合在一起：Manager。

阅读它的作用，看它是否符合你的需要，如果没有，研究它的代码并借用你喜欢的东西。如果它遗漏了某些内容 - 请在the mailing list（on gmane.org）上分享您的反馈意见。或者，如果你可以改进它，请回馈。