摘要：原作者唐斌騰訊什么原名是一個簡單易用的前端模板預編譯工具。本文作者為來自騰訊團隊的唐斌，他在本文中為我們分析了傳統前端模板內嵌的弊端，如開發調試效率低下自動化構建復雜度比較高等特點，并針對目前現狀給出了較好的解決方案。

原作者: 唐斌（騰訊）|

TmodJS（原名atc）是一個簡單易用的前端模板預編譯工具。它通過預編譯技術讓前端模板突破瀏覽器限制，實現后端模板一樣的同步“文件”加載能力。它采用目錄來組織維護前端模板，從而讓前端模板實現工程化管理，最終保證前端模板在復雜單頁 Web 應用下的可維護性。更多內容，可訪問：http://code.csdn.net/news/282...。

本文作者為來自騰訊 TmodJS 團隊的唐斌，他在本文中為我們分析了傳統前端模板內嵌的弊端，如開發調試效率低下、自動化構建復雜度比較高等特點，并針對目前現狀給出了較好的解決方案。下面為作者原文，可供參考。

早期，開發人員都是直接在 JS 文件中采用最原始的方式直接拼接 HTML 字符串：

var html = "";
for (var i = 0, users = data.users; i < users.length; i ++) {
    html += "
"
    + users[i].name
    + "
";
}

這種方式剛開始在一兩個簡單的頁面中還是比較靈活的，但弊端也十分明顯：UI 與邏輯代碼混雜在一起，閱讀起來會非常吃力。一旦隨著業務復雜起來，或者多人維護的情況下，幾乎會失控。

　　受 jQuery 作者的 tmpl 模板引擎影響，從 09 年開始到現在，前端模板引擎出現了百花齊放的局面，涌現出一大批行色各異的引擎，幾乎每個前端工程中都使用了模板引擎。一條前端模板類似這樣：

它使用一個特殊的 標簽來存放模板（由于瀏覽器不支持這種類型的聲明，它存放的代碼不會當作 JS 運行，代碼也不會被顯示出來）。使用模板引擎渲染模板的示例：

var html = tmpl("user_tmpl", data);
document.getElementById("content").innerHTML = html;

http://aui.github.io/artTempl...

通過前端模板引擎將 UI 分離后，模板的書寫與修改就變得簡單多了，也提升了可維護性。但是，隨著這種方式規模化后其弊端也隨之而來。

模板內嵌，主要存在 3 個方面的問題，主要包括：

開發調試效率低

每次修改前端模板需要改動頁面的代碼，如果不是純靜態頁面，無法使用類似 fiddler 的工具將頁面映射到本地進行開發，開發調試依賴只能服務端環境，效率低下。

自動化構建

在現代 Web 前端工程體系中，幾乎每一個環節都擁有相應的優化工具，這些幾乎都被 Grunt 這個自動構建工具連接起來。但是前端模板若內嵌到頁面中，復雜度會比較高，現有工具因為受限難以進行自動優化。

模塊化

前端模板集中在一個文件中這必然會引起多人協作的問題，隨著項目復雜度增加，按文件模塊化迫在眉睫。

　　目前越來越多的項目已經將模板從頁面中遷移出來，主要有兩種方式：

Ajax 拉取方案

通過 Ajax 加載遠程模板，然后再使用模板引擎解析。這種方式的好處就是模板可以按文件存放，書寫起來也是十分便利，但弊端相當明顯：由于瀏覽器同源策略限制的，導致模板無法部署到 CDN 網絡中。

在 JS 文件中存放模板

為避免上述加載模板方案無法跨域的致命缺陷，模板存放在 JS 文件中又成了最佳實踐方式，但是這種情況下需要對回車符進行轉義，對書寫不友好，嚴重影響開發效率。例如：

var user_tmpl =
"{{each users as value}}
    

        {{value.name}}
    
{{/each}}";

或者：

var user_tmpl =
 "{{each users as value}}"
+   "
"
+       "{{value.name}}"
+   "
"
+"{{/each}}";

現有模板組織方案優劣，如下表對比：

組織方式 | 開發效率 | 優化空間 |本地調試 | 代碼復用 | 團隊協作

內嵌業務頁中 | ? | ? | ? | ? | ?
Ajax 遠程加載| ? | ? | ? | ? | ?
嵌入 js 文件 | ? | ? | ? | ? | ?

總結：
?方便優化的模式不利于開發；
?利于開發的模式不利于優化。

看下服務端模板是如何做的：

模板按文件與目錄組織模板

template("tpl/home/main", data)

模板使用 include 語句完成復用

{{include "../public/header"}}

　　這一切看起來很美，前端是否也可以采用這樣的模式？但是現實告訴我們，這是一個艱巨的任務。

