基于抽象工廠模式動(dòng)態(tài)表單設(shè)計(jì)

張艷明 張敏

摘要：針對(duì)傳統(tǒng)表單定制的不足，提出一種基于抽象工廠模式的動(dòng)態(tài)表單設(shè)計(jì)方案.該方案以抽象表單元素工廠引擎為核心，利用表單元素?cái)?shù)據(jù)預(yù)處理模塊加載的表單數(shù)據(jù)，動(dòng)態(tài)實(shí)現(xiàn)了表單元素產(chǎn)品的構(gòu)建，最終由表單動(dòng)態(tài)構(gòu)建組件完成表單元素的組裝.企業(yè)級(jí)開(kāi)發(fā)應(yīng)用實(shí)踐表明，該模式可以快速、靈活構(gòu)建Web表單，滿(mǎn)足多UI風(fēng)格的運(yùn)行需求，提高了表單的可維護(hù)性和擴(kuò)展性.

關(guān)鍵詞：表單定制;動(dòng)態(tài)表單;抽象表單元素工廠

中圖分類(lèi)號(hào)：TP311? 文獻(xiàn)標(biāo)識(shí)碼：A? 文章編號(hào)：1673-260X（2019）06-0050-03

1 引言

Web表單是一種實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品用戶(hù)界面交互的重要組件.傳統(tǒng)的Web表單開(kāi)發(fā)主要采用事先編寫(xiě)好的靜態(tài)HTML頁(yè)面，這種開(kāi)發(fā)模式直接簡(jiǎn)單[1-2].但對(duì)于表單數(shù)量多、表單樣式和表單元素內(nèi)容存在頻繁變動(dòng)需求的企業(yè)應(yīng)用，傳統(tǒng)表單開(kāi)發(fā)方式已經(jīng)無(wú)法適應(yīng)，其缺點(diǎn)也顯而易見(jiàn)，復(fù)用程度不高，擴(kuò)展性差，開(kāi)發(fā)效率非常低下[3-4].

與此同時(shí)，在移動(dòng)互聯(lián)網(wǎng)時(shí)代，Web前端技術(shù)的發(fā)展速度越來(lái)越快，各式各樣的終端UI框架如雨后春筍般涌現(xiàn).表單的開(kāi)發(fā)和實(shí)現(xiàn)方式也在發(fā)生著巨大的變化，朝著更加兼容和開(kāi)放的方向發(fā)展[5].目前市面上的動(dòng)態(tài)表單定制更多基于某一種特定的UI風(fēng)格，無(wú)法適應(yīng)頁(yè)面風(fēng)格的靈活切換.

本文提出一種基于抽象表單工廠模式、面向多UI框架風(fēng)格的動(dòng)態(tài)表單實(shí)現(xiàn)方案.該設(shè)計(jì)旨在進(jìn)一步提升表單開(kāi)發(fā)的效率，滿(mǎn)足不同UI偏好風(fēng)格開(kāi)發(fā)人員的動(dòng)態(tài)表單個(gè)性化定制需求.

2 抽象工廠模式

GoF（Gamma， Helm， Johnson & Vlissides， Addison-Wesley）在1995年出版的《Design Patterns： Elements of Reusable Object-Oriented Software》一書(shū)中提出了23種經(jīng)典的Java設(shè)計(jì)模式，產(chǎn)生了巨大的影響，一直延續(xù)至今，抽象工廠模式是其中之一.

抽象工廠模式向客戶(hù)端提供一個(gè)接口，在不必指定具體產(chǎn)品類(lèi)的情況下，用于創(chuàng)建相關(guān)或者依賴(lài)對(duì)象的家族[6-7].抽象工廠模式的類(lèi)圖如圖1所示.

AbstractFactory抽象工廠定義成接口，接口包含一組工廠方法用來(lái)生產(chǎn)產(chǎn)品，所有具體工廠實(shí)現(xiàn)該接口.實(shí)現(xiàn)接口的具體工廠ConcreteFactory1，ConcreteFactory2用于生產(chǎn)不同的產(chǎn)品家族.客戶(hù)使用具體的工廠去創(chuàng)建一個(gè)具體的產(chǎn)品對(duì)象，不需要自己去實(shí)例化產(chǎn)品.

AbstractProductA，AbstractProductB為相關(guān)產(chǎn)品的接口，與實(shí)現(xiàn)接口的具體產(chǎn)品們構(gòu)成產(chǎn)品家族，每個(gè)具體工廠都能夠生產(chǎn)一整組的產(chǎn)品.按照這種設(shè)計(jì)邏輯，客戶(hù)代碼中只需依賴(lài)于抽象工廠，根據(jù)運(yùn)行時(shí)動(dòng)態(tài)綁定原理，將自動(dòng)使用實(shí)際的工廠.

3 基于抽象工廠模式動(dòng)態(tài)表單的總體設(shè)計(jì)

3.1 設(shè)計(jì)思路

本文借鑒抽象工廠設(shè)計(jì)模式，通過(guò)抽象表單元素工廠，來(lái)創(chuàng)建表單元素產(chǎn)品家族.將表單及包括文本框、下拉列表、單選按鈕組、復(fù)選框組等在內(nèi)的各類(lèi)表單元素都表示成產(chǎn)品，對(duì)每一類(lèi)產(chǎn)品的共性進(jìn)行提取，形成對(duì)應(yīng)的抽象表單和元素產(chǎn)品接口，由實(shí)現(xiàn)這些接口的具體產(chǎn)品類(lèi)負(fù)責(zé)具體實(shí)現(xiàn).表單元素產(chǎn)品的創(chuàng)建通過(guò)工廠負(fù)責(zé)完成，對(duì)不同風(fēng)格工廠的共性進(jìn)行提取，形成對(duì)應(yīng)的抽象表單元素工廠接口，由實(shí)現(xiàn)該接口的具體表單元素工廠負(fù)責(zé)具體實(shí)現(xiàn).

通過(guò)抽象表單元素工廠提供的接口，可以創(chuàng)建表單元素產(chǎn)品的家族，能夠在不同上下文中實(shí)現(xiàn)各式各樣的表單元素工廠，制造出各種不同的表單元素產(chǎn)品，比如不同的HTML版本，不同的UI外觀樣式等.

設(shè)計(jì)遵循依賴(lài)倒置原則，表單的創(chuàng)建者依賴(lài)于抽象，而不依賴(lài)具體類(lèi).因?yàn)榇a從實(shí)際的產(chǎn)品中解耦了，可以替換不同的表單元素工廠來(lái)獲取不同的表單元素產(chǎn)品.

構(gòu)成表單的各類(lèi)元素產(chǎn)品構(gòu)建完成后，再進(jìn)行組裝完成表單的創(chuàng)建.可以將表單的創(chuàng)建過(guò)程看待成一個(gè)XML文檔樹(shù)的生成過(guò)程，遍歷所有的表單元素，利用XML操作API，根據(jù)表單元素的位置屬性，將表單元素一一附加在XML文檔樹(shù)中正確的位置.

表單元素的各類(lèi)數(shù)據(jù)屬性，包括位置屬性，采用數(shù)據(jù)庫(kù)表的形式進(jìn)行存儲(chǔ)，為了適應(yīng)表單字段動(dòng)態(tài)變化，表單元素表按照Key-Value的形式進(jìn)行縱向存儲(chǔ)，每一行存儲(chǔ)一個(gè)獨(dú)立的表單元素字段內(nèi)容.

3.2 總體架構(gòu)

基于抽象工廠模式動(dòng)態(tài)表單的構(gòu)成部分主要包含抽象表單元素工廠引擎、表單元素?cái)?shù)據(jù)預(yù)處理模塊、表單動(dòng)態(tài)構(gòu)建組件及相關(guān)表單產(chǎn)品對(duì)象家族.表單元素預(yù)處理模塊根據(jù)傳入的待創(chuàng)建表單參數(shù)，負(fù)責(zé)從關(guān)系數(shù)據(jù)庫(kù)中的動(dòng)態(tài)表單數(shù)據(jù)存儲(chǔ)表中讀取相關(guān)聯(lián)的表單元素屬性，并以列表的形式存儲(chǔ)在內(nèi)存中，供抽象表單元素工廠引擎使用.抽象表單元素工廠引擎通過(guò)服務(wù)管理接口動(dòng)態(tài)加載待構(gòu)建的表單元素屬性，再根據(jù)配置數(shù)據(jù)啟動(dòng)具體的表單元素工廠，完成具體表單元素的生成過(guò)程.最后，調(diào)用表單動(dòng)態(tài)構(gòu)建組件，按照XML文檔樹(shù)的生成規(guī)則，循環(huán)遍歷表單元素并將其附加在文檔樹(shù)的相應(yīng)位置，最終完成一個(gè)具體風(fēng)格表單產(chǎn)品的構(gòu)建和顯示.總體架構(gòu)如圖2所示.

3.3 類(lèi)圖

FormElementFatory是抽象的表單元素工廠接口，它定義了如何生產(chǎn)相關(guān)表單元素產(chǎn)品的家族.BootStrapFEFactory，JQueryEasyUIFEFactory這些具體工廠負(fù)責(zé)生成具體表單元素，每個(gè)工廠都知道如何生產(chǎn)符合自己風(fēng)格的表單元素對(duì)象.根據(jù)開(kāi)發(fā)需要，可以實(shí)現(xiàn)其他不同風(fēng)格的表單元素工廠.關(guān)于表單元素產(chǎn)品家族，上圖列出了Input，Select，對(duì)于這些表單元素產(chǎn)品，每個(gè)工廠都有不同的實(shí)現(xiàn).FEFactoryClient是抽象表單元素工廠的客戶(hù)，通過(guò)依賴(lài)注入，在運(yùn)行期間動(dòng)態(tài)綁定具體的工廠，最終產(chǎn)生具體的表單及元素產(chǎn)品.

4 動(dòng)態(tài)表單實(shí)現(xiàn)

