模板一般是指嵌入了某種動態編程語言代碼的文本,數據和模板經過某種形式的結合,能夠變化出不一樣的結果。模板一般用來定義顯示的形式,可以使得數據展示更爲豐富,並且容易維護。例如,下面是一個模板的例子:javascript
<ul> <% for(var i in items){ %> <li class='<%= items[i].status %>'><%= items[i].text %></li> <% } %> </ul>
若是有以下items
數據:html
items:[ { text: 'text1' ,status:'done' }, { text: 'text2' ,status:'pending' }, { text: 'text3' ,status:'pending' }, { text: 'text4' ,status:'processing' } ]
經過某種方式的結合,能夠產生下面的Html代碼:java
<ul> <li class='done'>text1<li> <li class='pending'>text2<li> <li class='pending'>text3<li> <li class='processing'>text4<li> </ul>
若是不使用模板,想要達到一樣的效果,即將上面的數據展示成結果的樣子,須要像下面這樣作:web
var temp = '<ul>'; for(var i in items){ temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>"; } temp += '</ul>';
能夠看出使用模板有以下好處:編程
經過分析模板,將數據和模板結合在一塊兒輸出最後的結果的程序稱爲模板引擎,模板有不少種,相對應的模板引擎也有不少種。一種比較古老的模板稱爲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有許多動態特性,其中一個強大的特性就是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
返回出去,而不是返回轉化的結果,這樣外部能夠緩存生成的函數,以提升性能