dojo 我如何精简/改进/美化我的自动表单JS代码?

qnyhuwrf  于 2023-01-22  发布在  Dojo
关注(0)|答案(3)|浏览(273)

我有一个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,更流线型

1rhkuytd

1rhkuytd1#

漂亮是什么意思?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']);
    }
  }
}
xienkqul

xienkqul2#

根据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;
        }
    }
}
j2datikz

j2datikz3#

看一看dojox.form.manager--它几乎可以实现您想要的功能,它支持现有的表单小部件("main" mixin)、几乎所有的DOM表单元素(node mixin)、统一的事件处理等,可以用于未修改的表单。
正如你可能已经猜到的,它被构造成一组独立的mix-in,所以你可以只选择所需的功能。为了方便起见,作为一个例子,有一个类,它将所有的mix-in组合在一起:Manager .
阅读它的功能,看看它是否适合你的需要,如果不适合,研究它的代码,借用你喜欢的东西。如果它遗漏了什么-在the mailing liston gmane.org)上分享你的反馈。或者,如果你能改进它,贡献回来。

相关问题