摘要：第三部分介紹一種模板引擎，之所以介紹他是因?yàn)椤！?。。三?jiǎn)介模板引擎是數(shù)據(jù)與界面分離工作中最重要一環(huán)。是新一代模板引擎，它采用預(yù)編譯方式讓性能有了質(zhì)的飛躍，并且充分利用引擎特性，使得其性能無論在前端還是后端都有極其出色的表現(xiàn)。

嗯，這也是一個(gè)學(xué)習(xí)筆記，材料均來自網(wǎng)絡(luò)，有改動(dòng)。。
文章主要分為三部分，第一部分通過實(shí)現(xiàn)一個(gè)簡(jiǎn)易的ERB模板引擎來介紹其原理，參考javascript模板引擎和實(shí)現(xiàn)原理，有改動(dòng)，看了很多關(guān)于模板引擎的文章，就這一篇最通俗易懂，適合入門。第二部分介紹一個(gè)非常NB的模板引擎，參考JavaScript template engine in just 20 lines，超級(jí)簡(jiǎn)潔，僅20行，適合進(jìn)階。第三部分介紹一種js模板引擎——art Template，之所以介紹他是因?yàn)?。。。。你猜?/p> 一.入門－簡(jiǎn)易的ERB模板引擎 模板簡(jiǎn)介

模板通常是指嵌入了某種動(dòng)態(tài)編程語言代碼的文本，數(shù)據(jù)和模板通過某種形式的結(jié)合，可以變化出不同的結(jié)果。模板通常用來定義顯示的形式，能夠使得數(shù)據(jù)展現(xiàn)更為豐富，而且容易維護(hù)。例如，下面是一個(gè)模板的例子：

    <% for(var i in items){ %>
        
<%= items[i].text %>
    <% } %>

如果有如下items數(shù)據(jù)：

items:[
    { text: "text1" ,status:"done" },
    { text: "text2" ,status:"pending" },
    { text: "text3" ,status:"pending" },
    { text: "text4" ,status:"processing" }
]

通過某種方式的結(jié)合，可以產(chǎn)生下面的Html代碼：

    
text1

    
text2

    
text3

    
text4

如果不使用模板，想要達(dá)到同樣的效果，即將上面的數(shù)據(jù)展現(xiàn)成結(jié)果的樣子，需要像下面這樣將html標(biāo)簽拼接成字符串：

var temp = "
";
for(var i in items){
    temp += "
" + items[i].text + "
";
}
temp += "
";

可以看出使用模板有如下好處：

簡(jiǎn)化了html的書寫

通過編程元素（比如循環(huán)和條件分支），對(duì)數(shù)據(jù)的展現(xiàn)更具有控制的能力

分離了數(shù)據(jù)與展現(xiàn)，使得展現(xiàn)的邏輯和效果更易維護(hù)

通過分析模板，將數(shù)據(jù)和模板結(jié)合在一起輸出最后的結(jié)果的程序稱為模板引擎，模板有很多種，相對(duì)應(yīng)的模板引擎也有很多種。一種比較古老的模板稱為ERB，在很多的web框架中被采用，比如：ASP.NET 、 Rails ... 上面的例子就是ERB的例子。在ERB中兩個(gè)核心的概念：evaluate和interpolate。表面上evaluate是指包含在<% %>中的部分，interpolate是指包含在<%= %>中的部分。從模板引擎的角度，evaluate中的部分不會(huì)直接輸出到結(jié)果中，一般用于過程控制；而interpolate中的部分將直接輸出到結(jié)果中。
從模板引擎的實(shí)現(xiàn)上看，需要依賴編程語言的動(dòng)態(tài)編譯或者動(dòng)態(tài)解釋的特性，以簡(jiǎn)化實(shí)現(xiàn)和提高性能。例如：ASP.NET利用.NET的動(dòng)態(tài)編譯，將模板編譯成動(dòng)態(tài)的類，并利用反射動(dòng)態(tài)執(zhí)行類中的代碼。這種實(shí)現(xiàn)實(shí)際上是比較復(fù)雜的，因?yàn)?b>C#是一門靜態(tài)的編程語言，但是使用javascript可以利用Function，以極少的代碼實(shí)現(xiàn)一個(gè)簡(jiǎn)易的模板引擎。

