0.1.0 • Published 3 years ago
form-zero2 v0.1.0
背景
表单开发占据前端开发时间相当大的比重,在复杂的业务场景下,需要耗费巨大精力去解决。
传统的表单开发方式虽然也很灵活,但是也会产生大量的配套代码,如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组件库
- 自定义组件
- 校验实现:内置常用校验、自定义校验
- 布局实现:支持自定义布局
- 表单列表实现
- 表单状态实现:预览、编辑
- 表单分组
- 可视化开发工具
- 表单存储
- 联动处理
- 服务端驱动
相关资料
0.1.0
3 years ago