artTemplate模板

1、介绍

新一代 javascript 模板引擎。

2、性能（引）

　　1、性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）
　　2、支持运行时调试，可精确定位异常模板所在语句（演示）
　　3、对 NodeJS Express 友好支持
　　4、安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）
　　5、支持include语句，可在浏览器端实现按路径加载模板
　　6、支持预编译，可将模板转换成为非常精简的 js 文件
　　7、模板语句简洁，无需前缀引用数据
　　8、支持所有流行的浏览器

3、方法介绍

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

template.compile(source, options)

将返回一个渲染函数。

var render = template.compile(tpl);//tpl是模板

tpl代码如下

{{each data as value index}}
    
        {{index+1}}
        {{value.a1}}
        
{{value.a3}}
        {{value.a4}}
        {{value.a5}}
        {{value.a6}}
        {{value.a7}}
        {{value.a8}}
        
    
{{/each}}

template.render(source, options)

将返回渲染结果。同上返回的template.compile(source, options)函数

代码如下

我们拿var render = template.compile(tpl);返回的函数render来生成html页面

如下：

$('#ID').html(render(result));//result为后端返回的json数据

template.helper(name, callback)

添加辅助方法。

例如：（转）

template.helper('dateFormat', function (date, format) {

    date = new Date(date);

    var map = {
        "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() //毫秒 
    };
    format = format.replace(/([yMdhmsqS])+/g, function(all, t){
        var v = map[t];
        if(v !== undefined){
            if(all.length > 1){
                v = '0' + v;
                v = v.substr(v.length-2);
            }
            return v;
        }
        else if(t === 'y'){
            return (date.getFullYear() + '').substr(4 - all.length);
        }
        return all;
    });
    return format;
});

如何使用？

如下：

{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}//模板中这么使用  time是一个字符串  dateFormat函数名

template.config(name, value)

更改引擎的默认配置。参数如下

openTag     String          {{            语法开始标签
closeTag     String          }}            语法结束标签
escape        Boolean        true         是否编码输出 HTML 字符
cache          Boolean        true         是否开启缓存（依赖 options 的 filename 字段）
compress     Boolean       false         是否压缩 HTML 多余空白字符

使用预编译
可突破浏览器限制，让前端模板拥有后端模板一样的同步“文件”加载能力：

按文件与目录组织模板

template('tpl/home/main', data)
模板支持引入子模板

{{include '../public/header'}}

基础不再详述下面介绍模板语法与原生语法的使用例子

4、语法使用

基础语法

    {{each result as value index}}
        {{if index <= 2}}
            

                
                

                

                    

                        {{value.name}}
                        已练习 {{value.exerciseNum}}
                        
查看
                    

                
            
        {{else}}
             

                
                

                

                    

                        {{value.name}}
                        已练习 {{value.exerciseNum}}
                    
                
                
查看
            
        {{/if}}
    {{/each}}

模板语法支持基础的判断 但是高级的功能，比如js原生的方法是不支持的，下面介绍原生语法例子

原生语法

<%for(var key=0;key
    if(/失败/.test(data[key].result)){%> class="redbg" <%}%>>
        <%=(key+1)%>
        <%=data[key].a1%>
        <%=data[key].a2%>
        <%=data[key].a3%>
        <%=data[key].a4 %>
        <%=data[key].a5%>
        
            <%if(data[key].a5 == "测试失败"){%>
                
            <%}%><%else{%>
                <%=data[key].mark%>
            <%}%>
        
    
<%}%>

原生语法支持js的方法的使用和判断，这在灵活使用上很方便，可读性稍差了点。