針對(duì)上面的例子，回顧一下使用模板和不使用模板的差別。
模板寫法：

    <% for(var i in items){ %>
        
<%= items[i].text %>
    <% } %>

非模板寫法：

var temp = "
";
for(var i in items){
    temp += "
" + items[i].text + "
";
}
temp += "
";

仔細(xì)觀察，實(shí)際上這兩種方法十分“相似”，能夠找到某種意義上的一一對(duì)應(yīng)。如果能夠?qū)⒛０宓奈谋咀兂纱a執(zhí)行，那么就能實(shí)現(xiàn)模板轉(zhuǎn)化。在轉(zhuǎn)化過程中有兩個(gè)原則：

遇到普通的文本直接當(dāng)成字符串拼接

遇到interpolate(即<%= %>)，將其中的內(nèi)容當(dāng)成變量拼接在字符串中

遇到evaluate(即<% %>)，直接當(dāng)成代碼

將上面的例子按照上述原則進(jìn)行變換，再添加一個(gè)總的函數(shù)：

var template = function(items){
    var temp = "";
    //開始變換
    temp += "
";
    for(var i in items){
        temp += "
" + items[i].text + "
";
    }
    temp += "
";
}

最后執(zhí)行這個(gè)函數(shù)，傳入數(shù)據(jù)參數(shù)即可：

var result = template(items);

可見上面的轉(zhuǎn)化邏輯其實(shí)十分簡(jiǎn)單，但是關(guān)鍵的問題是，模板是變化的，這意味著生成的程序代碼也必須是在運(yùn)行時(shí)生成并執(zhí)行的。好在javascript有許多動(dòng)態(tài)特性，其中一個(gè)強(qiáng)大的特性就是Function。
我們通常使用function關(guān)鍵字在js中聲明函數(shù)，很少用Function。在js中function是字面語法，js的運(yùn)行時(shí)會(huì)將字面的function轉(zhuǎn)化成Function對(duì)象，所以實(shí)際上Function提供了更為底層和靈活的機(jī)制。

用 Function 類直接創(chuàng)建函數(shù)的語法如下：

var function_name = new Function(arg1, arg2, ..., argN, function_body)

例如：

//創(chuàng)建動(dòng)態(tài)函數(shù)    
var sayHi = new Function("sName", "sMessage", "alert("Hello " + sName + sMessage);");
//執(zhí)行    
sayHi("Hello","World");

函數(shù)體和參數(shù)都能夠通過字符串來創(chuàng)建！So cool！有了這個(gè)特性，可以將模板文本轉(zhuǎn)化成函數(shù)體的字符串，這樣就可以創(chuàng)建動(dòng)態(tài)的函數(shù)來動(dòng)態(tài)的調(diào)用了。

首先利用正則式來描述interpolate和evaluate，括號(hào)用來分組捕獲：

var interpolate_reg = /<%=([sS]+?)%>/g;
var evaluate_reg = /<%([sS]+?)%>/g;

為了對(duì)整個(gè)模板進(jìn)行連續(xù)的匹配將這兩個(gè)正則式合并在一起，但是注意，所有能夠匹配interpolate的字符串都能匹配evaluate，所以interpolate需要有較高的優(yōu)先級(jí)：

var matcher = /<%=([sS]+?)%>|<%([sS]+?)%>/g

設(shè)計(jì)一個(gè)函數(shù)用于轉(zhuǎn)化模板，輸入?yún)?shù)為模板文本字串和數(shù)據(jù)對(duì)象

var matcher = /<%=([sS]+?)%>|<%([sS]+?)%>/g
//text: 傳入的模板文本字串
//data: 數(shù)據(jù)對(duì)象
var template = function(text,data){ ... }

使用replace方法，進(jìn)行正則的匹配和“替換”，實(shí)際上我們的目的不是要替換interpolate或evaluate，而是在匹配的過程中構(gòu)建出“方法體"：

