基于 JS artTemplate 模板引擎 Template 加载的优化

artTemplate （http://aui.github.io/artTemplate）一种全新的 javascript 模板引擎，它采用了预编译的方式让性能有了质的飞跃，并充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。但是在实际应用中我们发现，和Ajax配合后通常会产生很多的 Template，这些 Template 都堆积在页面源码中时间一长难免会越来越多，影响页面加载的字节数，让页面越来越大。

我们对此进行了优化，由于我们的业务主要是针对移动产品的，因此我们可以放心的使用 HTML5 的 localStorage 进行缓存操作，缓存部分代码如下：

1. //实现template文件的缓存
   
2. var TC = {
   
3.     VERSION : "xxxxx" ,
   
4.     KEYPREFIX : "xxx_",
   
5. 
   
6.     //加载js文件
   
7.     load : function(filePath ,version ,params) {
   
8. 
   
9.         if (arguments.length == 2 && typeof(arguments[1]) == 'object') {
   
10.             params = arguments[1];
    
11.             version = null;
    
12.             tag = null;
    
13.         };
    
14. 
    
15.         var source = TC.getCacheTSData(filePath ,version);
    
16.         if(!source) {
    
17.             return;
    
18.         }
    
19. 
    
20.         if(params) {
    
21.             source = source.replace('[%params%]',JSON.stringify(params));
    
22.         }
    
23. 
    
24.         jQuery(source).appendTo('body');
    
25.     } ,
    
26.     //请求js文件
    
27.     getCacheTSData : function(filePath ,version) {
    
28.         var source = null;
    
29.         if(version) { //获得版本号
    
30.             source = localStorage.getItem(TC.KEYPREFIX + filePath);
    
31.             if(source) {
    
32.                 if(version == localStorage.getItem(TC.KEYPREFIX + filePath + "version")) {
    
33.                     return source; //版本号一致直接返回
    
34.                 }
    
35.                 localStorage.removeItem(TC.KEYPREFIX + filePath);
    
36.                 localStorage.removeItem(TC.KEYPREFIX + filePath + "version");
    
37.             }
    
38.         }
    
39.         //如果没有缓存则网络请求js
    
40.         jQuery.ajax({ //同步请求js文件
    
41.             async : false,
    
42.             cache : false ,
    
43.             dataType: "text",
    
44.                 url: filePath,
    
45.                 success: function(data) {
    
46.                     source = data;
    
47.                 }
    
48.             });
    
49.          //缓存js
    
50.         if(source && version) {
    
51.             var i = 2;
    
52.             while(i--) {
    
53.                 try {
    
54.                     localStorage.setItem(TC.KEYPREFIX + filePath ,source);
    
55.                     localStorage.setItem(TC.KEYPREFIX + filePath + "version" ,version);
    
56.                     break;
    
57.                 } catch(err) {
    
58.                     if(err.name == 'QuotaExceededError') {
    
59.                         localStorage.clear(); //如果缓存已满则清空
    
60.                     }
    
61.                 }
    
62.             }
    
63.         }
    
64.         return source;
    
65.     }
    
66. };

复制代码

这时，我们可以把诸多的 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>');

复制代码

当然这样更省事。

此方案的是保证减少页面请求字节及页面请求数的目的下还能做到方便维护而提供的！

此功能在打通版微社区中实现！

猴哥威武

学习了！

不错，不错。。。

棒棒哒