基于數(shù)據驅動的動態(tài)Web模板技術設計與實現(xiàn)

劉 放，陳和平

(1.武漢科技大學計算機科學與技術學院，湖北 武漢，430065；2. 武漢科技大學智能信息處理與實時工業(yè)系統(tǒng)湖北省重點實驗室，湖北 武漢，430065)

基于數(shù)據驅動的動態(tài)Web模板技術設計與實現(xiàn)

劉 放，陳和平

(1.武漢科技大學計算機科學與技術學院，湖北 武漢，430065；2. 武漢科技大學智能信息處理與實時工業(yè)系統(tǒng)湖北省重點實驗室，湖北 武漢，430065)

隨著互聯(lián)網產品規(guī)模的不斷擴大，前端腳本代碼規(guī)模大、重用性低、維護困難、擴展性差等問題不斷涌現(xiàn)。為此，本文分析了目前主流的Web模板技術及各自的優(yōu)缺點，并結合國內瀏覽器的兼容性，在Living template技術思想的基礎上，提出一種基于數(shù)據驅動的動態(tài)Web模板技術方案(DWTT)，它能有效提高前端開發(fā)效率和代碼復用性，降低程序擴展和維護的復雜度。

模板；Web應用；前端開發(fā)；數(shù)據驅動；抽象語法樹

隨著互聯(lián)網技術與應用的不斷發(fā)展，以操作DOM(document object model)元素為核心的傳統(tǒng)前端開發(fā)方式應對日益復雜的業(yè)務需求已顯得越來越力不從心。進入以人為本的Web 2.0時代后，網頁不再以簡單的文字和圖片展示為主，豐富多樣的交互形式提升了Web應用的用戶體驗，Web前端技術在互聯(lián)網產品開發(fā)過程中的使用越來越廣泛。

本文圍繞數(shù)據驅動關鍵點，結合當前主流前端模板技術中的實現(xiàn)思路，分析各自的優(yōu)缺點，提出基于數(shù)據驅動的動態(tài)Web模板技術(dynamic Web template technology，DWTT)的設計思路和實現(xiàn)方法，以便于開發(fā)者分離業(yè)務邏輯、顯示邏輯和用戶界面，使程序代碼結構更清晰，更容易被閱讀、測試、維護、替換、擴展和改進。

1 模板技術相關研究

早期的瀏覽器所渲染的HTML代碼由后端開發(fā)人員將數(shù)據傳入后端模板后拼接而成。隨著Ajax技術的日漸流行，異步數(shù)據傳輸方式的用戶體驗更佳，Json格式存儲量小且簡潔易讀等優(yōu)勢也日益凸顯[1]。前端開發(fā)人員普遍采用字符串拼接的方式，將Ajax獲取的數(shù)據手動輸出到HTML。這種開發(fā)方式效率低下，代碼邏輯與視圖過于耦合，難以閱讀和維護。隨著各種瀏覽器對W3C標準下的新特性支持度越來越高，HTML5和CSS3等新技術不斷普及[2]，前端模板引擎也出現(xiàn)了百花齊放的局面。采用前端模板后，使得開發(fā)流程中前、后端分離更加徹底[3]。

下面對3種具有代表性的前端模板技術，即String-based模板技術、DOM-based模板技術和Living template技術，進行比較與分析。

1.1 String-based模板技術

這是一種基于字符串的模板技術，以字符串和數(shù)據為輸入，通過用正則表達式將占位符替換為所需數(shù)據的方式，構建出完整的HTML字符串。由于基于字符串的模板方法依賴于innerHTML的渲染，所以會帶來以下問題。

(1)安全問題：使用innerHTML構建DOM具有安全隱患[4]，用于渲染的動態(tài)數(shù)據可能存在安全漏洞，如果沒有經過特定的轉義處理，就有可能造成XSS攻擊或者CSRF攻擊[5]。

(2)性能問題：使用innerHTML替換DOM效率較低，即使僅替換DOM的一個屬性或文本內容，也必須通過innerHTML替換整個DOM，從而導致瀏覽器的重排和重繪。

(3)開發(fā)效率問題：由于是通過正則表達式匹配后在特定函數(shù)中拼接字符串，所以容易造成重復計算，而且完全移除現(xiàn)有的DOM，再重新渲染一遍，掛載在DOM上的事件和狀態(tài)都將不復存在，從而降低了開發(fā)效率。

1.2 DOM-based模板技術

這是一種基于DOM節(jié)點的模板技術，通過innerHTML獲取初始DOM結構，再通過DOM API層級從原始DOM屬性中提取事件、指令、表達式和過濾器等信息，編譯成Living DOM，從而完成數(shù)據Model和View的雙向綁定。近年來，Google公司推出的AngularJS[6]就是DOM-based模板技術的代表。DOM-based模板技術比String-based模板技術更加靈活，功能也更加強大，達到了一定意義上的數(shù)據驅動，但其也存在以下問題。

(1)信息冗余：由于DOM-based模板技術通過innerHTML獲取DOM編譯節(jié)點,信息承載于屬性中，造成了不必要的冗余，同時也會影響閱讀，提升開發(fā)難度。一種解決辦法就是通過讀取屬性后再進行刪除處理，如此會影響性能，降低用戶體驗。

(2)初始節(jié)點獲取問題：通過innerHTML獲取初始節(jié)點，沒有獨立的語法解析器或詞法解析器，與HTML是強依賴關系。初次進入DOM的內容是模板，渲染需要時間，所以會造成內容閃動。

1.3 Living template技術

這是一種基于動態(tài)模板思想的模板技術。Living template技術與String-based、DOM-based模板技術的最大區(qū)別是不依賴于innerHTML來渲染和提取所需信息。其主要思想是：首先，結合數(shù)據綁定技術，使用成熟的詞法解析和語法解析技術，將輸入的字符串解析成抽象語法樹AST[7]，而不是僅僅通過簡單的正則表達式匹配特定語法，再進行字符串拼接；其次，通過對AST進行編譯，創(chuàng)建具有數(shù)據動態(tài)綁定功能的Living DOM，從而避免使用innerHTML，解決了瀏覽器的元素閃動問題，提高了應用的安全性，其原理如圖1所示。

圖1 Living template原理圖

從圖1可知，輸入的字符串通過詞法解析器Lexer，生成對應的詞法塊。詞法塊通過語法解析器Parser，構建抽象語法樹AST。然后將AST編譯成具有動態(tài)數(shù)據綁定功能的Living DOM，從而實現(xiàn)View和Model的雙向綁定。

2 DWTT設計與實現(xiàn)

由于Living template同時擁有String-based和DOM-based模板技術的優(yōu)點，并可以巧妙地規(guī)避innerHTML，以較小的開銷來實現(xiàn)局部更新，故本文基于Living template技術的思想，具體設計并實現(xiàn)了一種基于數(shù)據驅動的動態(tài)Web模板技術DWTT。

2.1 總體設計

DWTT總體設計如圖2所示。頂層組件是DWTT的入口模塊，統(tǒng)一管理各模塊的依賴和引入，為動態(tài)模板技術和數(shù)據綁定技術提供相應接口。動態(tài)模板技術由詞法解析器Lexer、語法解析器Parser、編譯器Walker和過濾器Filter構成。Lexer的作用在于對字符串模板進行詞法分析，通過特定的正則表達式標識每個詞塊的類型，生成詞塊對象[8]。Parser的作用在于對Lexer輸出的詞法對象數(shù)組進行語法分析，然后根據DWTT的模板語法，將各零散的詞塊拼接為有具體含義的語法對象，并根據父子級聯(lián)關系輸出為抽象語法樹AST。Walker的作用在于將Parser構建出的AST根據不同的節(jié)點類型，通過不同的編譯函數(shù)，生成對應的Living DOM，并掛載到頁面中，完成組件UI的呈現(xiàn)。Filter可以在數(shù)據傳入前根據一定的規(guī)則過濾掉一些信息，或者設置一些參數(shù)，再進行業(yè)務邏輯處理。數(shù)據綁定技術由臟檢測Watch模塊和指令Directive構成。Watch是實現(xiàn)數(shù)據驅動的核心，該模塊實現(xiàn)臟檢測的監(jiān)聽和更新操作，通過watch()方法來實現(xiàn)數(shù)據監(jiān)聽和回調函數(shù)的綁定，通過update()方法遍歷觀察者列表觸發(fā)更新操作。Directive是對某個節(jié)點的特定功能增強，一般以屬性的方式在節(jié)點上聲明[9]。本文提出的內置指令有r-class、r-style、r-hide、on-xxx、ref等，開發(fā)者也可以根據項目需求擴展更多功能強大的指令，從而提高組件的功能性。

圖2 DWTT的總體設計

2.2 詳細設計

DWTT的核心在于動態(tài)模板技術和數(shù)據綁定技術，對此給出以下詳細設計方案。

2.2.1 動態(tài)模板的設計

本文基于Living template思想，通過模板的緯度給出DWTT的設計方案，如圖3所示。

圖3 動態(tài)模板設計

