javascript模版引擎的基本實(shí)現(xiàn)方法淺析_基礎(chǔ)知識(shí)

《javascript模版引擎的基本實(shí)現(xiàn)方法淺析_基礎(chǔ)知識(shí)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、JavaScript模版引擎的基本實(shí)現(xiàn)方法淺析模板分離了數(shù)據(jù)與展現(xiàn)，使得展現(xiàn)的邏輯和效果更易維護(hù)。利用javascript的Function對(duì)彖，一步步構(gòu)建一個(gè)極其簡(jiǎn)單的模板轉(zhuǎn)化引擎模板簡(jiǎn)介模板通常是指嵌入了某種動(dòng)態(tài)編程語(yǔ)言代碼的文本，數(shù)據(jù)和模板通過(guò)某種形式的結(jié)合，可以變化出不同的結(jié)果。模板通常用來(lái)定義顯示的形式，能夠使得數(shù)據(jù)展現(xiàn)更為豐富，而且容易維護(hù)。例如，下面是一個(gè)模板的例子：

<%for(variinitems){%>'X%二items[i].text%><%}%>

2、{text:'tcxt2'{text:'text3'{text:'text4'如果有如下items數(shù)據(jù)：,status:'done，},,status/pending'},,status:'pending，},,status:,processing，}通過(guò)某種方式的結(jié)合，可以產(chǎn)生下面的Htrnl代碼:

textl
• <1iclass二'pending'>text2
• text3
• tcxt4〈li>

3、果的樣子，需要像下面這樣做：vartemp='

J;for(variinitems){temp+=〃〈liclass二'"+items[i]?status+〃‘>〃+items[i]?text+}temp+二'〈/ul>';可以看出使用模板有如下好處：簡(jiǎn)化了html的書寫通過(guò)編程元素(比如循環(huán)和條件分支)，對(duì)數(shù)據(jù)的展現(xiàn)更具冇控制的能力分離了數(shù)據(jù)與展現(xiàn)，使得展現(xiàn)的邏輯和效果更易維護(hù)模板引擎通過(guò)分析模板，將數(shù)據(jù)和模板結(jié)合在一起輸出最后的結(jié)果的程序稱為模板引擎，模板有很多種，相對(duì)應(yīng)的模板引擎也有很多種。一種比較占老的模板稱為ERB,在很多的web框架中被釆用,比如：ASP.NET、Rails-

4、上面的例子就是ERB的例子。在ERB中兩個(gè)核心的概念:evaluate和interpolate。表面上evaluate是指包含在〈%%>中的部分,interpolate是指包含在〈%二%>中的部分。從模板引擎的角度，evaluate中的部分不會(huì)直接輸出到結(jié)果中，一?般用于過(guò)程控制；而interpolate中的部分將直接輸出到結(jié)果中。從模板引擎的實(shí)現(xiàn)上看，需要依賴編程語(yǔ)言的動(dòng)態(tài)編譯或者動(dòng)態(tài)解釋的特性，以簡(jiǎn)化實(shí)現(xiàn)和提高性能。例如：ASP.NET利用.NET的動(dòng)態(tài)編譯，將模板編譯成動(dòng)態(tài)的類，并利用反射動(dòng)態(tài)執(zhí)行類屮的代碼。這種實(shí)現(xiàn)實(shí)際上是比較復(fù)雜的，因?yàn)镃#是一門靜態(tài)的編程語(yǔ)言，但是使用javascr

5、ipt口J以利用Function,以極少的代碼實(shí)現(xiàn)一個(gè)簡(jiǎn)易的模板引擎。本文就來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)易的ERB模板引擎，以展現(xiàn)javascript的強(qiáng)大Z處。模板文木轉(zhuǎn)化針對(duì)上面的例子，回顧一下使用模板和不使用模板的差別：模板寫法：

<%for(variinitems){%>'X%二items[i].text%><%}%>
非模板寫法：vartemp二'
，;for(variinitems){temp+二"〈liclass二'"+itemsEi].status+〃‘〉〃+itcms[i]?text+仔細(xì)觀察，實(shí)際上這

6、兩種方法十分“相似”，能夠找到某種意義上的一一對(duì)應(yīng)。如果能夠?qū)⒛０宓奈哪咀兂纱a執(zhí)行，那么就能實(shí)現(xiàn)模板轉(zhuǎn)化。在轉(zhuǎn)化過(guò)程中有兩個(gè)原則：遇到普通的文本直接當(dāng)成字符串拼接遇到interpolate(即〈%二%?,將其中的內(nèi)容當(dāng)成變量拼接在字符吊中遇到evaluate(B

7、J<%%?,直接當(dāng)成代碼將上面的例子按照上述原則進(jìn)行變換，再添加一個(gè)總的函數(shù)：vartemplate二function(items){vartemp二''；〃開(kāi)始變換temp+='

，;for(variinitems){temp+二Z/<1iclass二'"+itemsEi].status+〃‘>〃+items[i]?text

8、+}temp+二'〈/ul>';最后執(zhí)行這個(gè)函數(shù)，傳入數(shù)據(jù)參數(shù)即可:varresult=template(items);javascript動(dòng)態(tài)函數(shù)可見(jiàn)上面的轉(zhuǎn)化邏輯其實(shí)十分簡(jiǎn)單，但是關(guān)鍵的問(wèn)題是，模板是變化的，這意味著生成的程序代碼也必須是在運(yùn)行吋生成并執(zhí)行的。好在javascript有許多動(dòng)態(tài)特性，其中一個(gè)強(qiáng)大的特性就是Functiono我們通常使用function關(guān)鍵字在js中聲明函數(shù)，很少