一、簡介
在很多軟體系統中，表單開發都是很重要的一個部分。在表單開發中，往往會遇到重複開發的問題，例如在頁面搭建系統中，除了元件本身的邏輯，配置元件資料的表單通常也需要開發人員重複手動開發。這就導緻開發人員不僅要維護元件本身的邏輯，還要維護元件的配置表單，嚴重影響元件的開發和疊代效率。
為了讓開發人員更加專注于元件本身的邏輯處理，我們開發了DynamicForm動态表單配置系統，可以通過拖拽的方式，快速建立一個表單。
DynamicForm是由攜程市場營銷”活動平台”及”會員平台”共同設計的React表單元件，它包括表單可視化設計、校驗、預覽、渲染等功能。目前最重要的應用場景，是為樂高平台提供元件屬性配置的動态化表單配置能力。
樂高平台是探索元件化建構頁面的實際應用，期望通過歸納正常web元件和業務元件，歸納單一職責服務接口進而建構出通過配置自動生成h5頁面的方案，以達到代碼複用，邏輯複用，節省開發時間，經驗積累，節省頁面上線時間等目的。
二、樂高早期表單的實作
實作階段1：手動開發
樂高最初完全使用定制化開發的形式來實作屬性表單，這樣做的好處是表單外觀可以随心所欲，界面對于營運可以做的非常友好。當然，缺點也是顯而易見的，定制化的開發無法滿足快速疊代的活動營運要求，往往一個需求來了立馬就要上線，這個時候定制化的開發和釋出流程就會嚴重制約生産力。
實作階段2：動态表單1.0
樂高表單第二版使用的是半自動化表單，支援動态配置表單控件類型和表單校驗等。
配置面闆如圖：
此版本的表單不支援可視化拖拽，控件自上而下順序排列。解決了需求快讀疊代的問題，但因為無法自定義布局，随之帶來了屬性的臃腫以及營運人員操作複雜的問題。
是以我們開發了動态表單2.0（DynamicForm）。
DynamicForm在樂高平台的應用
為了應對樂高元件快速疊代的業務需求，必須研發出一種能夠讓元件屬性快速得到應用的表單技術架構，這樣以保證在元件新增屬性時，無需進行新代碼的開發，僅需通過簡單的配置即可生成新的元件屬性。
為了達到表單配置的靈活性，DynamicForm必須滿足以下幾個條件：
1）豐富的表單控件類型
DynamicForm包含了以下内容，滿足了多樣化的配置要求。
- 通用控件：文本框、單選框、多選框、下拉選擇、顔色選擇、圖檔上傳等
- 自定義控件：元件可視化選擇，熱區定義，JSON可視化配置控件等。
2）DIY表單界面
運維人員可以通過對控件拖拽，實時編輯的形式，對表單進行自由設計，以達到理想的UI效果。
3）表單控件配置
可以對控件的預設值、是否必填、提示資訊、控件寬度、正則比對等進行自由配置，以達到理想效果。
4）表單資料關聯
為了達到表單的屬性項的關聯，需配置資料關聯，控制分組關聯等。
配置界面示例見下圖：
二、亮點
已實作的DynamicForm具有如下亮點：
- 可視化：可視化搭建、修改和預覽表單
- 可拖拽布局：控件可在畫布内拖拽至任意坐标，以搭建最佳布局
- 可擴充：可二次開發，可擴充控件集
- 可關聯：某個控件可以控制别的控件的顯示和隐藏
- 支援複雜資料類型：支援對象結構以及對象數組結構等複雜資料類型(JSON)的配置
三、架構
DynamicForm架構設計的目的是降低表單的維護成本、降低開發人力，解決表單開發中常見的關聯、校驗、自定義展示等問題。
3.1 功能梳理
Dynamic的核心功能包括關聯、校驗、擴充、可視化等。
- 關聯：某個控件變化後，改變其他控件的顯示和隐藏。
- 校驗：通過正規表達式（預留或者自定義）進行表單校驗。
- 擴充：支援自定義控件和校驗。
- 可視化：支援可視化拖拽和可視化編輯，節省開發表單時間，并降低營運的配置成本。
3.2 架構子產品
渲染流程：
系統有表單生成器編輯面闆Form Generator，表單渲染入口Form Viewer兩個主要子產品。
這兩個子產品共用正常的基礎元件如輸入框，顔色選擇等，還有一些基于業務擴充的複雜元件，例如熱區選擇，視訊上傳，資料聚合（JSON清單）等。
動态表單一個比較重要的點是需要解決JSON可視化配置，為此表單也開發了table清單式的JSON清單元件，子項的配置就基于嵌套表單實作配置字段，并且能夠增删改查條目，excel導入，導出資料。
其他複雜資料類型配置，如["a","b"]和["a","c"]，表單送出資料結構即為{a:{b:"",c:""}}
另外一個功能點是解決動态屬性間的關聯問題，為此表單通過配置關聯表達式解決了控件關聯問題，例如控制顯隐等。
表單底層則依賴React（hooks），Ant Design的主題UI庫，Mobx。
3.3 靈活的布局
- 元件自由拖拽布局，自動對齊等
- 元件可控制添加分組，進而批量操作布局
3.4 校驗
提供預留的正常校驗，如中文，英文校驗等，以及可自定義擴充的校驗配置。
四、後續計劃
DynamicForm将作為獨立的npm子產品使用，為其他動态表單場景提供公共功能，打造泛應用動态表單。
DynamicForm代碼開源，與社群共同交流與進步。
【作者簡介】
Daryl，攜程進階研發經理，關注業界大前端及高并發應用解決方案。