推薦五款流行的JavaScript模板引擎

摘要：        Javascript 模板引擎作為數據與界面分離工作中最重要一環，受到開發者廣泛關注。本文通過開發實例解析五款流行模板引擎：Mustache、Underscore Templates、Embedded JS Templates、HandlebarsJS、Jade templating。

 近日一位20歲的開發者Jack Franklin在《          The top 5 JavaScript templating engines            》一文中向開發者們推薦了5款流行的JavaScript模板引擎。下面為該文的譯文。
 

當你創建JavaScript應用時，你必然會用到JavaScript模板。當對HTML進行更新時，你可使用模板來代替庫（如jQuery），使用模板可以大大簡化你的代碼。該文將例舉當前較流行的一些模板庫。      

 1.          Mustache            

Mustache通常被稱為JavaScript模板的基礎。另一個流行的解決方案Hanldebars實際上就是基于Mustache構建而成的。這并不意味著Mustache是一個不好的模板解決方案。下面例舉一例：

[js]   

1.  Mustache.render(  "Hello, {{name}}"  , { name:   "Jack"   });  

2.  // 返回： Hello, Jack    

一旦在頁面中包含了Mustache，你就可以訪問全局對象“Mustache”。你可使用其中最主要的方法“render”，它包含兩個參數。首個參數是實際的模板，第二個參數則為需要傳入的參數值。

上例中，你可以看見“{{name}}”。其中的“{{}}”實際上為Mustache的語法，表示一個占位符。當Mustache對其進行編譯時，它將在傳入的對像中尋找“name”屬性，并用該屬性的值（該例中為“Jack”）來代替“{{name}}”。

在這里，模板只為一個字符串，但如果你有一個更復雜的模板，該方法可能就不適用了。通常的解決方案是將模板放在“script”標簽中：

[js]    

1.  <script type=  "text/x-mustache"   id=  "template"  >  

2.     <p>Hello, {{name}}</p>            

3.   </script>            

然后，我們可以訪問的script標簽的內容。例如，使用jQuery，它很容易實現：

[js]       

1.  var   temp = $(  "#template"  ).html();  

2. Mustache.render(temp { name:   "Jack"   });  

3.  // 返回： <p>Hello, Jack</p>    

給“script”一個瀏覽器無法理解的“type”屬性，瀏覽器就會忽略該Script，不將它作為JavaScript，也不會執行它。

你也可在模板中使用循環，如下面這個模板：

[js]   

1.  {{#people}}  

2.   {{name}}            

3. {{/people}}            

傳遞數據：

[js]       

1.  { people: [ { name:   "Jack"   }, { name:   "Fred"   } ] }  

你將得到“JackFred”字符串。

Mustache還有更多的功能，點擊      這里        查看詳情。

2.  Underscore Templates  

Underscore提供了各種各樣的有用的方法，也提供了簡單的模板。它的語法與Mustache稍有不同。下面為一個簡單案例：

[js] 

1.  _.template(  "Hello, <%= name %>"  , { name:   "Jack"   });  

2.    // 返回：Hello, Jack    

如果你曾經使用過Embedded Ruby（縮寫為ERB），你就會對該語法更為熟悉。“<%=name%>”表示無論“name” 是什么值，都應該輸出在“<%=name%>”的位置。Underscore同樣有循環與條件語句，但與Mustache同樣稍有不同。

[js]

1.  var   template =   "<% _.each(people, function(name) { %> <li><%=   name %></li> <% }); %>"    

2. _.template(template, { people: [  "Jack"  ,   "Fred"  ] } );  

在Underscore模板中，你可以在“<% %>”是插入任何JavaScript。注意，“<%= %>”用于輸 出，<% %>用來包含JavaScript。這意味著你在JS中使用的任何形式的循環與條件語句同樣可以在Underscore中使用。

了解Underscore更多功能，請點擊      這里        查看。

3.  Embedded JS Templates  

Embedded JS        （EJS） 來源于ERB模板，且與ERB有很多相似之處。它有著與ERB相同的Tag，且包含很多相同的功能。

EJS的特別之處在于，你需要把模板存于單獨文件中，并將文件名傳遞給EJS。它會加載該文件，并返回HTML。

[js] 

1.  // in template.ejs    

2.   Hello, <%= name %>            

4.  // in JS file    

5.     new   EJS({ url:   "template.ejs"   }).render({ name:   "Jack"   });  

6.  // 返回： Hello, Jack    

注意，你可以加載文本模板：

[js]  

1.  new   EJS({ text:   "Hello, <%= name %>"   }).render({ name:   "Jack"   });  

下面將介紹如何進行循環，以數組“People”為例，并在網站上鏈接到他們的個人頁面：

[js]

1.  // template.ejs    

2.   <ul>            

3.     <%   for  (  var   i = 0; i < people.length; i++) { %>  

4.       <li><%= link_to(people[i],   "/profiles/"   + people[i]) %></li>  

5.     <% } %>            

6.   </ul>            

8.  // in JS file    

9.  new   EJS({ url:   "template.ejs"   }).render({ people: [   "Jack"  ,   "Fred"   ] })  

11.  // Each rendered <li> will look like:    

12. <li><a href=  "/profiles/Jack"  >Jack</a></li>  

這與Underscore 有些相似，但要注意“link_to”的使用。它是EJS定義的一個Helper，以便鏈接更容易使用。

了解更多EJS，請關注      EJS官方網站        。

4.  HandlebarsJS   

Handlebars為最流行的模板引擎之一，構建于Mustache之上。適用于Mustache模板的功能同樣適用于Handlebars模板。同時，Handlebars還增加了很多Helper。其中之一是“With”。

[js] 

1.  // with this template:    

2.     var   source =   "{{#with author}} <h2>By {{firstName}} {{lastName}}</h2> {{/with}}"  ;  

3.     var   template = Handlebars.compile(source);  

4.     var   html = template({ author: { firstName:   "Jack"  , lastName:   "Franklin"   } });  

5.  // returns: <h2>By Jack Franklin</h2>    

注意，Handlebars編譯器的工作方式略有不同。首先，你把該模板傳遞給“Handlebars.compile”，它會返回一個函數。你將 包含數據的對象傳遞給該函數，該函數將返回HTML。“{#with}}”Helper取得一個對象，并允許你在其中向該對象傳遞屬性。但不是采用以下形 式：

[js] 

1.  {{ author.firstName}} {{author.lastName}}  

而是下面這種形式

[js]  

1.  {{#  with   author}} {{firstName}} {{lastName}} {{/  with  }}  

這樣可以節約輸入，尤其當你十分頻繁地使用它時。

Handlebars也提供了“each”Helper： 

[js]

1.  var   source =   "{{#each people}} {{name}} {{/each}}"  ;  

2.     var   template = Handlebars.compile(source);  

3.     var   html = template({ people: [{ name:   "Jack"   }, { name:   "Fred"   }] });  

4.     //返回： "JackFred"    

此外，你還可以使用自己的方法來擴展Handlebars，具體方法可參與      該文檔        。

5.  Jade templating  

隨著Node.js的流行及大量Web應用構建于它之上，現在已有很多模板被設計用于服務器端。Jade模板與我們目前為止看到的大不相同，它依靠大量的縮進與空格。下面看一例：

[js] 

1.  // template.jade    

2.   p            

3.     | Hello,            

4.     = name            

6.  // JS    

7.   jade.renderFile(  "template.jade"  , { name:   "Jack"   },   function  (err, result) {  

8.     console.log(result);            

9.       // logs: Hello, Jack    

10.   });            

首次看到Jade可能會讓你不舒服，但你會很快適應它。在“p”下面縮進兩個字符，表明這兩個字符存在于“p”內。“|”用來告知Jade，該行是需要輸出的純文本；“=”用來告知Jade尋找一個名為“name”的變量。      

我們同樣可以在Jade中使用循環：

[js]

1.  each person   in   people  

2.     li=person            

調出存儲名字的數組：{ people: [ "Jack", "Fred" ]}，它將輸出：      

[html]

1.  <  li  >  Jack  </  li  >  <  li  >  Fred  </  li  >    

Jade具有很多其他模板所不具有的功能。它也可以做諸如輸出Script標簽此類的事：

[js] 

1.  script(type=  "text/javascript"  , src=  "myfile.js"  )          

更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義

喜歡作者