首页 > 代码库 > Art-template模板
Art-template模板
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="http://www.mamicode.com/{{value.picUrl}}" one rror="javascript:this.src=http://www.mamicode.com/‘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">已练习 {{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="http://www.mamicode.com/{{value.picUrl}}" one rror="javascript:this.src=http://www.mamicode.com/‘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">已练习 {{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的方法的使用和判断，这在灵活使用上很方便，可读性稍差了点。
Art-template模板