性能卓越的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+1}}:{{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/