初識前端模板

作者: yaya 來源: baiduux 發布時間: 2011-10-31 10:29 閱讀: 12419 次推薦: 5 原文鏈接 [收藏]

　　總述

　　模板這個詞，可能很多人第一印象是后端的技術（Smarty，Velocity等），但本文要講的卻不是后端的概念，而是前端開發中所使用到的一種技術，也就是“前端模板”技術。

　　模板的工作原理可以簡單地分成兩個步驟：模板解析（翻譯）和數據渲染。這兩個步驟可分別部署在前端或后端來執行。如果都放在后端執行，則是像Smarty這樣的后端模板，而如果都放在前端來執行，則是我們要探討的前端模板。

　　問題

　　隨著前端交互的復雜性不變提升，無刷新頁面數據傳輸與渲染越發地頻繁化，我們發現傳統的前端開發方式在ajax數據渲染等方面存在著一個主要問題：繁瑣的數據渲染。當前端從后臺通過ajax等方式或許到數據后，如果要將這個數據渲染到指定的dom元素中，則需要進行各種字符串拼接工作或者一系列創建元素的工作，還不論細節的問題（單引號雙引號問題等），不管是哪一種形式，都是繁瑣且費時的。同時，在可讀性與維護性上也存在問題。試想，各種循環操作的字符串拼接，元素創建插入，在需要修改時，都需要重新花費不少時間與精力。那有什么方法可以解決這個問題呢?

　　原理

　　當我們在JSP中寫ulli%= name %/li/ul的時候，其實就是在應用模板，在后臺這句話會被轉換成out.print(ulli+name+/li/ul)。模板的數據渲染就是把模板中的占位符（這里是name），替換成傳入的值（比如替換成yaya）。而在前端開發中，這種方式依然具有很高實用價值。前端模板的核心是前端模板引擎，引擎將前端的模板語言轉換成瀏覽器可以解析的html語言。當轉換成功后，便可以很方便地將這段html代碼放到我們希望的地方去。

　　比如我們可以寫一段循環的li標簽的前端模板語言。通過前端模板引擎轉換后成為一連串li標簽的html語言。這時候就可以直接采用innerHTML方法把html代碼插入到ul對象中，那么就完成了生成ul列表的功能。

　　初識

　　前端的模板核心是模板解析引擎，而解析引擎的主要作用是將模板語言轉換成html/xml格式。不同的前端模板有著不同的模板語言，解析引擎因此也各不相同。讓我們先來認識幾款前端模板，了解下它們各自的模板語言。

　　Yaya Template是一款輕量級的模板引擎，采用原生javascript語法，具有易學易用等特點。我們來看一段用Yaya Template渲染列表數據的實例：

　　模板語言（通用過for循環，輸出這是第n列的li列表）

for(var i=0;i<list.length;i++){
{$ <li>這是第 {% i %} 列：{% list[i] %}</li> $}
}

　　有了模板語言后，我們只需要將數據打入模板語言中的list，就可以生成我們想要的html/xml格式了。如上例，我們只需要得到這個模板語言進行翻譯，并調用對應的render方法，

var list = [紅桃,方塊,梅花,黑桃];
var html = YayaTemplate(templateText).render({list:list});

　　這個html則是模板引擎轉換成的html/xml語言，在上例中，則為：

　　從這個例子中，我們可以發現，{$…$}表示輸出的html/xml片段，{%…%}表示輸出javascript變量。得到的html，我們可以用直接作為dom的innerHTML或者其他用處。

　　這便是前端模板，它使得我們不必去處理字符串拼接等問題，用最直觀的方式來渲染數據。我們再來看另外一款前端模板EasyTemplate。還是之前的例子，用EasyTemplate模板寫法如下：

<#list data as list>
<li>這里是第${list_index} 列：${list}</li>
</#list>

　　同樣，需要將實際數據替換模板變量，這里采用：

var list = [紅桃,方塊,梅花,黑桃];
var html = easyTemplate.render(templateText,list); //templateText指模板語言

　　像EasyTemplate這樣的前端模板，是屬于自定義模板語言的一種前端模板。我們可以從上例看出，就是EasyTemplate自定義的循環條件。像這樣EasyTemplate模板一樣采用自定義標簽的前端模板還有 lite Template:

<c:forvar=item list=${list}>
<li>這里是第${for.index}列：${item}</li>
</c:for>

　　渲染時采用：

var list = [紅桃,方塊,梅花,黑桃];
var html = liteFunction(templateText,’list’)(list);

