JavaScript模版引擎的基本實(shí)現(xiàn)方法淺析
模板分離了數(shù)據(jù)與展現(xiàn),使得展現(xiàn)的邏輯和效果更易維護(hù)。利用javascript的Function對象,一步步構(gòu)建一個極其簡單的模板轉(zhuǎn)化引擎
模板簡介
模板通常是指嵌入了某種動態(tài)編程語言代碼的文本,數(shù)據(jù)和模板通過某種形式的結(jié)合,可以變化出不同的結(jié)果。模板通常用來定義顯示的形式,能夠使得數(shù)據(jù)展現(xiàn)更為豐富,而且容易維護(hù)。例如,下面是一個模板的例子:
<ul> <% for(var i in items){ %> <li class='<%= items[i].status %>'><%= items[i].text %></li> <% } %> </ul>
如果有如下items數(shù)據(jù):
items:[ { text: 'text1' ,status:'done' }, { text: 'text2' ,status:'pending' }, { text: 'text3' ,status:'pending' }, { text: 'text4' ,status:'processing' } ]
通過某種方式的結(jié)合,可以產(chǎn)生下面的Html代碼:
<ul> <li class='done'>text1<li> <li class='pending'>text2<li> <li class='pending'>text3<li> <li class='processing'>text4<li> </ul>
如果不使用模板,想要達(dá)到同樣的效果,即將上面的數(shù)據(jù)展現(xiàn)成結(jié)果的樣子,需要像下面這樣做:
var temp = '<ul>'; for(var i in items){ temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>"; } temp += '</ul>';
可以看出使用模板有如下好處:
簡化了html的書寫
通過編程元素(比如循環(huán)和條件分支),對數(shù)據(jù)的展現(xiàn)更具有控制的能力
分離了數(shù)據(jù)與展現(xiàn),使得展現(xiàn)的邏輯和效果更易維護(hù)
模板引擎
通過分析模板,將數(shù)據(jù)和模板結(jié)合在一起輸出最后的結(jié)果的程序稱為模板引擎,模板有很多種,相對應(yīng)的模板引擎也有很多種。一種比較古老的模板稱為ERB,在很多的web框架中被采用,比如:ASP.NET 、 Rails … 上面的例子就是ERB的例子。在ERB中兩個核心的概念:evaluate和interpolate。表面上evaluate是指包含在<% %>中的部分,interpolate是指包含在<%= %>中的部分。從模板引擎的角度,evaluate中的部分不會直接輸出到結(jié)果中,一般用于過程控制;而interpolate中的部分將直接輸出到結(jié)果中。
從模板引擎的實(shí)現(xiàn)上看,需要依賴編程語言的動態(tài)編譯或者動態(tài)解釋的特性,以簡化實(shí)現(xiàn)和提高性能。例如:ASP.NET利用.NET的動態(tài)編譯,將模板編譯成動態(tài)的類,并利用反射動態(tài)執(zhí)行類中的代碼。這種實(shí)現(xiàn)實(shí)際上是比較復(fù)雜的,因?yàn)镃#是一門靜態(tài)的編程語言,但是使用javascript可以利用Function,以極少的代碼實(shí)現(xiàn)一個簡易的模板引擎。本文就來實(shí)現(xiàn)一個簡易的ERB模板引擎,以展現(xiàn)javascript的強(qiáng)大之處。
模板文本轉(zhuǎn)化
針對上面的例子,回顧一下使用模板和不使用模板的差別:
模板寫法:
<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>';
仔細(xì)觀察,實(shí)際上這兩種方法十分“相似”,能夠找到某種意義上的一一對應(yīng)。如果能夠?qū)⒛0宓奈谋咀兂纱a執(zhí)行,那么就能實(shí)現(xiàn)模板轉(zhuǎn)化。在轉(zhuǎn)化過程中有兩個原則:
遇到普通的文本直接當(dāng)成字符串拼接
遇到interpolate(即<%= %>),將其中的內(nèi)容當(dāng)成變量拼接在字符串中
遇到evaluate(即<% %>),直接當(dāng)成代碼
將上面的例子按照上述原則進(jìn)行變換,再添加一個總的函數(shù):
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>'; }
最后執(zhí)行這個函數(shù),傳入數(shù)據(jù)參數(shù)即可:
var result = template(items);
javascript動態(tài)函數(shù)
可見上面的轉(zhuǎn)化邏輯其實(shí)十分簡單,但是關(guān)鍵的問題是,模板是變化的,這意味著生成的程序代碼也必須是在運(yùn)行時生成并執(zhí)行的。好在javascript有許多動態(tài)特性,其中一個強(qiáng)大的特性就是Function。 我們通常使用function關(guān)鍵字在js中聲明函數(shù),很少用Function。在js中function是字面語法,js的運(yùn)行時會將字面的function轉(zhuǎn)化成Function對象,所以實(shí)際上Function提供了更為底層和靈活的機(jī)制。
用 Function 類直接創(chuàng)建函數(shù)的語法如下:
var function_name = new Function(arg1, arg2, ..., argN, function_body)
例如:
//創(chuàng)建動態(tài)函數(shù) var sayHi = new Function("sName", "sMessage", "alert(\"Hello \" + sName + sMessage);"); //執(zhí)行 sayHi('Hello','World');
函數(shù)體和參數(shù)都能夠通過字符串來創(chuàng)建!So cool!有了這個特性,可以將模板文本轉(zhuǎn)化成函數(shù)體的字符串,這樣就可以創(chuàng)建動態(tài)的函數(shù)來動態(tài)的調(diào)用了。
實(shí)現(xiàn)思路
首先利用正則式來描述interpolate和evaluate,括號用來分組捕獲:
var interpolate_reg = /<%=([\s\S]+?)%>/g; var evaluate_reg = /<%([\s\S]+?)%>/g;
為了對整個模板進(jìn)行連續(xù)的匹配將這兩個正則式合并在一起,但是注意,所有能夠匹配interpolate的字符串都能匹配evaluate,所以interpolate需要有較高的優(yōu)先級:
var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g
設(shè)計(jì)一個函數(shù)用于轉(zhuǎn)化模板,輸入?yún)?shù)為模板文本字串和數(shù)據(jù)對象
var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g //text: 傳入的模板文本字串 //data: 數(shù)據(jù)對象 var template = function(text,data){ ... }
使用replace方法,進(jìn)行正則的匹配和“替換”,實(shí)際上我們的目的不是要替換interpolate或evaluate,而是在匹配的過程中構(gòu)建出“方法體”:
var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g //text: 傳入的模板文本字串 //data: 數(shù)據(jù)對象 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){ //找到第一個匹配后,將前面部分作為普通字符串拼接的表達(dá)式 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沒有什么意義,因?yàn)殛P(guān)鍵不是替換text,而是構(gòu)建function_body return match; }); //最后的代碼應(yīng)該是返回temp function_body += "';return temp;"; }
至此,function_body雖然是個字符串,但里面的內(nèi)容實(shí)際上是一段函數(shù)代碼,可以用這個變量來動態(tài)創(chuàng)建一個函數(shù)對象,并通過data參數(shù)調(diào)用:
var render = new Function('obj', function_body); return render(data);
這樣render就是一個方法,可以調(diào)用,方法內(nèi)部的代碼由模板的內(nèi)容構(gòu)造,但是大致的框架應(yīng)該是這樣的:
function render(obj){ var temp = ''; temp += ... ... return temp; }
注意到,方法的形參是obj,所以模板內(nèi)部引用的變量應(yīng)該是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等字符,這些字符如果出現(xiàn)在代碼中,會出錯,比如下面的代碼是錯誤的:
temp += ' <ul> ' + ... ;
我們希望看到的應(yīng)該是這樣的代碼:
temp += '\n \t\t<ul>\n' + ...;
這樣需要把\n前面的\轉(zhuǎn)義成\\即可,最終變成字面的\\n。
另外,還有一個問題是,上面的代碼無法將最后一個evaluate或者interpolate后面的部分拼接進(jìn)來,解決這個問題的辦法也很簡單,只需要在正則式中添加一個行尾的匹配即可:
var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/g;
相對完整的代碼
var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/g //模板文本中的特殊字符轉(zhuǎn)義處理 var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g; var escapes = { "'": "'", '\\': '\\', '\r': 'r', '\n': 'n', '\t': 't', '\u2028': 'u2028', '\u2029': 'u2029' }; //text: 傳入的模板文本字串 //data: 數(shù)據(jù)對象 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){ //找到第一個匹配后,將前面部分作為普通字符串拼接的表達(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,跳過evaluate或者interpolate index = offset + match.length; //這里的return沒有什么意義,因?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)用代碼可以是這樣:
<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));
可見,我們只用了很少的代碼就實(shí)現(xiàn)了一個簡易的模板。
遺留的問題
還有幾個細(xì)節(jié)的問題需要注意:
- 因?yàn)?lt;%或者%>都是模板的邊界字符,如果模板需要輸出<%或者%>,那么需要設(shè)計(jì)轉(zhuǎn)義的辦法
- 如果數(shù)據(jù)對象中包含有null,顯然不希望最后輸出'null',所以需要在function_body的代碼中考慮null的情況
- 在模板中每次使用obj的形參引用數(shù)據(jù),可能不太方便,可以在function_body添加with(obj||{}){...},這樣模板中可以直接使用obj的屬性
- 可以設(shè)計(jì)將render返回出去,而不是返回轉(zhuǎn)化的結(jié)果,這樣外部可以緩存生成的函數(shù),以提高性能
相關(guān)文章
CentOS環(huán)境中MySQL修改root密碼方法
這篇文章給大家講述了如何遵循12條方法來寫出高質(zhì)量的JS代碼的經(jīng)驗(yàn),有這方便需要的朋友參考下吧。2018-01-01JavaScript 鏈?zhǔn)浇Y(jié)構(gòu)序列化詳解
這篇文章主要介紹了JavaScript 鏈?zhǔn)浇Y(jié)構(gòu)序列化詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09javascript向flash swf文件傳遞參數(shù)值注意細(xì)節(jié)
如何使用javascript向SWF文件傳遞參數(shù)?在網(wǎng)上找了一個完整的教程,很有啟發(fā)性和實(shí)用性,如下是完整實(shí)現(xiàn)的步驟,需要的朋友可以參考下2012-12-12JavaScript DOM 學(xué)習(xí)第七章 表單的擴(kuò)展
這一章我會處理一個簡單的W3C DOM腳本。他會幫助我們從一個新的角度來看待交互設(shè)計(jì)。2010-02-02