字符串先經過Lexer詞法解析器，根據解析模式的詞法，通過特定的正則表達式匹配出特定的詞塊，輸出由詞塊對象組成的數(shù)組。Lexer詞法解析器擁有3種解析模式，最終都是將變量、注釋、開標簽“<”、閉合標簽“>”、模板語法“{}”、屬性等詞塊進行標識，解析為詞法對象數(shù)組，具體結構如下：

[

{

"type": "TAG_OPEN",

"value": "input",

"pos": 0

},

{

"type": "OPEN",

"value": "if",

"pos": 7

}

]

其中，每個詞法對象有3個key，其含義如下：

(1)type：用于標識詞法，如STRING、NUMBER等；

(2)value：表示具體值；

(3)pos：表示該詞在字符串中的位置索引。

Parser語法解析器分析輸入的詞法對象數(shù)組中每個詞法對象的詞法類型，生成對應的語法類型節(jié)點對象[10]，再進行層層遞歸，將各語法節(jié)點掛載至對應的父語法節(jié)點下，構成結構與字符串模板一致的抽象語法樹AST。通過type表示節(jié)點的詞法類型，通過tag指定節(jié)點的標簽命名，將節(jié)點的屬性解析至attrs數(shù)組中，結構大致如下：

[

{

"type": "element",

"tag": "input",

"attrs": [{"type": "if",}]

}

]

抽象語法樹AST構建完成后，進入Walker編譯器，建立數(shù)據監(jiān)聽，生成Living DOM，并將其最終掛載在頁面中。

2.2.2 數(shù)據綁定模塊的設計

數(shù)據綁定模塊設計如圖4所示。

圖4 數(shù)據綁定模塊設計

本文采用臟檢測的方式實現(xiàn)數(shù)據綁定和監(jiān)聽。臟檢測是一種不關心如何以及何時改變數(shù)據，只關心在特定的檢測階段數(shù)據是否改變的數(shù)據監(jiān)聽技術。可以在批量處理完數(shù)據之后，再統(tǒng)一更新view，進行DOM的局部刷新。

前文提到AST構建完成后，會進入Walker編譯器進行編譯。DWTT將提供一個Watch模塊，專門負責數(shù)據監(jiān)聽和修改。Watch模塊對外提供兩個方法：

(1) DWTT.$watch()，該方法接受兩個入參，第一個是被監(jiān)控的表達式，第二個是監(jiān)聽函數(shù)。當被監(jiān)控的表達式發(fā)生變化時，監(jiān)聽函數(shù)就會運行。該方法返回一個watch對象。

(2) DWTT.$update()，該方法接受兩個入參，第一個是需要更新的表達式，第二個是更新的值。不帶參數(shù)則直接進入臟檢測階段。

當Walker編譯器遇到template、express等插值節(jié)點時，會創(chuàng)建一個textNode，當數(shù)據變化時，修改textNode的屬性textContent，并生成watch對象，返回的watch對象包含以下信息：

{

id: uid, // watch對象的唯一id

fn: function(){}, //傳入的監(jiān)聽函數(shù)

get: function(){}, //獲取被監(jiān)控的表達式

set: function(){} , //用于部分數(shù)據的設置

once: false, //是否只監(jiān)聽一次

last: undefined, //上一次表達式的值

dirty: false, //是否為臟狀態(tài)

}

在實例化元素和組件時會執(zhí)行一次$update方法，觸發(fā)臟檢測，此階段的執(zhí)行步驟如下：

(1)標記dirty為false；

(2)遍歷該UI所有通過$watch方法綁定的觀察者watcher，通過get方法獲取當前值并與last進行對比，如果相同則跳過，否則將last改為當前值，并運行fn方法，將dirty值設為true；

(3)編譯檢測一輪后，如果dirty值為true，則重新進入步驟(1)，否則進入步驟(4)；

(4)完成臟檢測。

Living DOM生成并掛載于頁面中，再通過r-model、on-click等方式自動觸發(fā)$update方法進而觸發(fā)臟檢測，從而實現(xiàn)數(shù)據綁定。

2.3 DWTT的實現(xiàn)

DWTT選擇JavaScript語言來實現(xiàn)，通過bower實現(xiàn)前端工作流，按照CommonJS規(guī)范進行模塊化開發(fā)。

2.3.1 頂層組件模塊

頂層組件模塊是整個DWTT的入口，其核心邏輯如下：

/*newC1.實例化，data參數(shù)在definition中*/

