摘要：第三部分介紹一種模板引擎，之所以介紹他是因為。。。。三簡介模板引擎是數據與界面分離工作中最重要一環。是新一代模板引擎，它采用預編譯方式讓性能有了質的飛躍，并且充分利用引擎特性，使得其性能無論在前端還是后端都有極其出色的表現。

嗯，這也是一個學習筆記，材料均來自網絡，有改動。。
文章主要分為三部分，第一部分通過實現一個簡易的ERB模板引擎來介紹其原理，參考javascript模板引擎和實現原理，有改動，看了很多關于模板引擎的文章，就這一篇最通俗易懂，適合入門。第二部分介紹一個非常NB的模板引擎，參考JavaScript template engine in just 20 lines，超級簡潔，僅20行，適合進階。第三部分介紹一種js模板引擎——art Template，之所以介紹他是因為。。。。你猜。

模板通常是指嵌入了某種動態編程語言代碼的文本，數據和模板通過某種形式的結合，可以變化出不同的結果。模板通常用來定義顯示的形式，能夠使得數據展現更為豐富，而且容易維護。例如，下面是一個模板的例子：

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

如果有如下items數據：

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

通過某種方式的結合，可以產生下面的Html代碼：

    
text1

    
text2

    
text3

    
text4

如果不使用模板，想要達到同樣的效果，即將上面的數據展現成結果的樣子，需要像下面這樣將html標簽拼接成字符串：

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

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

簡化了html的書寫

通過編程元素（比如循環和條件分支），對數據的展現更具有控制的能力

分離了數據與展現，使得展現的邏輯和效果更易維護

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

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

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

非模板寫法：

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

仔細觀察，實際上這兩種方法十分“相似”，能夠找到某種意義上的一一對應。如果能夠將模板的文本變成代碼執行，那么就能實現模板轉化。在轉化過程中有兩個原則：

遇到普通的文本直接當成字符串拼接

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

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

將上面的例子按照上述原則進行變換，再添加一個總的函數：

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

最后執行這個函數，傳入數據參數即可：

var result = template(items);

可見上面的轉化邏輯其實十分簡單，但是關鍵的問題是，模板是變化的，這意味著生成的程序代碼也必須是在運行時生成并執行的。好在javascript有許多動態特性，其中一個強大的特性就是Function。
我們通常使用function關鍵字在js中聲明函數，很少用Function。在js中function是字面語法，js的運行時會將字面的function轉化成Function對象，所以實際上Function提供了更為底層和靈活的機制。

用 Function 類直接創建函數的語法如下：

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

例如：

//創建動態函數    
var sayHi = new Function("sName", "sMessage", "alert("Hello " + sName + sMessage);");
//執行    
sayHi("Hello","World");

函數體和參數都能夠通過字符串來創建！So cool！有了這個特性，可以將模板文本轉化成函數體的字符串，這樣就可以創建動態的函數來動態的調用了。

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

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

為了對整個模板進行連續的匹配將這兩個正則式合并在一起，但是注意，所有能夠匹配interpolate的字符串都能匹配evaluate，所以interpolate需要有較高的優先級：

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

設計一個函數用于轉化模板，輸入參數為模板文本字串和數據對象

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

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

var matcher = /<%=([sS]+?)%>|<%([sS]+?)%>/g
//text: 傳入的模板文本字串
//data: 數據對象
var template = function(text,data){
    var index = 0;//記錄當前掃描到哪里了
    var function_body = "var temp = "";";
    function_body += "temp += "";
    text.replace(matcher,function(match,interpolate,evaluate,offset){
        //找到第一個匹配后，將前面部分作為普通字符串拼接的表達式
        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沒有什么意義，因為關鍵不是替換text，而是構建function_body
        return match;
    });
    //最后的代碼應該是返回temp
    function_body += "";return temp;";
}

至此，function_body雖然是個字符串，但里面的內容實際上是一段函數代碼，可以用這個變量來動態創建一個函數對象，并通過data參數調用：

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

這樣render就是一個方法，可以調用，方法內部的代碼由模板的內容構造，但是大致的框架應該是這樣的：

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

注意到，方法的形參是obj，所以模板內部引用的變量應該是obj：

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

temp += "
        

    " + ... ;

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

temp += "
 		

" + ...;

這樣需要把 前面的轉義成即可，最終變成字面的 。

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

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

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

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

//text: 傳入的模板文本字串
//data: 數據對象
var template = function(text,data){
    var index = 0;//記錄當前掃描到哪里了
    var function_body = "var temp = "";";
    function_body += "temp += "";
    text.replace(matcher,function(match,interpolate,evaluate,offset){
        //找到第一個匹配后，將前面部分作為普通字符串拼接的表達式
        //添加了處理轉義字符
        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沒有什么意義，因為關鍵不是替換text，而是構建function_body
        return match;
    });
    //最后的代碼應該是返回temp
    function_body += "";return temp;";
    var render = new Function("obj", function_body);
    return render(data);
}

調用代碼可以是這樣：

...

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));

還有幾個細節的問題需要注意：

因為<%或者%>都是模板的邊界字符，如果模板需要輸出<%或者%>，那么需要設計轉義的辦法

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

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

可以設計將render返回出去，而不是返回轉化的結果，這樣外部可以緩存生成的函數，以提高性能

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

該正則表達式用于獲取模板中的標識字段<%...%>,然后用傳入引擎中的數據去填充它們.

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

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

如果你看不懂上述正則表達式，請參考這里 js正則表達式語法

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.普通文本字符串，比如標簽元素ul等
2.js流程控制語句，比如if, for, else等等，對應ERB模板中的interpolate
3.變量，需要用輸入的數據替換的部分，對應ERB模板中的evaluate

注意：有的將模板分為兩部分，js代碼（對應2）和文本（對應1、3）

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

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

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

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

注意：push到數組中的內容需要被""包圍的，因此如果普通文本中包含有"，需要轉譯為"

2.對于流程控制語句和變量，他們都是被標識符號<%%>包圍的部分，對應的js去true，將執行

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

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

另外：注意add函數最后又返回了自身，類似于js中的鏈式操作。

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

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

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

利用apply設置Function函數作用域，在函數內部，this指向options,可以利用this.attr訪問options.attr。

javascript模板引擎是數據與界面分離工作中最重要一環。雖然每個引擎從模板語法、語法解析、變量賦值、字符串拼接的實現方式各有所不同，但關鍵的渲染原理仍然是動態執行 javascript 字符串。

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

在一般的模板引擎實現原理中，因為要對模板變量進行賦值，所以每次渲染都需要動態編譯 javascript 字符串完成變量賦值。而 artTemplate 的編譯賦值過程卻是在渲染之前完成的，這種方式稱之為“預編譯”。

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

引用js文件：

頁面中，使用一個type="text/template"的script標簽存放模板：

模板邏輯語法開始與結束的界定符號為<% 與 %>，若<%后面緊跟=號則輸出變量內容。同ERB模板

3.渲染模板

template.render(id, data);

繼續上面的例子：

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

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