Dooring可視化之從零實現動態表單設計器

前言

以前筆者有寫過一篇如何設計動態表單配置平臺的文章，可是因爲筆者電腦問題代碼丟失，因此後期從新實現了一套表單設計器，並優化了以前的設計方式，特意作一下總結和覆盤。javascript

你將收穫

動態表單開發的通常思路
可視化領域中的表單引擎
從零實現一款動態表單設計器
利用H5-Dooring開發一款表單設計平臺

正文

按照習慣，咱們先看看表單設計器實現的效果展現：

上圖中咱們將表單設計器集成到了H5-Dooring中，使其能夠實現拖拽生成表單。css

其次咱們能夠根據右邊的配置項，動態的添加某個表單組件或或者修改組件字段和數據源。在配置好表單以後咱們還能夠定製表單提交的api接口地址，以便實現用戶數據的可溯源性。前端

在開發以前，咱們先分析一下動態表單設計的通常實現思路。java

動態表單開發的通常思路

1. 靜態化配置列表

靜態化配置列表是最傳統的表單配置方式之一，基本思路就是利用母表來生成配置項，進而實現表單配置。相似於如下方式：node

早期的網站配置就是相似於這種呢方案實現的，好比說咱們要定製網站的主色，網站某些組件是否可見，是一種比較簡單的方式。可是缺點是每增長一個配置屬性，都要開發人員從新編寫一個字段配置代碼，這種方式在表單開發中很是不靈活，並且對代碼層有強依賴性，因此只適合作小型配置系統。好比我的網站，簡單的自定義表單。

2. 基於json schema的動態表單配置

基於json schema的動態表單配置有兩種實現方案，一種就是支持在線修改json文件從而實現定製化，另外一種就是徹底無代碼操做，可是前提都須要提供一套通用的表單模版。相似於以下案例：react

此種方案能夠實現基本的表單自治。也是本文主要實現的方案。至於在線編寫json文件的方案。筆者以前也也過成熟的方案，具體能夠參考：webpack

基於jsoneditor二次封裝一個可實時預覽的json編輯器組件(react版)css3

3. 支持在線coding的混合式表單設計

支持在線編程的混合式表單設計方案是終極方案，也是目前流行的無代碼化平臺的思想之一。一方面它提供了基於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>
} 
 
    
 

   

   
   
    
    
    

   
    
  複製代碼

這樣作雖然可行，也有不少成熟系統採用該方案，可是一旦表單變多，好比一個頁面有幾十個甚至上百個表單項，那麼咱們將渲染m * n次(m爲表單組件類型數，n爲配置項個數)。另外一種方式筆者看來是比較優雅的，能夠將複雜度下降到O(n),也就是筆者經常使用的對象法。思路大至以下：將表單組件的類型做爲對象的屬性，屬性值爲對應的表單組件，這樣遍歷的時候只須要對應上對象的具體類型便可。代碼以下：

    
 
    // 維護表單控件， 提升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功能迭代說明

目前筆者實現的H5可視化編輯器H5-Dooring功能新增以下：

實時保存功能
添加進度條組件
添加websocket通訊
實如今線下載代碼功能
添加Button組件
添加動態表單設計器

最後

若是想學習更多H5遊戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數據可視化等前端知識和實戰，歡迎在公衆號《趣談前端》一塊兒學習討論，共同探索前端的邊界。