JavaScript模板引擎綜述

咱們將經過本文對JavaScript的模板有一個大體瞭解。在詳細瞭解時下比較流行的幾個模板引擎以前，我會先介紹一下什麼是JavaScript模板以及該什麼時候使用和怎麼使用這些模板。我會着重講一下Mustache,Handlebars和jQuery模板。

什麼是JavaScript模板？

JavaScript模板是將HTML結構與其具體內容相分離的一種手段。模板系統一般會引入一些新的語法，不過這些語法使用起來十分方便，尤爲是在別處使用過模板系統的狀況下（eg.PHP的Twig）。可是須要留意一個有趣的地方：token的替換一般是以雙括號爲標識（{{...}}），Mustanche和Handlebars的名字就是由於這而來的（把它倆放一塊比較一下吧）。

咱們應該在何時使用JavaScript模板？

一旦發現HTML被放到了JavaScript文本中，咱們就應該考慮一下JavaScript模板是否是會帶來什麼益處。構建可維護代碼庫時，最重要的一件事就是關注點分離（注：SOC)，因此任何對此有用的方法都應該被探索。在前端開發領域，將HTML與JavaScript分離是SOC的主要部分。（一樣咱們也不該該將JavaScript代碼放到HTML中）。

須要常用相同格式顯示不一樣內容的real-time web app（好比新聞直播）或者國際化（i18n)產品是從JavaScrippt模板受益的廣泛狀況。

咱們如何使用JavaScript模板？

在這裏我會經過一些具體的庫來詳細說明，可是本質上來說，包括咱們的庫在內的模板都很簡單。給這些模板添加一些數據試試。

mustache.js

Mustache是一個多語言，無邏輯的模板系統。Mustache.js只是其中一種，因此只要學會了它的語法（至關簡單），就能在許多別的編程語言中一樣使用。

要點：

• 9Kb體積（小）
• 簡單
• 無依賴
• 無邏輯
• 無預編譯模板
• 與編程語言無關

例：

1. <script id="template" type="x-tmpl-mustache">
2. <p>Use the <strong>{{power}}</strong>, {{name}}!</p>
3. </script>

 

 

1. //Grab the inline template
2. var template = document.getElementById('template').innerHTML;
3.  
4. //Parse it (optional, only necessary if template is to be used again)
5. Mustache.parse(template);
6.  
7. //Render the data into the template
8. var rendered = Mustache.render(template, {name: "Luke", power: "force"});
9.  
10. //Overwrite the contents of #target with the rendered HTML
11. document.getElementById('target').innerHTML = rendered;

 

 demo

從例子中能夠看到，Mustache.render函數接收兩個參數：Mustache模板，一個包含數據和須要在模板中使用的代碼的view對象。在本例中，咱們使用一些簡單字符代替name和power變量，不過它的功能不止這些。好比：遍歷一個數組，或者讓一個使用當前view做爲view參數的特殊渲染函數生效。

mustache.js適合較小的工程和不須要太多模板的快速原型。值得注意的一點是：咱們可使用mustache.js開始一個項目，後面再輕鬆升級爲Handblebars.js。覺得這些模板大部分同樣。

Handlebars.js

handlebars.js是在Mustache的基礎上編寫的，所以能夠兼容大部分Mustache模板。簡而言之，它提供了Mustache所提供的一切，同時增長了對塊表達式和預編譯模板的支持。預編譯模板是一件十分了不得的事，由於它大幅度提高了性能。（在一個極限性能測試中，預編譯模板的渲染時間只有Mustache模板的一半）。塊表達式容許你在模板中添加邏輯；最多見的例子是高級迭代-好比建立一個每一個條目都用<li>包裝的<ul>列表迭代器。你能夠在這裏獲取關於塊表達式的更多內容。

要點：

• 86kb體積（大），使用預編譯模板爲18kb
• 塊表達式（輔助）
• 預編譯模板
• 非獨立

例：

1. <script id="template" type="text/x-handlebars-template">
2. <p>Use the <strong>{{power}}</strong>, {{name}}!</p>
3. </script>

 

 

1. //Grab the inline template
2. var template = document.getElementById('template').innerHTML;
3.  
4. //Compile the template
5. var compiled_template = Handlebars.compile(template);
6.  
7. //Render the data into the template
8. var rendered = compiled_template({name: "Luke", power: "force"});
9.  
10. //Overwrite the contents of #target with the renderer HTML
11. document.getElementById('target').innerHTML = rendered;

 

 又到了點我看demo環節

Handlebars.js適合不須要擔憂頁面增長額外18kb內容同時性能又十分重要的項目。同時這也是須要塊表達式時的解決方案。

注意，若是想體驗Handlebars.js在性能上的優點，咱們必須使用預編譯模板（這一樣大大 減小了文件體積）。爲了高效的實現目的，咱們須要在工程中添加Handlebars,js的模板編輯附件（Grunt has a great plug-in for this)。

若是想更加深刻的瞭解Handlebars,看這裏：A Beginner's Guide to Handlebars。

jQuery 模板

jQuery模板就沒有Mustache.js和Handlebars.js這麼受歡迎了。可是咱們也應該看看（我以爲不看也行）。這個模板和Mustache模板有些不一樣，由於它只是一些普通的HTML，沒有什麼新的語法。不一樣於token的替換，它使用data屬性來指明在HTML骨架中須要插入數據的地方。

要點：

• 7kb體積（小）
• 依賴jQuery（+82kb)
• 簡單，可是和Mustache以及Handlebars.js的工做原理都不同
• 無預編譯模板

例：

1. <script id="template" type="text/html">
2. <p>
3. Use the <strong data-content="power"></strong>,
4. <span data-content="name"></span>!
5. </p>
6. </script>

 

 

1. //Call .loadTemplate() on the target container
2. $('#target').loadTemplate(
3. //Specify the template container (or file name of external template)
4. $('#template'),
5.  
6. //Specify the data to render
7. {
8. name: "Luke",
9. power: "force"
10. }
11. );

 

 又到了我最不喜歡的環節（點我看demo)

jQuery模板是爲已經使用jQuery的項目提出的，由於它的文件很小。不過若是你的項目裏沒用jQuery，天哪，那你就得好好考慮一下總的體積是多大了。

其它選擇

此問題固然還有許多別的文中沒法一一明述的解決方案。咱們就草草的提一筆好了：

Underscore.js

Underscore是一個流行的JavaScript庫，模板功能只是它衆多功能的一個。不一樣於Mustache使用雙花括號，它默認使用的是ERB-style的分隔符（< %…% >）。

Embedded JS Teamplates（EJS）

像Underscore.js，Embedded JS Templates使用ERB-style模板語法。EJS須要注意的一件事情是，必須是外部文件——他們不能有內聯模板。

 結束語

那麼哪個是最好的呢？和許多開發問題同樣，沒有好主意。答案取決於不少方面：

• 你是否已在項目中使用了jQuery
• 你之前使用過什麼模板系統
• 你是否想把模板與邏輯分離
• 你有多擔憂文件整體積
• 你有多擔憂性能問題/你的網站須要支持低性能設備嗎？

一旦這些問題有了答案，那麼咱們就能夠在上面的列表中作一個選擇。但前面提到過，一個靈活的策略是先使用Mustache.js而後在功能或性能有要求的時候升級爲Handlebars.js。

原文連接：http://www.gbtags.com/gb/share/9662.htm