JavaScript模版引擎的基本實現方法淺析，javascript模版

JavaScript模版引擎的基本實現方法淺析，javascript模版

模板分離了資料與展現，使得展現的邏輯和效果更易維護。利用javascript的Function對象，一步步構建一個極其簡單的模板轉化引擎

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

<ul> <% for(var i in items){ %> <li class='<%= items[i].status %>'><%= items[i].text %></li> <% } %></ul>

如果有如下items資料：

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

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

<ul> <li class='done'>text1<li> <li class='pending'>text2<li> <li class='pending'>text3<li> <li class='processing'>text4<li></ul>

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

var temp = '<ul>';for(var i in items){ temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";}temp += '</ul>';

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

簡化了html的書寫
通過編程元素（比如迴圈和條件分支），對資料的展現更具有控制的能力
分離了資料與展現，使得展現的邏輯和效果更易維護
模板引擎
通過分析模板，將資料和模板結合在一起輸出最後的結果的程式稱為模板引擎，模板有很多種，相對應的模板引擎也有很多種。一種比較古老的模板稱為ERB，在很多的web架構中被採用，比如：ASP.NET 、 Rails … 上面的例子就是ERB的例子。在ERB中兩個核心的概念：evaluate和interpolate。表面上evaluate是指包含在<% %>中的部分，interpolate是指包含在<%= %>中的部分。從模板引擎的角度，evaluate中的部分不會直接輸出到結果中，一般用於過程式控制制；而interpolate中的部分將直接輸出到結果中。

從模板引擎的實現上看，需要依賴程式設計語言的動態編譯或者動態解釋的特性，以簡化實現和提高效能。例如：ASP.NET利用.NET的動態編譯，將模板編譯成動態類，並利用反射動態執行類中的代碼。這種實現實際上是比較複雜的，因為C#是一門靜態程式設計語言，但是使用javascript可以利用Function，以極少的代碼實現一個簡易的模板引擎。本文就來實現一個簡易的ERB模板引擎，以展現javascript的強大之處。

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

模板寫法：

<ul> <% for(var i in items){ %> <li class='<%= items[i].status %>'><%= items[i].text %></li> <% } %></ul>

非模板寫法：

var temp = '<ul>';for(var i in items){ temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";}temp += '</ul>';

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

遇到普通的文本直接當成字串拼接
遇到interpolate(即<%= %>)，將其中的內容當成變數拼接在字串中
遇到evaluate(即<% %>)，直接當成代碼
將上面的例子按照上述原則進行變換，再添加一個總的函數：

var template = function(items){ var temp = ''; //開始變換 temp += '<ul>'; for(var i in items){ temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>"; } temp += '</ul>';}

最後執行這個函數，傳入資料參數即可：

var result = template(items);

javascript動態函數
可見上面的轉化邏輯其實十分簡單，但是關鍵的問題是，模板是變化的，這意味著產生的程式碼也必須是在運行時產生並執行的。好在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 = /<%=([\s\S]+?)%>/g;var evaluate_reg = /<%([\s\S]+?)%>/g;

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

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g

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

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

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

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/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：

<script id='template' type='javascript/template'> <ul> <% for(var i in obj){ %>  <li class="<%= obj[i].status %>"><%= obj[i].text %></li> <% } %> </ul></script>

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

temp += ' <ul> ' + ... ;

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

temp += '\n \t\t<ul>\n' + ...;

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

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

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

相對完整的代碼

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/g//模板文本中的特殊字元轉義處理var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;var escapes = {  "'":   "'",  '\\':   '\\',  '\r':   'r',  '\n':   'n',  '\t':   '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);}

調用代碼可以是這樣：

<script id='template' type='javascript/template'> <ul> <% for(var i in obj){ %>  <li class="<%= obj[i].status %>"><%= obj[i].text %></li> <% } %> </ul></script>...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返回出去，而不是返迴轉化的結果，這樣外部可以緩衝產生的函數，以提高效能

您可能感興趣的文章:

• 探究Javascript模板引擎mustache.js使用方法
• 詳解Javascript模板引擎mustache.js
• JavaScript模板引擎用法執行個體
• 教你使用javascript簡單寫一個頁面模板引擎
• node.js 使用ejs模板引擎時尾碼換成.html
• 常用的JavaScript模板引擎介紹
• 淺談輕量級js模板引擎simplite
• 高效能JavaScript模板引擎實現原理詳解
• laytpl 精緻巧妙的JavaScript模板引擎
• PHP針對常規模板引擎中與CSS/JSON衝突的解決方案
• javascript輕量級模板引擎juicer使用指南