瀏覽器對文本加載會有跨域限制

瀏覽器同步加載會引起界面卡頓

加載大量的模板文件會帶來 http 資源消耗問題

為了實現上述“理想模式”，我們推出了 TmodJS——模板預編譯器。

TmodJS 采用三種方案來解決難題：

本地構建

模板編寫完成后，通過一個本地工具將模板編譯成瀏覽器可執行的代碼——JS，這樣就可以用腳本的方式來加載模板，不必受瀏覽器的同源策略限制，模板可以部署到任意 CDN，而無需處理跨域問題。

工具內部采用模板引擎—— artTemplate完成模板編譯，輸出 JS 文件。artTemplate 也是來自騰訊的開源項目，它支持預編譯，編譯后的代碼可以無需引擎運行。

種子文件

為了實現 template(path, data) 這種同步接口，TmodJS 會不斷的更新一個名為 template.js 的種子文件，這個文件合并了公用方法與編譯后的模板，項目只需要引用這個文件就可以按路徑同步的方式調用模板。例如：

var tpl = template("home/index");
var html = tpl(data);
document.getElementById("content").innerHTML = html;

模板目錄

為了讓團隊成員、自動化工具能更好的管理模板，前端模板不再內嵌到頁面中，而是使用專門的目錄進行組織維護；使用路徑作為模板的 ID，這樣與源文件保持對應關系——這樣好處就是極大的增加了可維護性。例如：頁面頭部底部的公用模板可以放在tpl/public目錄下，首屏的模板可以放在 tpl/home下面。

　　TmodJS 采用了自動編譯機制，一經啟動后就無需人工干預，每次模板創建與更新都會自動編譯，直到正式上線都無需對代碼進行任何修改。實現文件系統的前端模板只是 TmodJS 最基本的任務，它在背后還做了這些優化：

模板壓縮與合并

TmodJS 編譯之前會壓縮掉模板的空白字符，編譯為 JS 后又會進行一次壓縮，此時輸出的 JS 甚至會比原始模板更小（最高可減少一半的體積）。

在默認設置下，TmodJS 會將模板目錄所有模板編譯后再進行壓縮與合并，輸出后的 template.js 稱之為模板包（內部名稱叫 TemplateJS 格式）這種打包的方式非常適合移動端單頁 WebApp，輸出后的模板包可直接可作為開發階段與線上運行的文件，適合中小型項目。

查看編譯后的模板示例

依賴管理

當然，將所有前端模板都打包在一個文件中不一定適合每一個項目，因為很多大型項目需要更細致的優化，將模板編譯為 AMD、CMD、CommonJS 類型的的模塊是一個不錯的選擇，此時模板內部的include 語句會編譯成 requier("xxx/xxx") 形式聲明依賴，接入對應的 Grunt 插件可自動完成依賴合并。

本地調試

因為模板已經被獨立出來，所以使用 fiddler 將線上模板映射到本地進行開發調試將十分容易。如果線上模板報錯，開啟 TmodJS 的 debug 模式后可以直接找到出錯的模板路徑以及所在行號，例如：

Template Error

public/header

Render Error

Cannot read property "0" of undefined

5

{{users[0].name}}

沙箱與擴展

　　很多開發者習慣在模板中訪問頁面中全局定義的函數，如果模板內嵌到頁面中問題似乎不大，一旦模板外置后這種隱含的依賴關系將會導致嚴重的維護問題，TmodJS 采用沙箱機制來解決此問題：限制開發者訪問外部對象，模板用到的所有變量在閉包中被強制指向模板數據。

　　為了方便擴展模板的功能，可指定一個外部 JS 作為公用方法（輔助方法），這個 JS 會被合并到到 template.js 中。

安全過濾

模板的變量輸出默認都會被過濾函數包裹，在運行時進行過濾，從而避免模板開發者因為疏忽導致站點 XSS 漏洞。例如：

模板

{{title}}

編譯代碼

"
" + $escape(title) + "
"

與第三方自動化構建工具配合

　　目前 TmodJS 已有 Grunt 與 Gulp 這兩種流行的自動化構建工具的插件，未來將支持更多的自動化工具。

前后端模板共享

　　TmodJS 與 artTemplate 模板引擎使用同樣的模板語法，而 artTemplate 提供了 NodeJS 版本，可以直接讀取 TmodJS 的模板目錄，這意味著可以輕松的做到前后端模板共享，技術方案自由切換。

經過上面的一些優化，我們達到了下面成果：

組織方式 | 開發效率 | 優化空間 | 本地調試 | 代碼復用 | 團隊協作

TmodJS | ? | ? | ? | ? | ?

參考網址：http://www.lupaworld.com/arti...