art-template 是一个简约、超快的模板引擎。拥有接近 JavaScript 渲染极限的的性能,并且同时支持 NodeJS 和浏览器。浏览器版本仅 6KB 大小。在之前的传统项目中使用过浏览器版本,虽然现在没在用了,但是它体积小、效率高、学习成本低,好的东西就要记录一下。
1、安装、下载
npm安装
npm install art-template --save
浏览器中使用
注意:以上两种方式区别在于能否使用模板文件。由于浏览器中不能读取文件系统,所以 template(filename, data) 不支持传入文件路径,只能在页面通过 document.getElementById(filename).innerHTML或者Jquery 来获取模板内容。或者直接传模版字符串。
2、模版语法
输出
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
条件语句
{{if val1}}
...
{{else if val2}}
...
{{else}}
...
{{/if}}
...
...
...
循环
{{each target}}
{{$index}} {{$value}}
{{/each}}
变量
{{set temp = data.sub.content}}
过滤器
注册过滤器
// 过滤器1
template.defaults.imports.dateFormat = function(date, format){
/*[code..]*/
};
// 过滤器2
template.defaults.imports.timestamp = function(value){
return value * 1000
};
// 注意:过滤器函数第一个参数接受目标值。
使用过滤器
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}
3、核心方法
// 基于模板名渲染模板
template(filename, data);
// 将模板源代码编译成函数
template.compile(source, options);
// 将模板源代码编译成函数并立刻执行
template.render(source, data, options);
更详细介绍请移步官方文档