动态表单生成
最近在公司项目中,需要实现一个动态表单生成器,通过配置json文件,可以生成一个表单,然后用户可以对表单进行编辑。
需求闭环,完整链路
设计表单->生成schema->表单预览->表单编辑填写->表单数据提交->表单数据回收分析生成完整报告
可扩展的组件库
支持常用组件。提供标准的可配置属性和可配置逻辑。
- 文本输入框
- 图片上传
- 单选多选
- 文件上传
...可以添加更多不同类型组件。
为了统一管理组件和组件的配置信息,需要维护一套统一的DSL。
需求能力
静态页面设计
通过schema配置,生成一个静态页面。由于需求这边是统一的设计不需要定制页面样式。
组件交互能力
比如跳转链接等能力,通过富文本编辑器实现。
动态表单中的组件交互为表单关联能力,例如表单前后项的关联关系,某些表单项需要在什么条件下才会显示。这里想到两种方式来实现关联关系。
- 第一种,是通过控制的思想来实现。将存在关联关系的组件分为两种角色:控制者和被控制者。控制者设置满足哪些条件则显示被控制者。在这种思想下,一个控制者可以控制多个被控制者。
- 优点:简单易懂,逻辑清晰。
- 缺点:控制逻辑单一,复杂情况下灵活性不足。
- 第二种,通过依赖的思想来实现。每个问题可以设置自己满足什么条件才能够显示。这样可以设置多个依赖,也可以灵活设置各个依赖之间的关系。
- 优点:灵活性高,可配置性强。每个问题都可以单独设置自己的依赖。
- 缺点:依赖关系复杂时,导致逻辑难以维护。
组件通信能力
组件与组件间的交互关系搭建。
常见通信方案:
- props 父传子
- 子传父。注册回调函数
- eventBus 发布订阅模式
- vuex/redux 等公共状态管理
- iframe postmessage
- event emitters
更多
一篇相似业务的总结和实现:星创编辑器在投放业务中的落地|得物技术