js模板引擎artTemplate使用方法

简单介绍

javascript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注。

artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。

javascript 模板引擎基本原理

虽然每个引擎从模板语法、语法解析、变量赋值、字符串拼接的实现方式各有所不同，但关键的渲染原理仍然是动态执行 javascript 字符串。

可看：http://cdc.tencent.com/?p=5723 基本原理的例子

artTemplate 高效的秘密

1、预编译
在一般的模板引擎实现原理中，因为要对模板变量进行赋值，所以每次渲染都需要动态编译 javascript 字符串完成变量赋值。而 artTemplate 的编译赋值过程却是在渲染之前完成的，这种方式称之为“预编译”。

2、更快的字符串相加方式
很多人误以为数组 push 方法拼接字符串会比 += 快，要知道这仅仅是 IE6-8 的浏览器下。实测表明现代浏览器使用 += 会比数组 push 方法快，而在 v8 引擎中，使用 += 方式比数组拼接快 4.7 倍。所以 artTemplate 根据 javascript 引擎特性采用了两种不同的字符串拼接方式。

使用方法

1、引用js文件：<script src="js/arttmpl.js"></script>2、页面中，使用一个type="text/template"的script标签存放模板：
 

1. <script id='doctor-template' type="text/template"> 
2.         <% for(var i in data){ var item=data[i]; %> 
3.             <li class="mui-table-view-cell mui-media "> 
4.                 <a href="javascript:;" class="mui-navigate-right"> 
5.                     <div class="mui-media-object mui-pull-left"> 
6.                         <img src="<%=(item.photo)%>" width="100%"> 
7.                         <span class="mui-badge mui-badge-danger"><%=(item.score)%>分</span>     
8.                     </div> 
9.                     <div class="mui-media-body"> 
10.                         <%=(item.name)%>&nbsp;<span class="mui-badge mui-badge-warning"><%=(item.position)%></span> 
11.                         <p class="mui-ellipsis"><%=(item.hospital)%></p> 
12.                         <p class="mui-ellipsis"><%=(item.desc)%></p> 
13.                     </div> 
14.                 </a> 
15.             </li> 
16.         <% } %> 
17.     </script> 

模板逻辑语法开始与结束的界定符号为<% 与 %>，若<%后面紧跟=号则输出变量内容。

3、渲染模板

1. template.render(id, data); 

继续上面的例子：

1. var fragment = template('doctor-template', { 
2.                 "data":[ 
3.                     { 
4.                         name:"王静", 
5.                         score:4.5, 
6.                         photo:'images/logo.png', 
7.                         hospital:"江苏省中医院", 
8.                         desc:'妇科、不孕不育症、月经病等', 
9.                         position:'副医师' 
10.                     }, 
11.                     { 
12.                         name:"啦啦", 
13.                         score:4.9, 
14.                         photo:'images/logo.png', 
15.                         hospital:"鼓楼医院", 
16.                         desc:'儿童呼吸系统疾病的诊治，对于儿童疾病', 
17.                         position:'主治医师' 
18.                     } 
19.                 ] 
20.             }); 

不转义HTML

模板引擎默认数据包含的 HTML 字符进行转义以避免 XSS 漏洞，若不需要转义的地方可使用==。

1. <script id="test" type="text/template"> 
2. <%==value%> 
3. </script> 

若需要关闭默认转义，可以设置：
 

1. template.config('escape', false); 

在js中存放模板
 

1. var source = 
2.       '<ul>'+     
3.         '<% for (var i = 0; i < list.length; i ++) { %>'+  
4.                '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'+ 
5.          '<% } %>'+ 
6.       '</ul>'; 
7. var data = { 
8.         list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] 
9. }; 
10. var render = template.compile(source); 
11. var html = render(data); 
12. document.getElementById('content').innerHTML = html; 

template.compile([id], source)将返回一个渲染函数。其中 id 参数是可选的，如果使用了 id 参数，可以使用template.render(id, data)渲染模板。

添加辅助方法

template.helper(name, callback)辅助方法一般用来进行字符串替换，如 UBB 替换、脏话替换等。

例如扩展一个UBB替换方法：

1. template.helper('$ubb2html', function (content) { 
2.     return content 
3.     .replace(/[b]([^[]?)[/b]/igm, '<b>$1</b>') 
4.     .replace(/[i]([^[]?)[/i]/igm, '<i>$1</i>') 
5.     .replace(/[u]([^[]?)[/u]/igm, '<u>$1</u>') 
6.     .replace(/[url=([^]])]([^[]?)[/url]/igm, '<a href="$1">$2</a>') 
7.     .replace(/[img]([^[]?)[/img]/igm, '<img src="$1" />'); 
8. }); 

在模板中的使用方式：
 

1. <%=$ubb2html(content) %> 

注意：引擎不会对辅助方法输出的 HTML 字符进行转义。

设置界定符

若前端模板语法与后端语法产生冲突，可以修改模板引擎界定符，例如：
 

1. template.openTag = "<!--["; 
2. template.closeTag = "]-->";