aiz327/form-zero

base json schema form component

背景

表单开发占据前端开发时间相当大的比重,在复杂的业务场景下，需要耗费巨大精力去解决。

传统的表单开发方式虽然也很灵活，但是也会产生大量的配套代码，如ant design下的FormItem、{...formItemLayout}

同时在代码维护上，大量的onchange、Form.create()、getFieldDecorator,也让业务组件变得臃肿。

现有的开发方式不支持数据驱动。需要动态生成表单的能力。

技术方案

主要采用网易云的方案进行开发

• 通过schema的方案，对表单结构进行描述，以Json Schema为原型，在其基础上调整添加ui、自定义组件等相关特性描述。
• 将Form分解为多个Field，采用分布式管理，通过根组件的消息分发对子组件进行重绘。
• 表单校验仍基于Ant Design的校验类库async-validator
• 使用typescript开发

为什么不直接使用Formily等成熟开源方案?

首先开源方案已经很成熟且完善，支持各种自定义方案。但是我们的初衷是让业务开发更轻松，减少学习成本，开发基于公司业务场景下的表单常用布局、校验方案等，再添加自定义方案以实现特定的需求，将可能改善开发体验。业务定制需求也能更快的响应。

其次JSON Schema有点不易阅读，我们可以设计更贴合开发的模式。一些复杂的联动实现及不适合的功能都可以简化实现或者摒弃。

Schema 设计

外面很多基于JSON Schema的配置方案，但是看起来有点麻烦，所以可以将其作为一项附加能力

{
    "key": "name",                        // 基础描述
    "type": "Input",
    "ui": {                               // ui属性描述
      "label": "姓名"
    },
    "props": {                            // 表单组件属性描述
      "placeholder": "请输入年龄"
    }
    "rules": [                            // 表单校验描述
      {
        "required": true,
        "message": "姓名必填",
        "trigger": "blur",
        "status": "error"
      }
    ]
}

基于pub/sub的方式做字段间通讯

• 方便各个字段之间数据与状态共享
• 通过对事件的控制，能够合理的优化渲染次数，提高性能
• 能够适配多框架的情况，只需复用一套核心层代码

TODO

• Schema核心,Form组件和Field组件的实现
• 支持Antd Design组件库
• 自定义组件
• 校验实现：内置常用校验、自定义校验
• 布局实现：支持自定义布局
• 表单列表实现
• 表单状态实现：预览、编辑
• 表单分组
• 可视化开发工具
• 表单存储
• 联动处理
• 服务端驱动

相关资料

• Formily
• 面向复杂场景的表单解决方案