Art-template模板

Posted 2020-08-20 爱尚丽明

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}}
    <tr>
        <td>{{index+1}}</td>
        <td>{{value.a1}}</td>
        <td class="tooltip" rel="{{value.a2}}"><p>{{value.a3}}</p></td>
        <td><a href="">{{value.a4}}</a></td>
        <td><a href="">{{value.a5}}</a></td>
        <td><a href="">{{value.a6}}</a></td>
        <td>{{value.a7}}</td>
        <td>{{value.a8}}</td>
        <td><a href="javascript:;"  class="block"><span dataId="{{value.a9}}" class="block del-practice"></span></a></td>
    </tr>
{{/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、语法使用

基础语法

<ul>
    {{each result as value index}}
        {{if index <= 2}}
            <li class="item-ranking clearfix firstList {{if index == result.length-1}}last{{/if}}">
                <img class="fl head-portrait" src="{{value.picUrl}}" onerror="javascript:this.src=\'people-error.png\';"></img>
                <div class="zz_big"></div>
                <div class="fl modify-num">
                    <p class="ranking-name">
                        <span class="ell student-name" title="{{value.name}}">{{value.name}}</span>
                        <span class="student">已练习&nbsp;{{value.exerciseNum}}</span>
                        <div class="view-btn" data-id={{value.ID}} data-url="{{value.picUrl}}" data-num="{{index+1}}">查看</div>
                    </p>
                </div>
            </li>
        {{else}}
             <li class="item-ranking clearfix {{if index == result.length-1}}last{{/if}}">
                <img class="fl head-portrait" src="{{value.picUrl}}" onerror="javascript:this.src=\'people-error.png\';"></img>
                <div class="zz_small"></div>
                <div class="fl modify-num">
                    <p class="fl ranking-name">
                        <span class="ell student-name" title="{{value.name}}">{{value.name}}</span>
                        <span class="student">已练习&nbsp;{{value.exerciseNum}}</span>
                    </p>
                </div>
                <div class="view-btn1 fl" data-id={{value.ID}} data-url="{{value.picUrl}}" data-num="{{index+1}}">查看</div>
            </li>
        {{/if}}
    {{/each}}
</ul>

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

原生语法

<%for(var key=0;key<data.length;key++){%>
    <tr<%if(/失败/.test(data[key].result)){%> class="redbg" <%}%>>
        <td><%=(key+1)%></td>
        <td><%=data[key].a1%></td>
        <td><%=data[key].a2%></td>
        <td><%=data[key].a3%></td>
        <td><%=data[key].a4 %></td>
        <td><%=data[key].a5%></td>
        <td>
            <%if(data[key].a5 == "测试失败"){%>
                <!--<button type="button" class="block recheck btn" dataID="<%=data[key].piGaiTopicId%>">ssss</button>-->
            <%}%><%else{%>
                <%=data[key].mark%>
            <%}%>
        </td>
    </tr>
<%}%>

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