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

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

我有一个Javascript(dojo)函数,用来自动填充表单,其思想是传入一个JS对象,其中包含表单字段id的键和帮助定义如何填充字段的值。
它可以工作,但是我觉得有点难看(switch语句,对象语法中的对象)。有什么想法可以改进 * 这段代码吗?

  1. /**
  2. * Fill in the form with passed in values
  3. *
  4. * @param {Object} defaults
  5. *
  6. * Can be used to pass in default values to the form. Expects an object like this:
  7. * {<field id>: {type: '<field type>', value:'<value>'}
  8. *
  9. * for example:
  10. * {
  11. * paymethod: {type: 'select', value:'Account Transfer'}, // html select
  12. * fundsource: {type: 'combo', value:'Corporation Account'} // dijit.comboBox
  13. * }
  14. */
  15. function fillDefaults(defaults) {
  16. var props;
  17. for (var field in defaults) {
  18. props = defaults[field];
  19. switch (props['type']) {
  20. // so far only select and combo have been implemented
  21. // others will be added as needed
  22. // and maybe grouped depending on how they work
  23. // (e.g. all dijits together, <input> with <select>, etc.)
  24. case 'select':
  25. dojo.byId(field).value = props['value'];
  26. dojo.byId(field).onchange()
  27. break;
  28. case 'combo':
  29. dijit.byId(field).attr('value', props['value']);
  30. break;
  31. }
  32. }
  33. }

[*]改善:让它更漂亮,更像js,更像dojo,更流线型

1rhkuytd

1rhkuytd1#

漂亮是什么意思?js是什么样的?
开关虽然占用大量内存,但如果计划扩展更多对象,则会更干净。
也许,可以用一个包含函数的对象来代替开关:

  1. funcs = {
  2. select: function(value) {
  3. dojo.byId(field).value = value;
  4. dojo.byId(field).onchange()
  5. },
  6. combo: function(value) {
  7. dijit.byId(field).attr('value', value);
  8. }
  9. };
  10. function payFillDefaults(defaults) {
  11. var props;
  12. for(var field in defaults) {
  13. props = defaults[field];
  14. if(funcs[props['type']]) {
  15. funcs[props['type']](props['value']);
  16. }
  17. }
  18. }
展开查看全部
xienkqul

xienkqul2#

根据JSLint标准进行了少许改进:

  1. function fillDefaults(defaults) {
  2. var props, field;
  3. for (field in defaults) {
  4. props = defaults[field];
  5. switch (props.type) {
  6. case 'select':
  7. dojo.byId(field).value = props.value;
  8. dojo.byId(field).onchange();
  9. break;
  10. case 'combo':
  11. dijit.byId(field).attr('value', props.value);
  12. break;
  13. }
  14. }
  15. }
j2datikz

j2datikz3#

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

相关问题