var matcher = /<%=([sS]+?)%>|<%([sS]+?)%>/g
//text: 傳入的模板文本字串
//data: 數(shù)據(jù)對(duì)象
var template = function(text,data){
    var index = 0;//記錄當(dāng)前掃描到哪里了
    var function_body = "var temp = "";";
    function_body += "temp += "";
    text.replace(matcher,function(match,interpolate,evaluate,offset){
        //找到第一個(gè)匹配后，將前面部分作為普通字符串拼接的表達(dá)式
        function_body += text.slice(index,offset);

        //如果是<% ... %>直接作為代碼片段，evaluate就是捕獲的分組
        if(evaluate){
            function_body += "";" + evaluate + "temp += "";
        }
        //如果是<%= ... %>拼接字符串，interpolate就是捕獲的分組
        if(interpolate){
            function_body += "" + " + interpolate + " + "";
        }
        //遞增index，跳過evaluate或者interpolate
        index = offset + match.length;
        //這里的return沒有什么意義，因?yàn)殛P(guān)鍵不是替換text，而是構(gòu)建function_body
        return match;
    });
    //最后的代碼應(yīng)該是返回temp
    function_body += "";return temp;";
}

至此，function_body雖然是個(gè)字符串，但里面的內(nèi)容實(shí)際上是一段函數(shù)代碼，可以用這個(gè)變量來動(dòng)態(tài)創(chuàng)建一個(gè)函數(shù)對(duì)象，并通過data參數(shù)調(diào)用：

var render = new Function("obj", function_body);
return render(data);

這樣render就是一個(gè)方法，可以調(diào)用，方法內(nèi)部的代碼由模板的內(nèi)容構(gòu)造，但是大致的框架應(yīng)該是這樣的：

function render(obj){
    var temp = "";
    temp += ...
    ...
    return temp;
}

注意到，方法的形參是obj，所以模板內(nèi)部引用的變量應(yīng)該是obj：

看似到這里就OK了，但是有個(gè)必須解決的問題。模板文本中可能包含 u2028 u2029等字符，這些字符如果出現(xiàn)在代碼中，會(huì)出錯(cuò)，比如下面的代碼是錯(cuò)誤的：

temp += "
        

    " + ... ;

注意：javascript 中的字符串是不能跨行的！
我們希望看到的應(yīng)該是這樣的代碼：

temp += "
 		

" + ...;

這樣需要把 前面的轉(zhuǎn)義成即可，最終變成字面的 。

另外，還有一個(gè)問題是，上面的代碼無法將最后一個(gè)evaluate或者interpolate后面的部分拼接進(jìn)來，解決這個(gè)問題的辦法也很簡(jiǎn)單，只需要在正則式中添加一個(gè)行尾的匹配即可：

var matcher = /<%=([sS]+?)%>|<%([sS]+?)%>|$/g;

var matcher = /<%=([sS]+?)%>|<%([sS]+?)%>|$/g

//模板文本中的特殊字符轉(zhuǎn)義處理
var escaper = /|"|
|
|	|u2028|u2029/g;
var escapes = {
    """:      """,
    "":     "",
    "
":     "r",
    "
":     "n",
    "	":     "t",
    "u2028": "u2028",
    "u2029": "u2029"
  };

//text: 傳入的模板文本字串
//data: 數(shù)據(jù)對(duì)象
var template = function(text,data){
    var index = 0;//記錄當(dāng)前掃描到哪里了
    var function_body = "var temp = "";";
    function_body += "temp += "";
    text.replace(matcher,function(match,interpolate,evaluate,offset){
        //找到第一個(gè)匹配后，將前面部分作為普通字符串拼接的表達(dá)式
        //添加了處理轉(zhuǎn)義字符
        function_body += text.slice(index,offset)
            .replace(escaper, function(match) { return "" + escapes[match]; });

        //如果是<% ... %>直接作為代碼片段，evaluate就是捕獲的分組
        if(evaluate){
            function_body += "";" + evaluate + "temp += "";
        }
        //如果是<%= ... %>拼接字符串，interpolate就是捕獲的分組
        if(interpolate){
            function_body += "" + " + interpolate + " + "";
        }
        //遞增index，跳過evaluate或者interpolate
        index = offset + match.length;
        //這里的return沒有什么意義，因?yàn)殛P(guān)鍵不是替換text，而是構(gòu)建function_body
        return match;
    });
    //最后的代碼應(yīng)該是返回temp
    function_body += "";return temp;";
    var render = new Function("obj", function_body);
    return render(data);
}

