基于 JS artTemplate 模板引擎 Template 加載的優(yōu)化

我是小站長

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

我們對此進行了優(yōu)化，由于我們的業(yè)務(wù)主要是針對移動產(chǎn)品的，因此我們可以放心的使用 HTML5 的 localStorage 進行緩存操作，緩存部分代碼如下：

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

復(fù)制代碼

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

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

復(fù)制代碼

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

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

復(fù)制代碼

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

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

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

復(fù)制代碼

當然這樣更省事。

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

此功能在打通版微社區(qū)中實現(xiàn)！