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}}" οnerrοr="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">已练习 {{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}}" οnerrοr="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">已练习 {{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的方法的使用和判断，这在灵活使用上很方便，可读性稍差了点。
