JS模板引擎 ：ArtTemplate （1）

1.為什么需要用到模板引擎

我們在做前端開發的時候，有時候經常需要根據后端返回的json數據，然后來生成html，再顯示到頁面中去。

例如這樣子：

var data = [
    {text: "測試一"},
    {text: "測試二"},
    {text: "測試三"},
    {text: "測試四"}
];
function generateList(data) {
    var listHtml = "";
    listHtml += "<ul>";
    for (var i = 0, len = data.length; i < len; i++) {
        listHtml += "<li>";
        listHtml += data.text;
        listHtml += "</li>";
    }
    listHtml += "</ul>";
    return listHtml;
}

但是，這種通過字符串拼接的方式，比較簡單的還好，如果結構比較復雜，拼接的時候還需要注意引號之間的嵌套，這樣的代碼維護起來比較困難。

一旦需求發生變化，這里修改起來也是很麻煩。所以我們需要模板引擎來改善這種情況。

例如上面的例子，如果使用模板引擎則可以是這樣子：

var data = {
    list:[
        {text: "測試一"},
        {text: "測試二"},
        {text: "測試三"},
        {text: "測試四"}
    ]
};
<script id="test" type="text/html">
    <ul>
        <% for (var i = 0; i < list.length; i ++) { %>
        <li><%= list[i].text %></li>
        <% } %>
    </ul>
</script>

不知道你有沒有感覺簡單一點呢，反正我是感覺更清晰明了一點。

2.artTemplate的介紹

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

除了性能優勢外，調試功能也值得一提。模板調試器可以精確定位到引發渲染錯誤的模板語句，解決了編寫模板過程中無法調試的痛苦，讓開發變得高效，也避免了因為單個模板出錯導致整個應用崩潰的情況發生。

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

這是artTemplate的官網，使用方法相信有一定js基礎的，看了文檔之后都能夠使用。這里就不詳細介紹了。官網

 

3.artTemplate 模板引擎的基本原理

 　 模板引擎其實做的就是兩件事。

1. 根據一定的規則，解析我們所定義的模板
   這里，我們將模板定義在script標簽中，然后，當我們使用到某個模板的時候，引擎會根據我們提供的ID，解析相應的模板，此時會返回一個渲染函數。（為了性能，還會將這個渲染函數緩存起來）
   

   (function($data,$filename) {
       'use strict';
       var i=$data.i,list=$data.list,$out='';$out+='<ul>\n';
       for (var i = 0; i < list.length; i ++) {
           $out+='\n        <li>';
           $out+= list[i].text;
           $out+='</li>\n';
       }
       $out+='\n</ul>';
       return new String($out);
   })

    上述代碼，我已經刪除了一些不必要的信息，解析模板之后，會返回一個這樣的渲染函數。也就是說，其實模板引擎就是將我們平時用的字符串拼接的事情給做了。
   至於，引擎是如何解析的，在下一篇我會詳細介紹

2. 根據數據以及模板生成html（其實背后也是用的字符串拼接）
   這里，會根據用戶所傳的數據，然后調用上一步返回的渲染函數。得到我們想要的結果。

這是第一篇，先簡單的介紹到這里，接下來會寫另外幾篇對artTemplate的源碼進行講解。

小弟才疏學淺，難免會對一些知識點以及一些細節講的有些偏頗或者不夠全面，望各位多多提出意見。