4.1 表單數(shù)據(jù)存儲(chǔ)模型

基于抽象工廠模式動(dòng)態(tài)表單設(shè)計(jì)已經(jīng)應(yīng)用于安徽合大環(huán)境檢測(cè)辦公平臺(tái)的研制開(kāi)發(fā)，該應(yīng)用面向環(huán)境檢測(cè)行業(yè)領(lǐng)域，涉及的業(yè)務(wù)范圍廣泛，指標(biāo)體系豐富多樣，涵蓋水質(zhì)、氣體、固廢、噪聲等諸多方面，需要展現(xiàn)的具體表單數(shù)量非常巨大且變化因素很多.該應(yīng)用的動(dòng)態(tài)表單數(shù)據(jù)存儲(chǔ)模型（部分字段）如圖4所示.

4.2 表單元素工廠引擎

下面給出抽象表單元素工廠引擎在運(yùn)行期間涉及的部分核心類(lèi)和服務(wù)接口及其使用說(shuō)明.

Form：抽象類(lèi)，內(nèi)部持有表單元素對(duì)象列表引用，主要方法包括prepare（），createElement（）和buildTree（）等，prepare完成表單構(gòu)建的初始化準(zhǔn)備工作，載入表單數(shù)據(jù)到元素對(duì)象列表中，createElement方法設(shè)計(jì)成模板方法，在prepare準(zhǔn)備完畢后，完成表單元素對(duì)象列表中各個(gè)表單元素的具體創(chuàng)建工作，創(chuàng)建過(guò)程由具體實(shí)現(xiàn)類(lèi)調(diào)用依賴(lài)注入的表單元素工廠負(fù)責(zé)完成.bulidTree方法將創(chuàng)建完成的表單元素組裝成完整的表單HTML文檔樹(shù)，通過(guò)調(diào)用4.3節(jié)描述的動(dòng)態(tài)表單構(gòu)建組件來(lái)實(shí)現(xiàn).

4.3 動(dòng)態(tài)表單構(gòu)建組件

其中，executeInsert方法負(fù)責(zé)將FormElement表單元素對(duì)象動(dòng)態(tài)附加到文檔樹(shù)的正確節(jié)點(diǎn)位置.該方法首先根據(jù)表單元素的行位置屬性，查詢(xún)定位到行所在文檔節(jié)點(diǎn)根元素，再通過(guò)add（index，element）方法附加到指定列位置.如果上述行定位查詢(xún)結(jié)果為空，則創(chuàng)建新的行元素.靈活起見(jiàn)，executeInsert方法可以被定義成抽象方法，由具體子類(lèi)實(shí)現(xiàn)，在運(yùn)行期間動(dòng)態(tài)決定行列元素的創(chuàng)建方式.

5 結(jié)束語(yǔ)

本文從實(shí)際需求出發(fā)，提出了基于抽象工廠模式的動(dòng)態(tài)表單設(shè)計(jì)方案，實(shí)現(xiàn)了不同風(fēng)格表單元素產(chǎn)品的動(dòng)態(tài)構(gòu)建和組裝，通過(guò)實(shí)踐應(yīng)用證明了方案在Web動(dòng)態(tài)表單開(kāi)發(fā)方面的高效性，并具有較好的靈活性和可擴(kuò)展性.

參考文獻(xiàn)：

〔1〕喻瑩瑩，李新，陳遠(yuǎn)平.前后端分離的終端自適應(yīng)動(dòng)態(tài)表單設(shè)計(jì)[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2018，27（4）：70-75.

〔2〕潘華，孫林夫，劉述雅.面向SaaS平臺(tái)的動(dòng)態(tài)表單定制技術(shù)研究[J].計(jì)算機(jī)應(yīng)用研究，2013，30（10）：3026-3029.

〔3〕張佳強(qiáng)，王士同.信息管理系統(tǒng)動(dòng)態(tài)表單技術(shù)的研究與實(shí)現(xiàn)[J].計(jì)算機(jī)應(yīng)用與軟件，2010，27（8）：83-87.

〔4〕王剛，程建平.面向業(yè)務(wù)的敏捷界面定制構(gòu)件的設(shè)計(jì)[J].微型機(jī)與應(yīng)用，2012，31（7）：11-16.

〔5〕杜艷美，黃曉芳.面向企業(yè)級(jí)web應(yīng)用的前后端分離開(kāi)發(fā)模式及實(shí)踐[J].西南科技大學(xué)學(xué)報(bào)，2018，33（2）：83-87.

〔6〕Gamma E， Helm R， Johnson R， et a1.設(shè)計(jì)模式：可復(fù)用面向?qū)ο筌浖幕A(chǔ)（英文版）[M].北京：機(jī)械工業(yè)出版社，2002.

〔7〕華銓平，龐倩超，謝穎.抽象工廠設(shè)計(jì)模式在3層結(jié)構(gòu)開(kāi)發(fā)中的應(yīng)用[J].大慶石油學(xué)院學(xué)報(bào)，2009，33（3）：112-115.