推薦五款流行的JavaScript模板引擎
摘要： Javascript 模板引擎作為數(shù)據(jù)與界面分離工作中最重要一環(huán)，受到開發(fā)者廣泛關注。本文通過開發(fā)實例解析五款流行模板引擎：Mustache、Underscore Templates、Embedded JS Templates、HandlebarsJS、Jade templating。
近日一位20歲的開發(fā)者Jack Franklin在《 The top 5 JavaScript templating engines 》一文中向開發(fā)者們推薦了5款流行的JavaScript模板引擎。下面為該文的譯文。
當你創(chuàng)建JavaScript應用時，你必然會用到JavaScript模板。當對HTML進行更新時，你可使用模板來代替庫（如jQuery），使用模板可以大大簡化你的代碼。該文將例舉當前較流行的一些模板庫。
1. Mustache
Mustache通常被稱為JavaScript模板的基礎。另一個流行的解決方案Hanldebars實際上就是基于Mustache構建而成的。這并不意味著Mustache是一個不好的模板解決方案。下面例舉一例：
[js]
Mustache.render( "Hello, {{name}}" , { name: "Jack" });
// 返回： Hello, Jack
一旦在頁面中包含了Mustache，你就可以訪問全局對象“Mustache”。你可使用其中最主要的方法“render”，它包含兩個參數(shù)。首個參數(shù)是實際的模板，第二個參數(shù)則為需要傳入的參數(shù)值。
上例中，你可以看見“{{name}}”。其中的“{{}}”實際上為Mustache的語法，表示一個占位符。當Mustache對其進行編譯時，它將在傳入的對像中尋找“name”屬性，并用該屬性的值（該例中為“Jack”）來代替“{{name}}”。
在這里，模板只為一個字符串，但如果你有一個更復雜的模板，該方法可能就不適用了。通常的解決方案是將模板放在“script”標簽中：
[js]
<script type= "text/x-mustache" id= "template" >
<p>Hello, {{name}}</p>
</script>
然后，我們可以訪問的script標簽的內(nèi)容。例如，使用jQuery，它很容易實現(xiàn)：
[js]
var temp = $( "#template" ).html();
Mustache.render(temp { name: "Jack" });
// 返回： <p>Hello, Jack</p>
給“script”一個瀏覽器無法理解的“type”屬性，瀏覽器就會忽略該Script，不將它作為JavaScript，也不會執(zhí)行它。
你也可在模板中使用循環(huán)，如下面這個模板：
[js]
{{#people}}
{{name}}
{{/people}}
傳遞數(shù)據(jù)：
[js]
{ people: [ { name: "Jack" }, { name: "Fred" } ] }
你將得到“JackFred”字符串。
Mustache還有更多的功能，點擊 這里 查看詳情。
2. Underscore Templates
Underscore提供了各種各樣的有用的方法，也提供了簡單的模板。它的語法與Mustache稍有不同。下面為一個簡單案例：
[js]
_.template( "Hello, <%= name %>" , { name: "Jack" });
// 返回：Hello, Jack
如果你曾經(jīng)使用過Embedded Ruby（縮寫為ERB），你就會對該語法更為熟悉。“<%=name%>”表示無論“name” 是什么值，都應該輸出在“<%=name%>”的位置。Underscore同樣有循環(huán)與條件語句，但與Mustache同樣稍有不同。
[js]
var template = "<% _.each(people, function(name) { %> <li><%= name %></li> <% }); %>"
_.template(template, { people: [ "Jack" , "Fred" ] } );
在Underscore模板中，你可以在“<% %>”是插入任何JavaScript。注意，“<%= %>”用于輸 出，<% %>用來包含JavaScript。這意味著你在JS中使用的任何形式的循環(huán)與條件語句同樣可以在Underscore中使用。
了解Underscore更多功能，請點擊 這里 查看。
3. Embedded JS Templates
Embedded JS （EJS） 來源于ERB模板，且與ERB有很多相似之處。它有著與ERB相同的Tag，且包含很多相同的功能。
EJS的特別之處在于，你需要把模板存于單獨文件中，并將文件名傳遞給EJS。它會加載該文件，并返回HTML。
[js]
// in template.ejs
Hello, <%= name %>
// in JS file
new EJS({ url: "template.ejs" }).render({ name: "Jack" });
// 返回： Hello, Jack
注意，你可以加載文本模板：
[js]
new EJS({ text: "Hello, <%= name %>" }).render({ name: "Jack" });
下面將介紹如何進行循環(huán)，以數(shù)組“People”為例，并在網(wǎng)站上鏈接到他們的個人頁面：
[js]
// template.ejs
<ul>
<% for ( var i = 0; i < people.length; i++) { %>
<li><%= link_to(people[i], "/profiles/" + people[i]) %></li>
<% } %>
</ul>
// in JS file
new EJS({ url: "template.ejs" }).render({ people: [ "Jack" , "Fred" ] })
// Each rendered <li> will look like:
<li><a href= "/profiles/Jack" >Jack</a></li>
這與Underscore 有些相似，但要注意“l(fā)ink_to”的使用。它是EJS定義的一個Helper，以便鏈接更容易使用。
了解更多EJS，請關注 EJS官方網(wǎng)站 。
Handlebars為最流行的模板引擎之一，構建于Mustache之上。適用于Mustache模板的功能同樣適用于Handlebars模板。同時，Handlebars還增加了很多Helper。其中之一是“With”。
[js]
// with this template:
var source = "{{#with author}} <h2>By {{firstName}} {{lastName}}</h2> {{/with}}" ;
var template = Handlebars.compile(source);
var html = template({ author: { firstName: "Jack" , lastName: "Franklin" } });
// returns: <h2>By Jack Franklin</h2>
注意，Handlebars編譯器的工作方式略有不同。首先，你把該模板傳遞給“Handlebars.compile”，它會返回一個函數(shù)。你將 包含數(shù)據(jù)的對象傳遞給該函數(shù)，該函數(shù)將返回HTML。“{#with}}”Helper取得一個對象，并允許你在其中向該對象傳遞屬性。但不是采用以下形 式：
[js]
{{ author.firstName}} {{author.lastName}}
而是下面這種形式
[js]
{{# with author}} {{firstName}} {{lastName}} {{/ with }}
這樣可以節(jié)約輸入，尤其當你十分頻繁地使用它時。
Handlebars也提供了“each”Helper：
[js]
var source = "{{#each people}} {{name}} {{/each}}" ;
var template = Handlebars.compile(source);
var html = template({ people: [{ name: "Jack" }, { name: "Fred" }] });
//返回： "JackFred"
此外，你還可以使用自己的方法來擴展Handlebars，具體方法可參與 該文檔 。
隨著Node.js的流行及大量Web應用構建于它之上，現(xiàn)在已有很多模板被設計用于服務器端。Jade模板與我們目前為止看到的大不相同，它依靠大量的縮進與空格。下面看一例：
[js]
// template.jade
p
| Hello,
= name
// JS
jade.renderFile( "template.jade" , { name: "Jack" }, function (err, result) {
console.log(result);
// logs: Hello, Jack
});
首次看到Jade可能會讓你不舒服，但你會很快適應它。在“p”下面縮進兩個字符，表明這兩個字符存在于“p”內(nèi)。“|”用來告知Jade，該行是需要輸出的純文本；“=”用來告知Jade尋找一個名為“name”的變量。
我們同樣可以在Jade中使用循環(huán)：
[js]
each person in people
li=person
調(diào)出存儲名字的數(shù)組：{ people: [ "Jack", "Fred" ]}，它將輸出：
[html]
< li > Jack </ li > < li > Fred </ li >
Jade具有很多其他模板所不具有的功能。它也可以做諸如輸出Script標簽此類的事：
[js]
script(type= "text/javascript" , src= "myfile.js" )
更多文章、技術交流、商務合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
