JavaScript模板引擎綜述

flowerwxc發表於2015-12-26
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. 2.

Use the {{power}}, {{name}}!

3.

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模板的一半）。塊表示式允許你在模板中新增邏輯；最常見的例子是高階迭代-比如建立一個每個條目都用

  • 包裝的
      列表迭代器。你可以在這裡獲取關於塊表示式的更多內容。

    • 要點： •86kb體積（大），使用預編譯模板為18kb •塊表示式（輔助） •預編譯模板 •非獨立

    例： 1. 2.

    Use the {{power}}, {{name}}!

    3.

    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. 2.

    3. Use the , 4. ! 5.

    6.

    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

    相關文章