如何設(shè)計(jì)一個(gè)表單引擎？（如何設(shè)計(jì)一個(gè)表單引擎）
表單的本質(zhì)是業(yè)務(wù)，沒有表單是無法完成業(yè)務(wù)系統(tǒng)的，而動(dòng)態(tài)表單使業(yè)務(wù)系統(tǒng)更高級(jí)。動(dòng)態(tài)表單是什么呢？它是如何工作的？應(yīng)用場(chǎng)景有哪些？一起來看一下吧。
一、表單
表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能，是提交數(shù)據(jù)的一切形式。表單的本質(zhì)是提交數(shù)據(jù)，不僅僅包含輸入框、下拉選擇框等這些控件，常見的按鈕空間也屬于一個(gè)表單。
1. 動(dòng)態(tài)表單
動(dòng)態(tài)表單（Dynamic Form），指在前端運(yùn)行過程中可依賴某些業(yè)務(wù)邏輯發(fā)生表單項(xiàng)變化的表單，還包括表單布局、表單數(shù)據(jù)管理、表單校驗(yàn)、表單交互、表單項(xiàng)聯(lián)動(dòng)邏輯等原本由前端編程完成的表單開發(fā)，轉(zhuǎn)由后端通過 API 接口輸出表單描述自動(dòng)完成上述所有內(nèi)容的表單開發(fā)形式。
（動(dòng)態(tài)表單原理示意圖）
2. 動(dòng)態(tài)表單的特點(diǎn)優(yōu)勢(shì)
表單的本質(zhì)是業(yè)務(wù)，而動(dòng)態(tài)表單使業(yè)務(wù)系統(tǒng)更高級(jí)。
普通表單是一個(gè)表單寫一份前端的代碼，代碼全部由前端開發(fā)者完成（后端配合接口輸出）。而動(dòng)態(tài)表單則是一個(gè)表單對(duì)應(yīng)一個(gè) JSON（由后端輸出），所有表單由一份代碼（動(dòng)態(tài)表單引擎）進(jìn)行加載和渲染。
所以，動(dòng)態(tài)表單具有以下優(yōu)勢(shì)：
- 客戶端運(yùn)行的代碼量更少；
- 每個(gè)表單的JSON按需加載；
- 表單需求變化時(shí)，無需前端修改發(fā)版，只需編輯數(shù)據(jù)庫中的JSON。
二、表單控件
表單控件是提供一組允許用戶操作的對(duì)象，從而接收用戶輸入的數(shù)據(jù)，用戶可操作該對(duì)象來執(zhí)行對(duì)表單設(shè)計(jì)，修改等操作。
1. HTML表單種常見的13個(gè)控件
input元素?zé)o疑是一個(gè)龐大和復(fù)雜的元素，但它并不是唯一的表單控件。還有button、select、option、label、optgroup、textarea、fieldset、legend這八個(gè)傳統(tǒng)表單控件，datalist、progress、meter、output、keygen這五個(gè)新增表單控件。
2. 動(dòng)態(tài)表單控件
動(dòng)態(tài)表單是老廠商天翎核心技術(shù)之一，也是天翎公司核心產(chǎn)品MyApps的重要組成部分。通過對(duì)于動(dòng)態(tài)表單的應(yīng)用，可以避免在電子流程系統(tǒng)中硬編碼的數(shù)據(jù)采集及處理表單，提高系統(tǒng)的可維護(hù)性。
說明：
Form，動(dòng)態(tài)表單實(shí)現(xiàn)的基本入口，描述了DynaForm的最基本屬性，比如名稱、ID、以及最核心的TemplateContext。TemplateContext中保存的是Form的描述XML，通過此XML描述兩類信息：
- Form中所具有的Field以及Field的類型、名稱、長(zhǎng)度、計(jì)算代碼等等，XML；
- Form的格式，比如排列次序、表格定列化的過程當(dāng)中，系統(tǒng)自動(dòng)解析XML的內(nèi)容并將其轉(zhuǎn)換為Java Object并由此具備Object的行為特性；位等。Form作為一個(gè)ValueObject存儲(chǔ)在數(shù)據(jù)庫中。
FormElement，接口，表示Form中的基本元素；
FormField，動(dòng)態(tài)表單的最基本元素，在myApps/OBPM中被聲明為Abstract，具體Object行為依賴于具體的SubClass實(shí)現(xiàn)；
TextField，單行文本框，繼承FormField；
SelectField，下拉選擇框，繼承FormField；
TextareaField，多行文本框，繼承FormField；
CheckBoxField，復(fù)選框，繼承FormField；
RadioBoxField，單選框，繼承FormField；
Textpart，靜態(tài)文本段，除各種Field以外的靜態(tài)文本部分，繼承FormElement；
ComponentField，自定義組件，繼承FormField；
AttachmentUploadField，附件上傳組件，繼承FormField；
ImageUploadField，圖片上傳組件，繼承FormField；
ViewDialogField，視圖組件，用于實(shí)現(xiàn)主從結(jié)構(gòu)的表單，繼承FormField；
CalctextField，計(jì)算文本組件，用于實(shí)現(xiàn)需要計(jì)算的文本，繼承FormField；
IncludeField，實(shí)現(xiàn)SubForm的包含，繼承FormField；
WordField，Word組件，繼承FormField；
OcrField，為將來預(yù)留的接口，系統(tǒng)暫未實(shí)現(xiàn)；
三、表單引擎
表單引擎是為快速實(shí)施項(xiàng)目研發(fā)的輕量級(jí)表單設(shè)計(jì)工具。采用表單引擎工具可在不開發(fā)和新增加代碼的情況下設(shè)計(jì)出新表單樣式，同比程序開發(fā)可省掉程序員差不多70%的開發(fā)工作量，并且后期維護(hù)相對(duì)簡(jiǎn)單，管理方便。
1. 工作原理
在了解了表單的基本機(jī)構(gòu)后，進(jìn)一步看看表單引擎是如何工作的。
從客戶端（Client）輸入數(shù)據(jù)（Document），比如一個(gè)excel文件，表單（Form）結(jié)合excel文件自動(dòng)生成HTML，如下圖：
（表單結(jié)合文檔生成HTML過程）
（XML解析為表單對(duì)象的過程）
（表單轉(zhuǎn)為HTML過程）
（表單生成數(shù)據(jù)庫）
2. 應(yīng)用場(chǎng)景
天翎Myapps低代碼開發(fā)平臺(tái)的表單引擎是基于Web界面上可視化編輯的表單設(shè)計(jì)系統(tǒng)，同時(shí)支持印刷模式和拖拽模式兩種設(shè)計(jì)方式，形象可見，操作方便。印刷模式可以做一些復(fù)雜的表單配置，同時(shí)還支持word表格的導(dǎo)入；拖拽模式：基于Vue的表單設(shè)計(jì)器，采用可視化拖拉拽的模式進(jìn)行表單的設(shè)計(jì)。
（表單前臺(tái)）
（表單后臺(tái)）
本文由 @周志軍Jarod 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
