摘要：模板通常用來(lái)定義顯示的形式，能夠使得數(shù)據(jù)展現(xiàn)更為豐富，而且容易維護(hù)。從模板引擎的實(shí)現(xiàn)上看，需要依賴編程語(yǔ)言的動(dòng)態(tài)編譯或者動(dòng)態(tài)解釋的特性，以簡(jiǎn)化實(shí)現(xiàn)和提高性能。本文就來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)易的模板引擎，以展現(xiàn)的強(qiáng)大之處。

模板通常是指嵌入了某種動(dòng)態(tài)編程語(yǔ)言代碼的文本，數(shù)據(jù)和模板通過(guò)某種形式的結(jié)合，可以變化出不同的結(jié)果。模板通常用來(lái)定義顯示的形式，能夠使得數(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" }
]

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

    
text1

    
text2

    
text3

    
text4

如果不使用模板，想要達(dá)到同樣的效果，即將上面的數(shù)據(jù)展現(xiàn)成結(jié)果的樣子，需要像下面這樣做：

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

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

簡(jiǎn)化了html的書(shū)寫(xiě)

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

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

通過(guò)分析模板，將數(shù)據(jù)和模板結(jié)合在一起輸出最后的結(jié)果的程序稱為模板引擎，模板有很多種，相對(duì)應(yīng)的模板引擎也有很多種。一種比較古老的模板稱為ERB，在很多的web框架中被采用，比如：ASP.NET 、 Rails ... 上面的例子就是ERB的例子。在ERB中兩個(gè)核心的概念：evaluate和interpolate。表面上evaluate是指包含在<% %>中的部分，interpolate是指包含在<%= %>中的部分。從模板引擎的角度，evaluate中的部分不會(huì)直接輸出到結(jié)果中，一般用于過(guò)程控制；而interpolate中的部分將直接輸出到結(jié)果中。

從模板引擎的實(shí)現(xiàn)上看，需要依賴編程語(yǔ)言的動(dòng)態(tài)編譯或者動(dòng)態(tài)解釋的特性，以簡(jiǎn)化實(shí)現(xiàn)和提高性能。例如：ASP.NET利用.NET的動(dòng)態(tài)編譯，將模板編譯成動(dòng)態(tài)的類(lèi)，并利用反射動(dòng)態(tài)執(zhí)行類(lèi)中的代碼。這種實(shí)現(xiàn)實(shí)際上是比較復(fù)雜的，因?yàn)镃#是一門(mén)靜態(tài)的編程語(yǔ)言，但是使用javascript可以利用Function，以極少的代碼實(shí)現(xiàn)一個(gè)簡(jiǎn)易的模板引擎。本文就來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)易的ERB模板引擎，以展現(xiàn)javascript的強(qiáng)大之處。

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

模板寫(xiě)法：

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

非模板寫(xiě)法：

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)化過(guò)程中有兩個(gè)原則：

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

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

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

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

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

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

var result = template(items);

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

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

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

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

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，而是在匹配的過(guò)程中構(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，跳過(guò)evaluate或者interpolate
        index = offset + match.length;
        //這里的return沒(méi)有什么意義，因?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è)變量來(lái)動(dòng)態(tài)創(chuàng)建一個(gè)函數(shù)對(duì)象，并通過(guò)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è)必須解決的問(wèn)題。模板文本中可能包含 u2028 u2029等字符，這些字符如果出現(xiàn)在代碼中，會(huì)出錯(cuò)，比如下面的代碼是錯(cuò)誤的：

temp += "
        

    " + ... ;

我們希望看到的應(yīng)該是這樣的代碼：

temp += "
 		

" + ...;

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

另外，還有一個(gè)問(wèn)題是，上面的代碼無(wú)法將最后一個(gè)evaluate或者interpolate后面的部分拼接進(jìn)來(lái)，解決這個(gè)問(wèn)題的辦法也很簡(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，跳過(guò)evaluate或者interpolate
        index = offset + match.length;
        //這里的return沒(méi)有什么意義，因?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));

可見(jiàn)，我們只用了很少的代碼就實(shí)現(xiàn)了一個(gè)簡(jiǎn)易的模板。

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

因?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ù)，以提高性能