前言
以前笔者有写过一篇如何设计动态表单配置平台的文章，可是因为笔者电脑问题代码丢失，因此后期从新实现了一套表单设计器，并优化了以前的设计方式，特意作一下总结和复盘。javascript
你将收获
-
动态表单开发的通常思路 -
可视化领域中的表单引擎 -
从零实现一款动态表单设计器 -
利用H5-Dooring开发一款表单设计平台
正文
上图中咱们将表单设计器集成到了H5-Dooring中，使其能够实现拖拽生成表单。css
其次咱们能够根据右边的配置项，动态的添加某个表单组件或或者修改组件字段和数据源。在配置好表单以后咱们还能够定制表单提交的api接口地址，以便实现用户数据的可溯源性。前端
在开发以前，咱们先分析一下动态表单设计的通常实现思路。java
动态表单开发的通常思路
静态化配置列表是最传统的表单配置方式之一，基本思路就是利用母表来生成配置项，进而实现表单配置。相似于如下方式：node
基于json schema的动态表单配置有两种实现方案， 一种就是支持在线修改json文件从而实现定制化，另外一种就是彻底无代码操做，可是前提都须要提供一套通用的表单模版。相似于以下案例：react
此种方案能够实现基本的表单自治。也是本文主要实现的方案。至于在线编写json文件的方案。笔者以前也也过成熟的方案，具体能够参考：webpack
基于jsoneditor二次封装一个可实时预览的json编辑器组件(react版)css3
支持在线编程的混合式表单设计方案是终极方案，也是目前流行的无代码化平台的思想之一。一方面它提供了基于json schema的动态表单配置， 对于一些强定制的，须要在线设计组件方案的模式，采用在线编程，实时打包成动态组件的方式，最后根据平台的组件约定来实现组件库的方式。以下图所示：git
在线代码编辑可使用react-codemirror2或者 react-monaco-editor插件来实现。至于在线打包，咱们用nodejs彻底能够实现，笔者在作Dooring项目的在线下载代码时就用到了该方案，感兴趣的能够了解一下。github
可视化领域中的表单引擎
可视化领域一方面强调的是图形(可视化)的设计，一方面是动态表单。好比说咱们想傻瓜式的改变一张图的数据，属性，交互等，咱们须要经过表单这一桥梁来实现：
从零实现一款动态表单设计器
在实现表单设计器以前，咱们先来整理一下思路和需求。在笔者的最初草图中，它长这样：
从草图中咱们能够提取到以下任务信息：
-
定义一套表单组件库 -
肯定表单全局属性配置 -
实现表单操做curd(增删查改)
-
单选框 -
复选框 -
单行文本 -
多行文本 -
下拉框 -
文件上传 -
日期框 -
数值输入框
以上这些基本知足咱们的平常开发需求，其次咱们还能够开发数据源表单组件，列表组件，好比dooring实现的那样：
在完成表单组件库以后，咱们就须要根据配置项动态渲染了。也有两种实现思路，一种就是相似于多条件判断，以下：
{
item.type === 'Number' &&
<Form.Item label={item.name} name={item.key}>
<InputNumber min={1} max={item.range && item.range[1]} step={item.step} />
</Form.Item>
}
{
item.type === 'Text' &&
<Form.Item label={item.name} name={item.key}>
<Input />
</Form.Item>
}
{
item.type === 'TextArea' &&
<Form.Item label={item.name} name={item.key}>
<TextArea rows={4} />
</Form.Item>
}
复制代码
// 维护表单控件， 提升form渲染性能
const BaseForm = {
"Text": (props) => {
const { label, placeholder, onChange } = props
return <Cell title={label}>
<Input type="text" placeholder={placeholder} onChange={onChange} />
</Cell>
},
"Number": (props) => {
const { label, placeholder, onChange } = props
return <Cell title={label}>
<Input type="number" placeholder={placeholder} onChange={onChange} />
</Cell>
}
}
// 动态渲染表单
{
formData.map((item, i) => {
let FormItem = BaseForm[item.type]
return <div className={styles.formItem} key={i}>
<FormItem {...item} />
</div>
})
}
复制代码
是否是很优雅呢？后期咱们只须要在BaseForm里维护表单组件便可，并且还能够基于BaseForm对表单进行包装，实现动态删除，编辑等功能。以下：
包装后的代码以下：
<div>
<div className={styles.disClick}><FormItem {...item} /></div>
<div className={styles.operationWrap}>
<span onClick={handleEditItem}><EditOutlined /></span>
<span onClick={handleDelItem}><MinusCircleOutlined /></span>
</div>
</div>
复制代码
-
表单标题 -
表单背景图片 -
表单背景颜色 -
提交按钮样式
以上的表单经过H5-Dooring设计而来。固然咱们能够利用它设计更加自定的表单页面。
最后一个比较使用的需求就是api定制，通常公司可能须要将用户的录入数据收集到本身的平台，那么这个时候咱们提供一个api表单提交接口积极颇有必要了，上面笔者也展现过，实现很简单，就是配置里多一个api的文本框便可。
最后一步就是实现表单的curd操做，展现以下：
具体实现也比较简单，只须要基于BaseForm进行包装，添加删除/编辑/添加按钮便可。具体能够参考个人开源项目H5-Dooring，地址：H5-Dooring传送门
利用H5-Dooring开发一款表单设计平台
在H5编辑器Dooring的实现中，咱们能够作抽象，每个页面组件能够当作特定的表单组件，以下图：
咱们能够利用dooring的能力对表单平台进行拖拽，样式设计，数据录入等等操做，感兴趣的朋友能够基于Dooring设计思路改形成本身的表单设计平台。在文末笔者会附上dooring的github地址供你们研究参考。
H5可视化编辑器Dooring功能迭代说明
实时保存功能
添加进度条组件
添加websocket通讯
实如今线下载代码功能
添加Button组件
添加动态表单设计器
最后
若是想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在公众号《趣谈前端》一块儿学习讨论，共同探索前端的边界。
更多推荐
本文分享自微信公众号 - 趣谈前端（beautifulFront）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。