Question

我的from元素用Object编写。我需要从中填充HTML form元素。问题是对象包含不同的输入类型，结构，自定义规则等。例如，将有文本输入，图像类型输入，选择框，单选框，复选框等。因此，我不知道遍历对象会很好想法（我开始了这个工作，但我自己无法完成:(）。我也可以在html文件中编写html标签元素。但是，我必须从该object中获取值。因此，最好的解决方案是什么？

样本对象：

var formObj = {
    username: {
    value: null,
    type: 'text',
    placeholder: 'Enter username'
  },
  password: {
    value: null,
    type: 'password',
    placeholder: 'enter password'
  },
  country: {
    value: null,
    type: 'select',
    defaultText: 'Choose here',
    option: [
        {
            value: '1',
        label: 'Australia'
        },
      {
            value: '2',
        label: 'USA'
        },
      {
            value: '3',
        label: 'UK'
        }
    ]
  },
  gender: {
    value: null,
    type: 'select',
    defaultText: null,
    option: [
        {
            value: 'male',
        label: 'Male'
        },
      {
            value: 'female',
        label: 'Female'
        },
      {
            value: 'other',
        label: 'Other'
        }
    ]
  }
}

jsfiddle demo

Answer 1

your jsfiddle demo revised

在您的演示中添加了一些评论。我也会研究template strings。它们将使您的生活变得更轻松，并使代码更整洁：），以及single responsibility principle，可将您的代码分成更易于管理/阅读的段。

var html = ''; // <-- Initialize as empty string for `+=`
$.each(formObj, function(key, value) {
  if (value.value === null) {
    value.value = '';
  }

  // Add label
  html += '<label for="' + key + '">' + key + '</label>';

  // Add input
  if (value.type === 'select') {
    // Type is select
    html += '<select class="form-control">' + generateOptionPlaceholder(value.defaultText) + generateOptionMarkup(value.option) + '</select>';
  } else {
    html += '<input name="' + key + '" type="' + value.type + '" value="' + value.value + '" placeholder="' + value.placeholder + '" class="form-control" />';
  }

  console.log(html);
});

Answer 2

您可以对此类事情使用策略模式。对于任何差异，请使用字典，其中键是基于变体的，而值是调用该变体的函数。

例如，如果您的带有表单数据的对象具有这样的结构：

var form = {
    "field1": {
        type: "text"
        value: "foo",
        attrs: {...}
    },
    ...
}

您可以使用策略来处理不同的字段类型。您的策略词典可能是这样开始的：

var FIELD_STRATEGY = {
    "input": function (name, value, attrs) {
        // General purpose method for <input>
        // Needs type included in attrs
    "text": function (name, value, attrs) {
        // Constructs an <input type="text">
        attrs.type = "text";
        return FIELD_STRATEGY.input(name, value, attrs);
    },
    "option": function (value, label, attrs) {
        // Constructs an <option>
    },
    "select": function (name, options, attrs {
        // Constructs a <select>
        var opts = options.map(function(opt) {
            return FIELD_STRATEGY.option(
                null,
                opt.value,
                opt.label);
            }).join("");
        var attr_str = Object.keys(attrs).map(function(attr) {
            var value = attrs[attr];
            return name + '="' + value '"';
        }).join(" ");
        return '<select name="' + name + '" ' + attr_str + '>' +
            opts + '</select>';
    }
};

要使用它，请遍历字段名称并根据类型调用策略：

var fields = Object.keys(form).map(function (name) {
    var conf = form[name] || {};
    var strategy = FIELD_STRATEGY[conf.type];
    var rendered = "";

    if (strategy) {
        rendered = strategy(name, conf.value, conf.attrs);
    }

    return rendered;
});

这将为您提供最终的字段列表，其中包含根据每种字段类型的策略呈现的字符串。

使用jQuery

2 个答案: