1.特性:
性能卓越,执行速度通常是Mustache与tmpl的20多倍(性能测试)
支持运行时调试,可精确定位异常模板所在的语句
对NodeJS Express友好支持
安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)
支持include语句
可在浏览器端实现按路径加载模板
支持预编译,可将模板转换成为非常精简的js文件
模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选
支持所有流行的浏览器
2.使用一个type="text/html"的script标签存放模板
编写模板
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i+1}} : {{value}} </li>
{{/each}}
</ul>
</script>
渲染模板
var data={
title:'标签',
list:['文艺','博客','摄影','电影','民谣','旅行','吉他']
}
var html=template('test',data);
document.getElementById('content').innerHTML=html;
3.简洁语法和原生语法
简洁语法 template.js
{{if admin}}
{{include 'admin_content'}}
{{each list}}
<div>{{$index}}.{{$value.user}}</div>
{{/each}}
{{/if}}
原生语法 template-native.js<%if (admin) {% >
<% include('admin_count') %>
<% for(var i=0;i<list.length;i++) { %>
<div><%=i%>.<%=list[i].user%></div>
<% } %>
<% } %>
4.方法(若没有data参数,将返回渲染函数)
template.compile(source,options) 返回一个渲染函数
template.render(source,options) 将返回渲染结果
template.helper(name,callback) 添加辅助方法,例如时间格式器:演示
template.config(name,value) 更改引擎的默认设置
5.使用预编译(预编译工具:TmodJS)
按文件与目录组织模板
template('tpl/home/main',data)
模板支持子模板
{{include '../public/header'}}
基于预编译:
可将模板转换为非常精简的js文件(不依赖引擎)
使用同步模板加载接口
支持多种js模板输出:AMD、CMD、CommonJS
支持作为GruntJS插件构建
前端模板可共享给NodeJS执行
自动压缩打包模板
6.NodeJS安装
安装
npm inatall art-template
使用
var template =require('art-templadr') ;
var data={list:["aui","test"]};
var hrml=template(_dirname+'/index/main',data);
配置base指定模板目录可以缩短模板的路径,并能避免include语句越级访问任意路径引发安全隐患
template.config('base',_dirname);
var html=template('index/html',data)
NodeJS+Express
var template=require('art-template');
template.config('base','');
template.config('extname','.html');
app.engine('.html',template._express);
app.set('view engine','html');
//app.set('views',_dirname+'/views');
运行demo
node demo/node-template-express.js