DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 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返回出去,而不是返回轉化的結果,這樣外部可以緩存生成的函數,以提高性能
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved