低代码平台

// 低代码的最小数据模型：组件树 + 配置 驱动渲染（schema 思想）
var schema = {
  type: 'page',
  children: [
    { type: 'input', props: { label: '姓名', field: 'name', required: true } },
    { type: 'select', props: { label: '部门', field: 'dept', options: ['研发', '运营', '设计'] } },
    { type: 'button', props: { text: '提交', action: 'submit' } }
  ]
};

var registry = {
  input: function (c) {
    var el = document.createElement('input'); el.placeholder = c.props.label; el.dataset.field = c.props.field;
    return el;
  },
  select: function (c) {
    var el = document.createElement('select');
    c.props.options.forEach(function (o) { var op = document.createElement('option'); op.textContent = o; el.appendChild(op); });
    el.dataset.field = c.props.field;
    return el;
  },
  button: function (c) {
    var el = document.createElement('button'); el.textContent = c.props.text;
    el.addEventListener('click', function () { console.log('提交', collect()); });
    return el;
  }
};

function render(node) {
  return (registry[node.type] || function () { return document.createComment(node.type); })(node);
}
function collect() {
  return Array.prototype.reduce.call(document.querySelectorAll('[data-field]'), function (acc, el) {
    acc[el.dataset.field] = el.value; return acc;
  }, {});
}
schema.children.forEach(function (c) { document.body.appendChild(render(c)); });