　　好了，我們再來看看jquery作者John Resig所寫的一個前端模板jquery template。說真的，它如同jquery一樣，短小精悍。還是老例子：

<%for(var i=0;i<list.length;i++){ %>
<li>這是第 <%=i%> 列：<%= list[i] %></li>
<% } %>

　　渲染采用：

var list = [紅桃,方塊,梅花,黑桃];
var html = tmpl(templateid, list);

　　我們可以看出，Yaya Template與jquery template在模板語言的寫法上正好相反。前者將輸出html語言做特殊標記{$…$}，而后者對javascript語言做特殊標記。這兩種模板已經使得學習成本很低了，而接下來介紹的ace template的寫法將更加簡單易懂。

for(var i=0;i<list.length;i++){
<li>這是第 #{ i } 列：#{ list[i] }</li>
}

　　渲染采用：

var list = [紅桃,方塊,梅花,黑桃];
var html = AceTemplate.format(templateid, {list:list});

　　ace template采用了html與js語言直接混搭的風格，在兩者間可以直接的書寫，不用添加任何的標志用以區分不同的語言。而在html語言里面，使用js變量則采用#{}的方式輸出。ace template之所以可以兼容html與js混合寫法，是通過按行解析來實現的。所以，如果代碼能夠保證html語言與js按行劃分，這樣的用法其實是很方便的。并且ace template值得說明的一點是支持自動編碼防止xss漏洞，通過#{}渲染出來的javascript變量，已經經過了編碼處理，這一點是很方便的。而對于不需要這個功能，需要原文輸出的時候，ace template也提供了!#{}方法來滿足這種需求。

　　通過上面對五個前端模板的簡單介紹，我們可以了解到不同前端模板的各種形態，這包括寫法與用法等直觀印象。但我們知道，前端模板的核心是代碼的轉換，這肯定是需要轉換時間的，那就以上五個不同的前端模板，性能上會有怎樣不同的表現呢。

　　性能

　　前端模板語言到html/xml語言，是通過模板引擎進行翻譯的。而模板引擎的翻譯性能在某種程度上決定了前端模板解決方案的可行性的高低。上訴五種前端模板，各自的性能會是怎么樣的，我們對它們進行測試。分別對Yaya Template、EasyTemplate、jquery template、 ace template、lite template部署前端模板做同樣的操作，比較模板引擎翻譯時間代價。

　　各自的模板代碼如下：

　　Yaya Templat

for (var i=0;i<list.length;i++){
if (i<100){
{$<li>小于100 這里是第{%i%} 列：{%list[i]%}</li>$}
}
else{
{$<li>不小于100 這里是第{%i%} 列：{%list[i]%}</li>$}
}
}

　　EasyTemplate

<#list data as list>
<#if (list_index <100)>
<li>小于100 這里是第${list_index} 列：${list}</li>
<#else>
<li>不小于100 這里是第${list_index} 列：${list}</li>
</#if>
</#list>

　　jquery template

<%for (var i=0;i<list.length;i++){ %>
<%if (i<100) { %>
<li>小于100 這里是第<%=i%>列：<%=list[i]%></li>
<% } else{ %>
<li>不小于100 這里是第<%=i%>列：<%=list[i]%></li>
<% } %>
<% } %>

　　ace template

for (var i=0;i<list.length;i++){
if (i<100){
<li>小于100 這里是第#{i} 列：#{list[i]}</li>
}
else{
<li>不小于100 這里是第#{i} 列：#{list[i]}</li>
}
}

　　lite template

<c:forvar=item list=${list}>
<c:if test=${for.index<100}>
<li>小于100 這里是第 $!{for.index} 列：$!{item}</li>
</c:if>
<c:else>
<li>不小于100 這里是第$!{for.index} 列：$!{item}</li>
</c:else>
</c:for>

　　然后我們改變list數組里面的元素個數，對各個模板翻譯執行的時間進行記錄。結果如下(xp+ie6/ie8/firefox/chrome運行環境)：

　　模板翻譯時間對比表(第一次翻譯并渲染數據時間單位:毫秒)

List長度		*Yaya Template*	*EasyTemplate*	*jquery template*	*ace template*	*lite template*
1	ie6	0 0 0 0	0 0 0 0	0 0 0 0	0 0 0 0	16 15 12 4
	ie8
	firefox
	chrome
10	ie6	0 0 0 0	0 0 0 0	0 0 1 0	0 0 0 1	16 15 11 2
	ie8
	firefox
	chrome
