Dooring可視化之從零實(shí)現(xiàn)動態(tài)表單設(shè)計器
前言
之前筆者有寫過一篇如何設(shè)計動態(tài)表單配置平臺的文章，但是由于筆者電腦問題代碼丟失，所以后期重新實(shí)現(xiàn)了一套表單設(shè)計器，并優(yōu)化了之前的設(shè)計方式，特地做一下總結(jié)和復(fù)盤。
你將收獲
動態(tài)表單開發(fā)的一般思路 可視化領(lǐng)域中的表單引擎 從零實(shí)現(xiàn)一款動態(tài)表單設(shè)計器 利用H5-Dooring開發(fā)一款表單設(shè)計平臺
正文
上圖中我們將表單設(shè)計器集成到了H5-Dooring中，使其可以實(shí)現(xiàn)拖拽生成表單。
其次我們可以根據(jù)右邊的配置項，動態(tài)的添加某個表單組件或或者修改組件字段和數(shù)據(jù)源。在配置好表單之后我們還可以定制表單提交的api接口地址，以便實(shí)現(xiàn)用戶數(shù)據(jù)的可溯源性。
在開發(fā)之前，我們先分析一下動態(tài)表單設(shè)計的一般實(shí)現(xiàn)思路。
動態(tài)表單開發(fā)的一般思路
靜態(tài)化配置列表是最傳統(tǒng)的表單配置方式之一，基本思路就是利用母表來生成配置項，進(jìn)而實(shí)現(xiàn)表單配置。類似于以下方式：
基于json schema的動態(tài)表單配置有兩種實(shí)現(xiàn)方案， 一種就是支持在線修改json文件從而實(shí)現(xiàn)定制化，另一種就是完全無代碼操作，但是前提都需要提供一套通用的表單模版。類似于如下案例：
此種方案可以實(shí)現(xiàn)基本的表單自治。也是本文主要實(shí)現(xiàn)的方案。至于在線編寫json文件的方案。筆者之前也也過成熟的方案，具體可以參考：
基于jsoneditor二次封裝一個可實(shí)時預(yù)覽的json編輯器組件(react版)
支持在線編程的混合式表單設(shè)計方案是終極方案，也是目前流行的無代碼化平臺的思想之一。一方面它提供了基于json schema的動態(tài)表單配置， 對于一些強(qiáng)定制的，需要在線設(shè)計組件方案的模式，采用在線編程，實(shí)時打包成動態(tài)組件的方式，最后根據(jù)平臺的組件約定來實(shí)現(xiàn)組件庫的方式。如下圖所示：
在線代碼編輯可以使用react-codemirror2或者?react-monaco-editor插件來實(shí)現(xiàn)。至于在線打包，我們用nodejs完全可以實(shí)現(xiàn)，筆者在做Dooring項目的在線下載代碼時就用到了該方案，感興趣的可以了解一下。
可視化領(lǐng)域中的表單引擎
可視化領(lǐng)域一方面強(qiáng)調(diào)的是圖形(可視化)的設(shè)計，一方面是動態(tài)表單。比如說我們想傻瓜式的改變一張圖的數(shù)據(jù)，屬性，交互等，我們需要通過表單這一橋梁來實(shí)現(xiàn)：
從零實(shí)現(xiàn)一款動態(tài)表單設(shè)計器
在實(shí)現(xiàn)表單設(shè)計器之前，我們先來整理一下思路和需求。在筆者的最初草圖中，它長這樣：
從草圖中我們可以提取到如下任務(wù)信息：
定義一套表單組件庫 確定表單全局屬性配置 實(shí)現(xiàn)表單操作curd(增刪查改)
單選框 復(fù)選框 單行文本 多行文本 下拉框 文件上傳 日期框 數(shù)值輸入框
以上這些基本滿足我們的日常開發(fā)需求，其次我們還可以開發(fā)數(shù)據(jù)源表單組件，列表組件，比如dooring實(shí)現(xiàn)的那樣：
在完成表單組件庫之后，我們就需要根據(jù)配置項動態(tài)渲染了。也有兩種實(shí)現(xiàn)思路，一種就是類似于多條件判斷，如下：
{
item.type === 'Number' &&
label ={item.name} name={item.key}>
min ={1} max={item.range && item.range[1]} step={item.step} />
}
{
item.type === 'Text' &&
label ={item.name} name={item.key}>
}
{
item.type === 'TextArea' &&
label ={item.name} name={item.key}>
<b id="afajh"><abbr id="afajh"></abbr></b>