摘要：模板通常用來定義顯示的形式，能夠使得數據展現更為豐富，而且容易維護。從模板引擎的實現上看，需要依賴編程語言的動態編譯或者動態解釋的特性，以簡化實現和提高性能。本文就來實現一個簡易的模板引擎，以展現的強大之處。

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

    <% 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

如果不使用模板，想要達到同樣的效果，即將上面的數據展現成結果的樣子，需要像下面這樣做：

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，以極少的代碼實現一個簡易的模板引擎。本文就來實現一個簡易的ERB模板引擎，以展現javascript的強大之處。

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

模板寫法：

    <% 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 += "
        

    " + ... ;

我們希望看到的應該是這樣的代碼：

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返回出去，而不是返回轉化的結果，這樣外部可以緩存生成的函數，以提高性能