100	ie6	0 0 0 0	0 0 0 0	0 0 1 1	0 0 1 0	15 16 10 4
	ie8
	firefox
	chrome
1000	ie6	0 0 1 0	16 16 2 3	16 0 3 2	0 0 2 3	15 15 21 7
	ie8
	firefox
	chrome
10000	ie6	63 16 7 4	78 47 22 26	110 47 27 23	62 62 20 22	78 31 22 15
	ie8
	firefox
	chrome
100000	ie6	672 250 75 90	1719 609 221 304	1203 719 267 308	750 328 203 288	688 250 124 114
	ie8
	firefox
	chrome

　　通過第一次翻譯后，如果前端模板可以緩存翻譯后的中間代碼，或者可以返回構建中間代碼的函數，那么再次渲染數據的時候，就不需要再翻譯。這樣可以極大的縮小渲染數據的時間，提高速度。

　　綜合各種調研數據對比表如下：

	*Yaya Template*	*EasyTemplate*	*jquery template*	*ace template*	*lite template*
緩存加速	有	無	有	有	有
防xss漏洞編碼	無	無	無	有	有
擴展語法	無	有	無	無	有
錯誤跟蹤	無	無	無	無	有
代碼尺寸（字節）	483	1527	453	2512	91511

　　兼容

　　前端模板的兼容性也是一個重要的問題。能夠實現用戶不同的前端模板需求，將前端模板語言正確翻譯成html/xml語言，是優秀的前端模板所需要具備的特點。而通過對以上五種前端模板的測試，并沒有發現嚴重的兼容性問題。但在一些細節上，還是發現了一些問題如下表:

　　兼容性測試對比表

測試點	*Yaya Template*	*EasyTemplate*	*jquery template*	*ace template*	*lite template*
換行空白	通過	空白被省略	通過	通過	通過
空白節點	通過	通過	通過	通過	通過
字符’/\	通過	通過	\ ‘’未通過	通過	通過
多層嵌套	通過	通過	通過	通過	通過
語法檢測	通過	通過	不能通過，在if else語句中常用的形態不能處理。	通過	通過

　　流程

　　對于什么是前端模板，它有什么特性，怎么使用這樣的問題已經通過上面的分析說明給出了答案。但前端模板既然是前端的范疇，就不可能獨立存在，而是需要運用到前端開發的流程中的。而采用了前端模版的開發流程與傳統的相比又會是怎么樣的呢？

　　上圖是傳統的開發流程。首先將UI設計圖轉換成html的頁面，其中的數據一般先用模擬數據代替。比如，UI設計有個列表，那么可能開發人員會先建立一些模擬的數據填充到節點中，來開發調整頁面樣式。最后一步，則將需要動態生成（ajax應用等）的地方，將模擬數據的節點變成空白節點，然后在javascript里面拼裝這些html節點的字符串，最后再還原到原節點處（比如用innerHTML插入html）。

　　上圖是一個實例。當列表中的元素需要ajax動態加載的時候，在傳統開發中可能按照先開發模擬數據的html頁面，再將這些元素拼接成html字符串，之后再進行一系列處理的功能。

　　那么，它的問題是什么呢？很明顯，不可逆是最大的問題。當開發者完成了開發，這時候如果需要修改，那么將是很頭疼的事。由于是由字符串拼接出來的html片段，想直接修改這些字符串來改變結構或是修改樣式什么的將是一個比重新開發一遍還要具有挑戰的工作。所以，開發者往往選擇再來一遍吧：html的模擬數據頁面，然后再拼接字符串。除了不可逆，維護性差以及開發成本高都是采用傳統方式開發富客戶端應用的弊病。

　　好吧，我們試著改變這個局面。看看下圖，采用前端模板開發的新方式，或許會找到某些答案。

　　雙向可逆，是的，采用前端模板的開發方式，在開發好展示的html頁面后，直接經過簡單的修改即可生成html+template 頁面，無需再拼接字符串，無需再反復重寫展示模擬數據的html頁面，一切都變得很輕松。我們來看看代碼便知道原因了（以ace template為例）。

　　如果調用模板引擎，當模板執行數據執行后，直接覆蓋parentNode里面的內容。而如果想繼續調整html結構等，則不調用模板引擎即可。而原有的調試數據，在需要發布的時候可以直接通過代碼編譯去掉debug start與debug end之間代碼即可（這僅僅是前端模塊開發的一種實例，實際開發中可以去掉模擬數據，不用編譯）。