高性能JavaScript模板引擎原理解析

隨着 web 發展，前端應用變得愈來愈複雜，基於後端的 javascript(Node.js) 也開始嶄露頭角，javascript 被寄予了更大的指望，與此同時 javascript MVC 思想也開始流行起來。javascript 模板引擎做爲數據與界面分離工做中最重要一環，愈來愈受開發者關注，在開源社區中更是百花齊放，在 Twitter、淘寶網、新浪微博、騰訊QQ空間、騰訊微博等大型網站中均能看到它們的身影。

本文將用最簡單的示例代碼描述現有的 javascript 模板引擎的原理，包括新一代 javascript 模板引擎 artTemplate 的特性實現原理，歡迎共同探討。

artTemplate 介紹

artTemplate 是新一代 javascript 模板引擎，它採用預編譯方式讓性能有了質的飛躍，而且充分利用 javascript 引擎特性，使得其性能不管在前端仍是後端都有極其出色的表現。在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍。

除了性能優點外，調試功能也值得一提。模板調試器能夠精肯定位到引起渲染錯誤的模板語句，解決了編寫模板過程當中沒法調試的痛苦，讓開發變得高效，也避免了由於單個模板出錯致使整個應用崩潰的狀況發生。

artTemplate 這一切都在 1.7kb(gzip) 中實現！

javascript 模板引擎基本原理

雖然每一個引擎從模板語法、語法解析、變量賦值、字符串拼接的實現方式各有所不一樣，但關鍵的渲染原理仍然是動態執行 javascript 字符串。

關於動態執行 javascript 字符串，本文以一段模板代碼舉例：

這是一段很是樸素的模板寫法，其中，」」 爲 closeTag (邏輯語句閉合標籤)，若 openTag 後面緊跟 「=」 則會輸出變量的內容。

HTML語句與變量輸出語句被直接輸出，解析後的字符串相似：

語法分析完畢通常還會返回渲染方法：

渲染測試：

在上面 render 方法中，模板變量賦值採用了 with 語句，字符串拼接採用數組的 push 方法以提高在 IE六、7 下的性能，jQuery 做者 john 開發的微型模板引擎 tmpl 是這種方式的典型表明，參見： http:ejohn.org/blog/javascript-micro-templating/

由原理實現可見，傳統 javascript 模板引擎中留下兩個待解決的問題：

一、性能：模板引擎渲染的時候依賴 Function 構造器實現，Function 與 eval、setTimeout、setInterval 同樣，提供了使用文本訪問 javascript 解析引擎的方法，但這樣執行 javascript 的性能很是低下。

二、調試：因爲是動態執行字符串，若遇到錯誤調試器沒法捕獲錯誤源，致使模板 BUG 調試變得異常痛苦。在沒有進行容錯的引擎中，局部模板若由於數據異常甚至能夠致使整個應用崩潰，隨着模板的數目增長，維護成本將劇增。

本次給你們推薦一個免費的學習圈，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。**獲取資料