調(diào)用代碼可以是這樣：

...

var text = document.getElementById("template").innerHTML;
var items = [
    { text: "text1" ,status:"done" },
    { text: "text2" ,status:"pending" },
    { text: "text3" ,status:"pending" },
    { text: "text4" ,status:"processing" }
];
console.log(template(text,items));

還有幾個(gè)細(xì)節(jié)的問題需要注意：

因?yàn)?b><%或者%>都是模板的邊界字符，如果模板需要輸出<%或者%>，那么需要設(shè)計(jì)轉(zhuǎn)義的辦法

如果數(shù)據(jù)對(duì)象中包含有null，顯然不希望最后輸出null,所以需要在function_body的代碼中考慮null的情況

在模板中每次使用obj的形參引用數(shù)據(jù)，可能不太方便，可以在function_body添加with(obj||{}){...}，這樣模板中可以直接使用obj的屬性

可以設(shè)計(jì)將render返回出去，而不是返回轉(zhuǎn)化的結(jié)果，這樣外部可以緩存生成的函數(shù)，以提高性能

var TemplateEngine = function(html, options) {
    var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = "var r=[];
", cursor = 0, match;//1
    var add = function(line, js) {//2
        js? (code += line.match(reExp) ? line + "
" : "r.push(" + line + ");
") :
            (code += line != "" ? "r.push("" + line.replace(/"/g, """) + "");
" : "");
        return add;
    }
    while(match = re.exec(html)) {//3
        add(html.slice(cursor, match.index))(match[1], true);
        cursor = match.index + match[0].length;
    }
    add(html.substr(cursor, html.length - cursor));
    code += "return r.join("");";
    return new Function(code.replace(/[
	
]/g, "")).apply(options);//4
}

re = /<%([^%>]+)?%>/g

該正則表達(dá)式用于獲取模板中的標(biāo)識(shí)字段<%...%>,然后用傳入引擎中的數(shù)據(jù)去填充它們.

reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g

該正則的作用是，如果一段JS代碼以if, for, else, switch, case, break, |開頭，那它們將會(huì)直接添加到函數(shù)體中。如果不是，則會(huì)被push到code變量中。

如果你看不懂上述正則表達(dá)式，請(qǐng)參考這里 js正則表達(dá)式語法

var add = function(line, js) {
        js? (code += line.match(reExp) ? line + "
" : "r.push(" + line + ");
") :
            (code += line != "" ? "r.push("" + line.replace(/"/g, """) + "");
" : "");
        return add;
    }

js模板由三部分組成

1.普通文本字符串，比如標(biāo)簽元素ul等
2.js流程控制語句，比如if, for, else等等，對(duì)應(yīng)ERB模板中的interpolate
3.變量，需要用輸入的數(shù)據(jù)替換的部分，對(duì)應(yīng)ERB模板中的evaluate

注意：有的將模板分為兩部分，js代碼（對(duì)應(yīng)2）和文本（對(duì)應(yīng)1、3）

注釋2中add函數(shù)的作用是生成渲染函數(shù)的函數(shù)體字符串（Function函數(shù)體字符串），該函數(shù)最終返回HTML文檔字符串。模板中的所有部分都需要拼接組成函數(shù)體字符串，但根據(jù)是否需要拼接到HTML文檔字符串中，需要對(duì)不同部分執(zhí)行不同的操作。js代碼作為流程控制語句，不需要拼接到HTML文檔字符串中（函數(shù)返回的字符串中不會(huì)包括該部分），直接作為代碼執(zhí)行，而對(duì)于文本需要拼接成HTML文檔字符串，具體分析如下：

注釋：拼接HTML文檔字符串有兩種方式，一種是利用+運(yùn)算符，另一種是將需要拼接到HTML文檔字符串的部分push到數(shù)組中，然后利用"join"函數(shù)合并。

1.對(duì)于普通文本字符串，需要作為字符串拼接到HTML字符串中，此時(shí)，js取false，將執(zhí)行

(code += line != "" ? "r.push("" + line.replace(/"/g, """) + "");
" : "");

注意：push到數(shù)組中的內(nèi)容需要被""包圍的，因此如果普通文本中包含有"，需要轉(zhuǎn)譯為"

2.對(duì)于流程控制語句和變量，他們都是被標(biāo)識(shí)符號(hào)<%%>包圍的部分，對(duì)應(yīng)的js去true，將執(zhí)行

(code += line.match(reExp) ? line + "
" : "r.push(" + line + ");
") 

1）對(duì)于js流程控制語句，line.match(reExp)為true,不需要拼接到HTML文檔字符串中，因此不需要push到數(shù)組中，而直接拼接到函數(shù)體字符串中。
2)對(duì)于變量，需要拼接到HTML文檔字符串中，但是不能被""包圍，否則會(huì)作為字符串輸出，而不會(huì)作為變量。

另外：注意add函數(shù)最后又返回了自身，類似于js中的鏈?zhǔn)讲僮鳌?/p> 標(biāo)注3

while(match = re.exec(html)) {
        add(html.slice(cursor, match.index))(match[1], true);
        cursor = match.index + match[0].length;
    }

這里需要了解exec函數(shù),不懂得請(qǐng)移步這里JavaScript exec() 方法

return new Function(code.replace(/[
	
]/g, "")).apply(options);

利用apply設(shè)置Function函數(shù)作用域，在函數(shù)內(nèi)部，this指向options,可以利用this.attr訪問options.attr。

javascript模板引擎是數(shù)據(jù)與界面分離工作中最重要一環(huán)。雖然每個(gè)引擎從模板語法、語法解析、變量賦值、字符串拼接的實(shí)現(xiàn)方式各有所不同，但關(guān)鍵的渲染原理仍然是動(dòng)態(tài)執(zhí)行 javascript 字符串。

artTemplate 是新一代 javascript 模板引擎，它采用預(yù)編譯方式讓性能有了質(zhì)的飛躍，并且充分利用 javascript 引擎特性，使得其性能無論在前端還是后端都有極其出色的表現(xiàn)。

在一般的模板引擎實(shí)現(xiàn)原理中，因?yàn)橐獙?duì)模板變量進(jìn)行賦值，所以每次渲染都需要?jiǎng)討B(tài)編譯 javascript 字符串完成變量賦值。而 artTemplate 的編譯賦值過程卻是在渲染之前完成的，這種方式稱之為“預(yù)編譯”。

很多人誤以為數(shù)組 push 方法拼接字符串會(huì)比 += 快，要知道這僅僅是 IE6-8 的瀏覽器下。實(shí)測(cè)表明現(xiàn)代瀏覽器使用 += 會(huì)比數(shù)組 push 方法快，而在 v8 引擎中，使用 += 方式比數(shù)組拼接快 4.7 倍。所以 artTemplate 根據(jù) javascript 引擎特性采用了兩種不同的字符串拼接方式。

引用js文件：

頁面中，使用一個(gè)type="text/template"的script標(biāo)簽存放模板：

模板邏輯語法開始與結(jié)束的界定符號(hào)為<% 與 %>，若<%后面緊跟=號(hào)則輸出變量?jī)?nèi)容。同ERB模板

3.渲染模板

template.render(id, data);

繼續(xù)上面的例子：

var fragment = template("doctor-template", {
                "data":[
                    {
                        name:"王靜",
                        score:4.5,
                        photo:"images/logo.png",
                        hospital:"江蘇省中醫(yī)院",
                        desc:"婦科、不孕不育癥、月經(jīng)病等",
                        position:"副醫(yī)師"
                    },
                    {
                        name:"啦啦",
                        score:4.9,
                        photo:"images/logo.png",
                        hospital:"鼓樓醫(yī)院",
                        desc:"兒童呼吸系統(tǒng)疾病的診治，對(duì)于兒童疾病",
                        position:"主治醫(yī)師"
                    }
                ]
            });

1.javascript 模板引擎系列文章（一）
2.JavaScript模板引擎原理，幾行代碼的事兒
3.高性能JavaScript模板引擎原理解析
4.javascript模板引擎和實(shí)現(xiàn)原理
5.js模板引擎——art Template
6.[譯] 只有 20 行的 JavaScript 模板引擎
7.javascript模板引擎和實(shí)現(xiàn)原理
8.推薦五款流行的JavaScript模板引擎