性能卓越的js模板引擎--artTemplate

artTemplate能够将数据与View视图的分离，充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。

在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。

一、简洁编写模板

1.(采用script标签并带有属性id和type="text/html")

 <script id="test" type="text/html">
    {{if isAdmin}}

    <h1>{{author}}</h1>
    <ul>
     {{each list as value i}}
     <li>{{i+}}:{{value}}</li>
     {{/each}}
    </ul>

    {{/if}}
  </script>

2.出色的渲染模板

template(id, data) 根据 id 渲染模板。内部会根据document.getElementById(id)查找模板，如果没有 data 参数，那么将返回一渲染函数。

var data = {
    author: '宫崎骏',
    isAdmin: true,
    list: ['千与千寻', '哈尔的移动城堡', '幽灵公主', '风之谷', '龙猫']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

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

  var source =
       '<ul>'
     + '<% for (var i = 0; i < list.length; i ++) { %>'
     +        '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'
     +  '<% } %>'
     + '</ul>';

     var data = {
         list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
     };

     var render = template.compile(source);
     var html = render(data);
     document.getElementById('content').innerHTML = html;

二、简洁的模板语法

1.简洁语法(采用"{{ }}"，推荐使用)

{{each resultList as result index}}
   <tr data-id = "{{result.userId}}">
      <td>{{index}}</td>
      <td>{{if result.userType == 0 }}普通用户{{else}}管理员{{/if}}</td>
      <td>{{result.userName}}</td>
      <td>{{if result.status == 0 }}停用{{else}}启用{{/if}}</td>
   </tr>
{{/each}}

2.原生语法(采用"<%= %>") 类似于JSP语法写法

<script id="test" type="text/html">
<%if {%>
  <%include('admin_content')%>

  <%for (var i=0;i<list.length;i++) {%>
    <div><%=i%>.<%=list[i].user%></div>
  <%}%>
<%}%>
</script>

3.template.helper(name, callback) 将返回一个渲染结果。

 {{each collectionList as item index}}
     <p><span name="startTime">{{item.startTime | dateFormat: 'yyyy-MM-dd'}}</span>
 {{/each}}

 template.helper("dateFormat", function(date, fmt) {
     if (!date) return '';

     date = date.split('-').join('/');
     date = new Date(date);
     var o = {
         "M+": date.getMonth() + 1, //月份
         "d+": date.getDate(), //日
         "h+": date.getHours(), //小时
         "m+": date.getMinutes(), //分
         "s+": date.getSeconds(), //秒
         "q+": Math.floor((date.getMonth() + 3) / 3), //季度
         "S": date.getMilliseconds() //毫秒
     };
     if (/(y+)/.test(fmt))
         fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
     for (var k in o)
         if (new RegExp("(" + k + ")").test(fmt)) {
             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
         }
     return fmt;
 });

资料参考

https://aui.github.io/art-template/zh-cn/index.html

https://cdc.tencent.com/2012/06/15/