模板分離了資料與展現,使得展現的邏輯與效果更容易維護。利用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));
可见,我们只用了很少的代码就实现了一个简易的模板。
遗留的问题
还有几个细节的问题需要注意: