在這篇文章中我們將對 JavaScript 模板進行概述。我們將首先討論 JavaScript 模板是什麼，何時使用它們，如何使用它們，在深入更多細節前，看看一些流行的模板引擎。我們將關注 Mustache， Handlebars 和 jQuery Template。
什麼是JavaScript模板
JavaScript 模板是將 HTML 結構從包含它們的內容中分離的方法。模板系統通常會引入一些新語法，但通常是非常簡單的，特別是如果我們以前已經在其他地方使用過模板系統(如 PHP 中的 Twig )。一個要注意的有趣的點是，替換標記通常是由雙花括號({ {……} })表示，這也是 Mustache 和 Handlebars 名字的來源（提示：從側面看它們的相似之處）。
什麼時候使用JavaScript模板？
一旦我們發現自己在 JavaScript 字串內包含 HTML，就應該開始考慮 JavaScript 模板可能給我們帶來的好處。當建立一個可維護的程式碼庫，關注點分離是至關重要的，所以任何可以幫助我們實現這一目標的手段都應該探索。在前端 web 開發，將 HTML 從 JavaScript 分離顯得很重要（這是雙向的，我們也不應該在 HTML 中內聯 JavaScript）。
一些可以受益於 JavaScript 模板的常見場景是實時 web 應用程式（例如一個事件評論的直播應用），或國際化（i18n），它們通常要求使用相同的格式顯示不同的內容。
如何使用 JavaScript 模板？
我們將通過特別的庫案例詳細介紹它，但本質上這和包含我們選擇的庫一樣簡單，即獲取模板和使用一些資料渲染它。
大多數庫支援內聯和外部模板。內聯模板在只有很少模板時非常適合，或者當每個載入的頁面都需要使用模板，但是通常我們的模板應該是外部模板。外部模板帶來很多好處，主要是模板永遠不會被下載到客戶端，除非它們被頁面所需。
mustache.js
Mustache 是一個多語言，邏輯簡單的模板系統。mustache.js 只是其中一個實現。一旦我們習慣了（非常簡單的）語法，就可以在各種各樣的程式語言中使用它。
關鍵點
- 檔案9kb大小（很小）
- 簡單
- 無依賴
- 無邏輯
- 非預編譯模板
- 程式語言無關
舉例
|
1 2 3 |
<script id="template" type="x-tmpl-mustache"> <p>Use the <strong>{{power}}</strong>, {{name}}!</p> </script> |
|
1 2 3 4 5 6 7 8 9 10 11 |
//Grab the inline template var template = document.getElementById('template').innerHTML; //Parse it (optional, only necessary if template is to be used again) Mustache.parse(template); //Render the data into the template var rendered = Mustache.render(template, {name: "Luke", power: "force"}); //Overwrite the contents of #target with the rendered HTML document.getElementById('target').innerHTML = rendered; |
正如你在這個例子中所看到的，Mustache.render 函式接受兩個引數：Mustache 模板，以及一個包含所需的資料和程式碼的檢視物件，它用於渲染模板。在這個案列下，我們使用簡單的字串替換name和power變數，但它可以做得更多。例如 迴圈遍歷一個陣列，或者使用 特別的渲染函式，使用當前檢視作為其檢視引數。
mustache.js 非常適合小型專案和模板複雜性較小的快速原型。需要關鍵注意的是，我們可以在一個專案開始時使用 mustache.js，然後輕鬆升級到 Handlebars.js，因為它們的模板（大部分）是相同的。
如果你想閱讀更多關於 Mustache 的內容，看看 使用Mustache.js建立HMTL模板。
Handlebars.js
Handlebars.js 構建在 Mustache 之上，與Mustache模板大部分相容。簡而言之，它提供了 mustache.js 提供的一切，加上它支援塊表示式和預編譯模板。預編譯模板是了不起的東西，因為它們大幅提高效能（在一個粗略的效能測試，預編譯的 Handlebars.js 模板渲染的時間是Mustache模板的一半）。塊表示式允許您在模板中包含更多的邏輯，更常見的例子之一是高階迭代——比如，建立一個 <ul> 列表迭代器，它將每個條目用 <li> 包裝。你可以在這裡閱讀更多關於塊表示式的內容。
關鍵點
- 86kb檔案大小（大），或者使用預編譯模板是18kb
- 塊表示式（helpers）
- 預編譯模板
- 無依賴
舉例
|
1 2 3 |
<script id="template" type="text/x-handlebars-template"> <p>Use the <strong>{{power}}</strong>, {{name}}!</p> </script> |
|
1 2 3 4 5 6 7 8 9 10 11 |
//Grab the inline template var template = document.getElementById('template').innerHTML; //Compile the template var compiled_template = Handlebars.compile(template); //Render the data into the template var rendered = compiled_template({name: "Luke", power: "force"}); //Overwrite the contents of #target with the renderer HTML document.getElementById('target').innerHTML = rendered; |
Handlebars.js 很適合效能要求高的專案，同時對於頁面增加 18 kb 並不太擔心。如果我們想使用塊表示式，這也是選擇它的原因。
注意，要獲得 Handlebars.js 的效能優勢（和大大減少的檔案大小）我們必須使用 預編譯模板。為了有效地這樣做，我們應該將Handlebars.js模板預編譯新增到構建過程中（Grunt對此有一個很棒的外掛）。
如果你想了解更多關於 Handlebars 的內容，看看：Handlebars初學者指南
jQuery Template
jQuery Template沒有mustache.js或Handlebars.js流行，但也不要忽視它。它的模板和Mustache模板不同，只是普通的HTML，沒有新語法。它不使用標記替換技術，而使用資料屬性來表示資料應該插入到HTML片段的位置。
關鍵點
- 7kb檔案大小（小）
- 需要jQuery (大於82kb)
- 簡單，但與Mustache以及Handlebars.js的工作方式不同
- 沒有預編譯模板
舉例
|
1 2 3 4 5 6 |
<script id="template" type="text/html"> <p> Use the <strong data-content="power"></strong>, <span data-content="name"></span>! </p> </script> |
|
1 2 3 4 5 6 7 8 9 10 11 |
//Call .loadTemplate() on the target container $('#target').loadTemplate( //Specify the template container (or file name of external template) $('#template'), //Specify the data to render { name: "Luke", power: "force" } ); |
jQuery Template對於已經使用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。
想發表什麼見解嗎？請在下面留下你的評論！