javascript - 自动解析数据生成不同表单的思路

Question

现有一个需求，已知能够从后台获取到json数据，现在要根据数据中的值动态解析成页面控件，不同的数据类型要解析成不同的表单控件，而数据不会告诉你具体用什么类型的控件。要实现的话难道只能js判断，动态拼接dom？

Answer 1

1, 数据肯定有一个特征值来确定使用什么类型的组件，通过 js 进行判断有什么不好？数据本身是没有逻辑的
2, 判断之后可以使用动态拼接，但是如果无法保证数据的安全性的话，最好使用模版引擎，比如 handlerbars 或者 ejs 之类的

Answer 2

你都说了啊，用js 判断数据类型

Answer 3

值有多少种可能性就预先做好多少种控件，然后动态拼接吧

Answer 4

动态拼接dom 不可取。可以用模板引擎， hbs,ejs jade 等等。 服务器还需要传给前端一份 数据结构，数据结构和返回的 json 对应，标明数据格式

Answer 5

楼主可以把从后台获取到的json数据的基本格式发一下吗

1. 后端返回给你的数据中应该有字段来表述其属于哪种数据类型，那么我们根据不同的数据类型来生成相应的dom即可，但是在js中拼接字符串又是一件很坑底的事情，javascript的几种使用多行字符串的方式

2. 如果觉得拼接字符串很麻烦，我们可以借助模版引擎例如nunjucks、 swig等来完成

Answer 6

<p id="app"></p>
<script>
var conf = {
  'sex': 'radio',
  'city': 'select'
};
var extra = {
  'sex': [
    { k: '1', v: '男' },
    { k: '2', v: '女' }
  ],
  'city': [
    { k: '1', v: '北京' },
    { k: '2', v: '上海' }
  ]
};
var data = {
  "id": "1",
  "sex": "2",
  "city": "2"
};
function render(type, key, value, ext) {
  // radio/checkbox
  if (type == 'radio' || type == 'checkbox') {
    return renderCheckbox(key, value, ext, type);
  }
  // select
  if (type == 'select') {
    return renderSelect(key, value, ext);
  }
  // text
  return renderText(key, value);
}
function renderText(key, value) {
  var $input = $('<input type="text" />');
  $input
    .attr('name', key)
    .attr('placeholder', key)
    .attr('title', key)
    .val(value);
  return $input;
}
function renderCheckbox(key, value, ext, type) {
  var ret = [];
  if (ext) {
    $.each(ext, function (idx, val) {
      var k = val.k;
      var v = val.v;
      ret.push(
        $('<input />')
          .attr('type', type)
          .attr('name', key)
          .attr('placeholder', key)
          .attr('title', key)
          .prop('checked', k == value)
          .val(k)
        , v
      );
    });
    return ret;
  }
  ret.push(
    $('<input />')
      .attr('type', type)
      .attr('name', key)
      .attr('placeholder', key)
      .attr('title', key)
      .prop('checked', !!value.length)
      .val(value)
  );
  return ret;
}
function renderSelect(key, value, ext) {
  var $select = $('<select></select>')
      .attr('name', key)
      .attr('title', key);
  $select.append('<option value="">请选择<option');
  $.each(ext, function (idx, val) {
    var k = val.k;
    var v = val.v;
    $select.append(
      $('<option><option')
        .text(v)
        .val(k)
        .prop('selected', k == value)
    )
  });
  return $select;
}

$.each(data, function (key, value) {
  var type = conf[key] || 'text';
  var ext = extra[key];
  $('#app').append(render(type, key, value, ext))
})
</script>

Answer 7

数字 -> input[typ='number']
字符串 -> input[type='text']
字符串有@ -> input[type='email']

这种方案自己被坑过，上手就放弃了；单不说服务器返回的数据，可不可以做到那么纯净；就是往服务器上上传，客户端一份校验、服务器上一份校验就已经要人命了；
当时没办法，程序员就认定这条路了，只好变通一下，json数据分成两段，一段数据，一段DOM模板～

Answer 8

为何不在后端入手，直接给你传一个type值，给你定义好对应的类型呢，前端拿到json再去做判断，去解析远不如后端返回json时加个type值更快捷。