基于 JS artTemplate 模板引擎 Template 加載的優化

我是小站長

artTemplate （http://aui.github.io/artTemplate）一種全新的 javascript 模板引擎，它采用了預編譯的方式讓性能有了質的飛躍，并充分利用 javascript 引擎特性，使得其性能無論在前端還是后端都有極其出色的表現。但是在實際應用中我們發現，和Ajax配合后通常會產生很多的 Template，這些 Template 都堆積在頁面源碼中時間一長難免會越來越多，影響頁面加載的字節數，讓頁面越來越大。

我們對此進行了優化，由于我們的業務主要是針對移動產品的，因此我們可以放心的使用 HTML5 的 localStorage 進行緩存操作，緩存部分代碼如下：

1. artTemplate （http://aui.github.io/artTemplate）一種全新的 javascript 模板引擎，它采用了預編譯的方式讓性能有了質的飛躍，并充分利用 javascript 引擎特性，使得其性能無論在前端還是后端都有極其出色的表現。但是在實際應用中我們發現，和Ajax配合后通常會產生很多的 Template，這些 Template 都堆積在頁面源碼中時間一長難免會越來越多，影響頁面加載的字節數，讓頁面越來越大。
   
2. 我們對此進行了優化，由于我們的業務主要是針對移動產品的，因此我們可以放心的使用 HTML5 的 localStorage 進行緩存操作，緩存部分代碼如下：

復制代碼

這時，我們可以把諸多的 Template 分門別類的存放在不同的文件中，比如把首頁的 Template 代碼存放在 tpl_index.html 中，列表頁的 Template 代碼存放在 tpl_list.html 中。每個文件中可以放多個 Template 定義，文件內容如下：

1. <script id="header" type="text/html">
   
2. <div class="header"><h3><%= header.name %></h3></div>
   
3. </script>
   
4. 
   
5. <script id="hotList" type="text/html">
   
6. <ul>
   
7.     <% for(i = 0; i < list.length; i++){ %>
   
8.         <li tid="<%= list[i].tid %>"><%= list[i].subject %></li>
   
9.     <% } %>
   
10. </ul>
    
11. </script>
    
12. 
    
13. ······

復制代碼

在我們使用的時候，直接引用文件即可，如下：

1. TC.load("tmpl/tpl_list.html");

復制代碼

首次訪問此函數時，會調用 tmpl/tpl_list.html 文件并緩存到 localStorage 中，以后會直接從 localStorage 中獲取 Template 的內容，直到 TC.VERSION 中的值變化，才會重新調用文件。從而減少了主頁面請求的字節數。

用過 artTemplate 的人會習慣直接把一些內容很短的模板直接寫在 JS 里，類似下面

1. template.compile('header', '<div class="header"><h3><%= header.name %></h3></div>');

復制代碼

當然這樣更省事。

此方案的是保證減少頁面請求字節及頁面請求數的目的下還能做到方便維護而提供的！

此功能在打通版微社區中實現！