[[431676]]

前言

之前筆者有寫過一篇如何設計動態(tài)表單配置平臺的文章，但是由于筆者電腦問題代碼丟失，所以后期重新實現(xiàn)了一套表單設計器，并優(yōu)化了之前的設計方式，特地做一下總結和復盤。

你將收獲

• 動態(tài)表單開發(fā)的一般思路
• 可視化領域中的表單引擎
• 從零實現(xiàn)一款動態(tài)表單設計器
• 利用H5-Dooring開發(fā)一款表單設計平臺

正文

按照習慣，我們先看看表單設計器實現(xiàn)的效果展示：

上圖中我們將表單設計器集成到了H5-Dooring中，使其可以實現(xiàn)拖拽生成表單。

其次我們可以根據(jù)右邊的配置項，動態(tài)的添加某個表單組件或或者修改組件字段和數(shù)據(jù)源。在配置好表單之后我們還可以定制表單提交的api接口地址，以便實現(xiàn)用戶數(shù)據(jù)的可溯源性。

在開發(fā)之前，我們先分析一下動態(tài)表單設計的一般實現(xiàn)思路。

動態(tài)表單開發(fā)的一般思路

1. 靜態(tài)化配置列表

靜態(tài)化配置列表是最傳統(tǒng)的表單配置方式之一，基本思路就是利用母表來生成配置項，進而實現(xiàn)表單配置。類似于以下方式：

早期的網(wǎng)站配置就是類似于這種呢方案實現(xiàn)的，比如說我們要定制網(wǎng)站的主色，網(wǎng)站某些組件是否可見，是一種比較簡單的方式。但是缺點是每增加一個配置屬性，都要開發(fā)人員重新編寫一個字段配置代碼，這種方式在表單開發(fā)中非常不靈活，而且對代碼層有強依賴性，所以只適合做小型配置系統(tǒng)。比如個人網(wǎng)站，簡單的自定義表單。

2. 基于json schema的動態(tài)表單配置

基于json schema的動態(tài)表單配置有兩種實現(xiàn)方案， 一種就是支持在線修改json文件從而實現(xiàn)定制化，另一種就是完全無代碼操作，但是前提都需要提供一套通用的表單模版。類似于如下案例：

此種方案可以實現(xiàn)基本的表單自治。也是本文主要實現(xiàn)的方案。至于在線編寫json文件的方案。筆者之前也也過成熟的方案，具體可以參考：

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

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

支持在線編程的混合式表單設計方案是終極方案，也是目前流行的無代碼化平臺的思想之一。一方面它提供了基于json schema的動態(tài)表單配置， 對于一些強定制的，需要在線設計組件方案的模式，采用在線編程，實時打包成動態(tài)組件的方式，最后根據(jù)平臺的組件約定來實現(xiàn)組件庫的方式。如下圖所示：

 

 

在線代碼編輯可以使用react-codemirror2或者 react-monaco-editor插件來實現(xiàn)。至于在線打包，我們用nodejs完全可以實現(xiàn)，筆者在做Dooring項目的在線下載代碼時就用到了該方案，感興趣的可以了解一下。

可視化領域中的表單引擎

可視化領域一方面強調的是圖形(可視化)的設計，一方面是動態(tài)表單。比如說我們想傻瓜式的改變一張圖的數(shù)據(jù)，屬性，交互等，我們需要通過表單這一橋梁來實現(xiàn)：

 

 

所以我們需要設計一款適合公司產(chǎn)品的“表單引擎”，來動態(tài)根據(jù)圖形組件的類型渲染不同表單配置。這塊思想也是表單設計器要解決的問題之一。在下面的文章中我們會詳細介紹實現(xiàn)過程。

從零實現(xiàn)一款動態(tài)表單設計器

在實現(xiàn)表單設計器之前，我們先來整理一下思路和需求。在筆者的最初草圖中，它長這樣：

 

 

從草圖中我們可以提取到如下任務信息：

• 定義一套表單組件庫
• 確定表單全局屬性配置
• 實現(xiàn)表單操作curd(增刪查改)

我們這里總結了幾個常用的表單組件如下：

• 單選框
• 復選框
• 單行文本
• 多行文本
• 下拉框
• 文件上傳
• 日期框
• 數(shù)值輸入框

以上這些基本滿足我們的日常開發(fā)需求，其次我們還可以開發(fā)數(shù)據(jù)源表單組件，列表組件，比如dooring實現(xiàn)的那樣：

 

 

類似的還有顏色面板這些，我們可以更具業(yè)務需求自行定制。

在完成表單組件庫之后，我們就需要根據(jù)配置項動態(tài)渲染了。也有兩種實現(xiàn)思路，一種就是類似于多條件判斷，如下：

{ 
  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> 
} 

這樣做雖然可行，也有很多成熟系統(tǒng)采用該方案，但是一旦表單變多，比如一個頁面有幾十個甚至上百個表單項，那么我們將渲染m * n次(m為表單組件類型數(shù)，n為配置項個數(shù))。另一種方式筆者看來是比較優(yōu)雅的，可以將復雜度降低到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> 
    } 
} 
 
//  動態(tài)渲染表單 
{ 
    formData.map((item, i) => { 
        let FormItem = BaseForm[item.type] 
        return <div className={styles.formItem} key={i}> 
                  <FormItem {...item} /> 
              </div> 
    }) 
} 

 

 

是不是很優(yōu)雅呢?后期我們只需要在BaseForm里維護表單組件即可，而且還可以基于BaseForm對表單進行包裝，實現(xiàn)動態(tài)刪除，編輯等功能。如下：

 

 

 

 

包裝后的代碼如下：

 

 

<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定制，一般公司可能需要將用戶的錄入數(shù)據(jù)收集到自己的平臺，那么這個時候我們提供一個api表單提交接口積極很有必要了，上面筆者也展示過，實現(xiàn)很簡單，就是配置里多一個api的文本框即可。

最后一步就是實現(xiàn)表單的curd操作，展示如下：

編輯表單項：

 

 

刪除表單項：

 

 

添加表單項：

 

 

 

具體實現(xiàn)也比較簡單，只需要基于BaseForm進行包裝，添加刪除/編輯/添加按鈕即可。具體可以參考我的開源項目H5-Dooring，地址：H5-Dooring傳送門

利用H5-Dooring開發(fā)一款表單設計平臺

在H5編輯器Dooring的實現(xiàn)中，我們可以做抽象，每一個頁面組件可以看成特定的表單組件，如下圖：

 

 

 

 

我們可以利用dooring的能力對表單平臺進行拖拽，樣式設計，數(shù)據(jù)錄入等等操作，感興趣的朋友可以基于Dooring設計思路改造成自己的表單設計平臺。在文末筆者會附上dooring的github地址供大家研究參考。

H5可視化編輯器Dooring功能迭代說明

目前筆者實現(xiàn)的H5可視化編輯器H5-Dooring功能新增如下：

• 實時保存功能
• 添加進度條組件
• 添加websocket通信
• 實現(xiàn)在線下載代碼功能
• 添加Button組件
• 添加動態(tài)表單設計器

本文轉載自微信公眾號「趣談前端」