劉 放，陳和平

(1.武漢科技大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院，湖北 武漢，430065；2. 武漢科技大學(xué)智能信息處理與實(shí)時(shí)工業(yè)系統(tǒng)湖北省重點(diǎn)實(shí)驗(yàn)室，湖北 武漢，430065)

基于數(shù)據(jù)驅(qū)動(dòng)的動(dòng)態(tài)Web模板技術(shù)設(shè)計(jì)與實(shí)現(xiàn)

劉 放，陳和平

(1.武漢科技大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院，湖北 武漢，430065；2. 武漢科技大學(xué)智能信息處理與實(shí)時(shí)工業(yè)系統(tǒng)湖北省重點(diǎn)實(shí)驗(yàn)室，湖北 武漢，430065)

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

模板；Web應(yīng)用；前端開發(fā)；數(shù)據(jù)驅(qū)動(dòng)；抽象語法樹

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

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

1 模板技術(shù)相關(guān)研究

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

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

1.1 String-based模板技術(shù)

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

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

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

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

1.2 DOM-based模板技術(shù)

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

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

(2)初始節(jié)點(diǎn)獲取問題：通過innerHTML獲取初始節(jié)點(diǎn)，沒有獨(dú)立的語法解析器或詞法解析器，與HTML是強(qiáng)依賴關(guān)系。初次進(jìn)入DOM的內(nèi)容是模板，渲染需要時(shí)間，所以會(huì)造成內(nèi)容閃動(dòng)。

1.3 Living template技術(shù)

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

圖1 Living template原理圖

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

2 DWTT設(shè)計(jì)與實(shí)現(xiàn)

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

2.1 總體設(shè)計(jì)

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

圖2 DWTT的總體設(shè)計(jì)

2.2 詳細(xì)設(shè)計(jì)

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

2.2.1 動(dòng)態(tài)模板的設(shè)計(jì)

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

圖3 動(dòng)態(tài)模板設(shè)計(jì)

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

[

{

"type": "TAG_OPEN",

"value": "input",

"pos": 0

},

{

"type": "OPEN",

"value": "if",

"pos": 7

}

]

其中，每個(gè)詞法對(duì)象有3個(gè)key，其含義如下：

(1)type：用于標(biāo)識(shí)詞法，如STRING、NUMBER等；

(2)value：表示具體值；

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

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

[

{

"type": "element",

"tag": "input",

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

}

]

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

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

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

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

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

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

(1) DWTT.$watch()，該方法接受兩個(gè)入?yún)?，第一個(gè)是被監(jiān)控的表達(dá)式，第二個(gè)是監(jiān)聽函數(shù)。當(dāng)被監(jiān)控的表達(dá)式發(fā)生變化時(shí)，監(jiān)聽函數(shù)就會(huì)運(yùn)行。該方法返回一個(gè)watch對(duì)象。

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

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

{

id: uid, // watch對(duì)象的唯一id

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

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

set: function(){} , //用于部分?jǐn)?shù)據(jù)的設(shè)置

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

last: undefined, //上一次表達(dá)式的值

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

}

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

(1)標(biāo)記dirty為false；

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

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

(4)完成臟檢測(cè)。

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

2.3 DWTT的實(shí)現(xiàn)

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

2.3.1 頂層組件模塊

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

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

var DWTT = function(definition, options){

this.$refs = {};

/*newC2.將模板加載*/

template = this.template;

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

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

/*newC4.處理計(jì)算屬性*/

this.computed = handleComputed();

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

this.$emit("$config");

/*newC6.編譯AST語法樹為L(zhǎng)ivingDOM*/

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

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

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

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

this.$emit("$init");

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

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

2.3.2 詞法解析器Lexer

Lexer的作用在于對(duì)字符串模板進(jìn)行詞法分析，標(biāo)識(shí)每個(gè)詞塊的類型，其主要設(shè)計(jì)見圖5。

圖5 Lexer的設(shè)計(jì)

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

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

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

}, ′JST′]

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

2.3.3 語法解析器Parser

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

圖6 Parser的流程

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

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

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

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

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

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

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

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

2.3.4 編譯器Walker

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

walkers.expression = function(ast, options){

var node = document.createTextNode("");

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

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

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

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

{init: true})

return node;}

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

3 實(shí)驗(yàn)分析

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

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

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

圖7 模板引擎性能測(cè)試結(jié)果

4 結(jié)語

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

[1] 孫光明, 王碩. 基于JSON的Ajax數(shù)據(jù)通信快速算法[J]. 計(jì)算機(jī)應(yīng)用與軟件, 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框架的分析與應(yīng)用[D].北京:北京郵電大學(xué), 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]. 計(jì)算機(jī)系統(tǒng)應(yī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.

[責(zé)任編輯 尚 晶]

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

國家自然科學(xué)基金資助項(xiàng)目(61100133).

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

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

10.3969/j.issn.1674-3644.2017.01.014

TP31

A

1674-3644(2017)01-0070-06