var DWTT = function(definition, options){

this.$refs = {};

/*newC2.將模板加載*/

template = this.template;

/*newC3.將模板解析為AST語法樹*/

template = new Parser(template).parse();

/*newC4.處理計算屬性*/

this.computed = handleComputed();

/*newC5.觸發(fā)config事件*/

this.$emit("$config");

/*newC6.編譯AST語法樹為LivingDOM*/

this.group = this.$compile(namespace);

/*newC7.觸發(fā)第一次臟檢測*/

if(!this.$parent) this.$update();

/*newC8.觸發(fā)init事件*/

this.$emit("$init");

if( this.init ) this.init(this.data);}

首先將傳入組件的數(shù)據和事件進行整合，然后對組件的字符串模板進行詞法和語法解析，并構建抽象語法樹AST，完成后觸發(fā)config事件，執(zhí)行config()方法。然后進入Walker編譯階段，通過Watch模塊對組件進行數(shù)據綁定，通過$watch()方法將依賴屬性加入觀察者列表，構建Living DOM，完成后觸發(fā)init事件，宣告初始化完成并執(zhí)行init()方法。

2.3.2 詞法解析器Lexer

Lexer的作用在于對字符串模板進行詞法分析，標識每個詞塊的類型，其主要設計見圖5。

圖5 Lexer的設計

Lexer詞法解析器擁有3種解析模式。JST解析模式主要是為了適應公司互聯(lián)網產品新老交替的過渡，TAG解析模式是通過script標簽獲取字符串模板從而方便統(tǒng)一管理，Init解析模式的解析語法和TAG解析模式的類似，區(qū)別在于前者從組件定義處而不是script標簽處獲取字符串模板。Lexer通過判斷字符串模板的標識來決定采用哪種解析方式。以JST解析模式下的JST_STRING類型為例：

JST_STRING:[/′([^′]*)′|″([^″]*)″/, function(all, one, two){′

return{type: ′STRING′, value:one‖two‖″″}

}, ′JST′]

各個詞法類型均以特定的正則表達式匹配，從而生成詞法對象數(shù)組傳遞給Parser。

2.3.3 語法解析器Parser

Parser根據自定義語法，將零散的詞塊拼接為有具體含義的語法對象，并輸出為AST。對詞法對象數(shù)組中的每個對象進行遍歷操作，然后進入解析流程。根據Lexer得出的詞法type，對各個詞法對象進行不同的處理從而得到一棵由7種語法節(jié)點對象組成的AST，其主要流程見圖6。

圖6 Parser的流程

7種語法節(jié)點類型為：

