如何简化/改善/美化我的自动表单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，更像dojo，更简化

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 。

阅读它的功能，看它是否满足您的需求，如果不满足，请研究其代码并借用您喜欢的东西。 如果遗漏了任何东西，请在邮件列表 （ 在gmane.org上 ）上分享您的反馈。 或者，如果您可以改善它，请回馈。