(1)if:條件判斷節(jié)點，如{#if} {#elseif} {#else} {/if}；

(2)list:循環(huán)列表節(jié)點，如{#list arr as item}{/list}；

(3)expression:表達式，如{100+hello}；

(4)element:元素節(jié)點，包含component組件；

(5)attribute:屬性節(jié)點，如r-model；

(6)text:文本節(jié)點，字符串中包含的文本；

(7)template:模板節(jié)點，如{hello}。

2.3.4 編譯器Walker

Walker的作用在于將Parser構建出的AST編譯為Living DOM。首先將AST遍歷到單個節(jié)點級別，根據AST節(jié)點類型進入不同的編譯函數(shù)。本文設計了7種編譯函數(shù)，和AST的7種語法節(jié)點類型相對應，分別為：walkers.if、walkers.list、walkers.expression、walkers.element、walkers.attribute、walkers.text和walkers.template。每一個編譯函數(shù)都有自己獨特的邏輯處理，比如walkers.expression方法，對模板進行數(shù)據綁定，其主要邏輯如下：

walkers.expression = function(ast, options){

var node = document.createTextNode("");

//將表達式加入watcher隊列，進行監(jiān)聽

this.$watch(ast, function(newval){

//綁定更新執(zhí)行的函數(shù)，即DOM局部更新

dom.text(node, "" + (newval) );},

{init: true})

return node;}

編譯函數(shù)執(zhí)行完畢后，再通過DOM操作將Living DOM掛載到頁面中，從而完成整個編譯過程，將數(shù)據驅動的組件UI呈現(xiàn)于用戶界面。

3 實驗分析

本文根據模板技術類型的不同，選取了采用String-based的doT和Mustache，采用DOM-based的Angular、Vue與本文提出的基于數(shù)據驅動的動態(tài)Web模板DWTT進行性能對比實驗。數(shù)據驅動模板技術的性能測試核心在于對字符串模板中內建DSL的解析速度。實驗測試環(huán)境為Win7，CPU為i5-4200，主頻為2.5 GHz，系統(tǒng)內存為4 GB。

實驗數(shù)據為1000個簡單對象組成的數(shù)組集合。首先編寫各模板技術對應的測試用例，將實驗數(shù)據集傳入各模板并渲染200次，記錄執(zhí)行時間。然后使用Highchart將執(zhí)行所需時間的測試結果通過可視化的方式呈現(xiàn)，如圖7所示。

由圖7可知，性能最好的是doT，但由于其無法實現(xiàn)數(shù)據驅動，功能性較差。DWTT與同樣采用臟檢測技術的Angular相比具有性能上的絕對優(yōu)勢。由于Vue使用的是依賴追蹤技術，通過采用ES5標準的Object.defineProperty方法，給變量的set和get函數(shù)添加檢測依賴于該變量的watcher對象，所以其性能得到提升，但是Vue會帶來兼容性問題，故本文未采用依賴追蹤技術，而是采用臟檢測技術進行數(shù)據綁定。

圖7 模板引擎性能測試結果

4 結語

本文研究了各主流模板技術的設計思想和技術實現(xiàn)思路后，在Living template的基礎上，具體設計并實現(xiàn)了一種基于數(shù)據驅動的動態(tài)Web模板技術DWTT，并進行了性能對比實驗。DWTT能有效提高前端開發(fā)效率和代碼復用性，并在實際運用中獲得了較好的體驗和反饋。當然，DWTT也存在不足之處，通過臟檢測進行數(shù)據監(jiān)聽，當變量間依賴關系過于復雜時會導致計算量較大，對性能有一定的影響。此類問題可考慮依賴追蹤技術來進一步改善。

[1] 孫光明, 王碩. 基于JSON的Ajax數(shù)據通信快速算法[J]. 計算機應用與軟件, 2015, 32(1):263-266.

[2] Hoy M B. HTML5: a new standard for the Web[J]. Medical Reference Services Quarterly, 2011,

30(1):50-55.

[3] 楊穎瑩.高性能Web框架的分析與應用[D].北京:北京郵電大學, 2012.

[4] Lin A W, Barceló P. String solving with word equations and transducers: towards a logic for analysing mutation XSS[J]. ACM SIGPLAN Notices, 2016, 51(1):123-136.

[5] You J X, Guo F. Improved CSRFGuard for CSRF attacks defense on Java EE platform[C]// International Conference on Computer Science and Education. IEEE, August 22-24, 2014:1115-1120.

[6] Jain N, Mangal P, Mehta D. AngularJS: a modern MVC framework in JavaScript[J].Journal of Global Research in Computer Science,2014,5(12):17-23.

[7] 李鄭，李姝，王俊，等. 基于抽象語法樹分析的版本控制分支合并算法[J]. 計算機系統(tǒng)應用, 2015, 24(3):139-146.

[8] Sulzmann M, van Steenhoven P. A flexible and efficient ML Lexer tool based on extended regular expression submatching[C]//Compiler Construction: Proceedings of 23rd International Conference, CC 2014, Held as Part of the European Joint Conferences on Theory and Practice of Software. Springer Berlin Heidelberg, 2014:174-191.

[9] Ruebbelke L, Ford B. AngularJS in action[M]. Shelter Island: Manning Publications Co., 2015.

[10]Rosa R, Zabokrtsky Z. KLcpos3-a language similarity measure for delexicalized parser transfer[C]//Proceedings of the 53rd Annual Meeting of the Association for Computational Linguistics and the 7th International Joint Conference on Natural Language Processing.Beijing, July 26-31, 2015:243-249.

[責任編輯 尚 晶]

Design and implementation of data-driven dynamic Web template technology

LiuFang,ChenHeping

(1. College of Computer Science and Technology, Wuhan University of Science and Technology, Wuhan 430065, China;2. Hubei Province Key Laboratory of Intelligent Information Processing and Real-time Industrial System, Wuhan University of Science and Technology, Wuhan 430065, China)

With the continuous expansion of Internet Web products, such problems as large scale, low reusability, difficulty in organizing and maintaining, poor expansibility and so on are emerging in the front-end script codes. So this paper studies the current mainstream Web template technologies and analyzes their merits and demerits. In light of the compatibility of domestic browsers, a data-driven dynamic Web template technology named as DWTT is put forward based on the thoughts of Living template technology. DWTT can improve the front-end development efficiency and code reusability, and reduce the complexity of program extension and maintenance.

template; Web application; front-end development; data-driven; abstract syntax tree

2016-11-28

國家自然科學基金資助項目(61100133).

劉 放(1992-)，男，武漢科技大學碩士生. E-mail:brizer@163.com

陳和平(1956-)，男，武漢科技大學教授，博士. E-mail:chp@wust.edu.cn

10.3969/j.issn.1674-3644.2017.01.014

TP31

A

1674-3644(2017)01-0070-06