关于腾讯的前端模板art-template，断断续续地用过(维护老项目使用的比较多)，有时用过了，当时还记得住，过一段时间，有的细节容易忘记，还需不断去百度找文档，所以在此，自己根据使用过的情况，简单总结记录一下，纯属方便自己查找。说明：本人主要使用的是art-template.js 简洁版的语法(使用中发现，新版本和老版本有的地方写法略有不同)。
一、art-template介绍
art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。
二、下载最新版的art-template
1、下载好以后，引入art-template.js文件
2、编写HTML模板，使用一个type=”text/html”的script标签存放模板，{{}}是art-template获取数据的语法，如：
{{ data.name}}
3、在js中读到数据后，向模板插入数据，并输出到页面，如
var data = {
name:"我是art-template"
};
var html = template("template-mod",data);
document.getElementById('my-id').innerHTML = html;
那么页面就可以显示出“name”的内容了。
四、art-template循环遍历的使用
1、语法：
{{each data}}
索引值：{{$index}}
值：{{$value.name}}
{{/each}}
或者这样写法
{{each data value index}}
索引值：{{index}}
值：{{value.name}}
{{/each}}
在老版本中，写法如下
{{each data as value index}}
2、循环具体写法
{{each list}}
{{$index + 1}}、
名字：{{$value.name}}
年龄：{{$value.age}}
{{/each}}
var data = {
tem:"我是art-template",
list:[
{
name:"我是谁1",
age:18
},
{
name:"我是谁2",
age:19
},
]
};
//使用art-template的template(id, data)方法，然后根据id来渲染模板
var html = template("template-mod",data);
document.getElementById('my-id').innerHTML = html;
3、嵌套循环的写法：老版本，在chrome中暂时发现一个问题，下面each value.name nameObj h这句代码中value.name nameObj之间有两个空格才能渲染。
{{each list as value index}}
{{index + 1}}、
{{each value.name nameObj h}}
名字{{h}}：{{nameObj}}
{{/each}}
{{/each}}
var data = {
tem:"我是art-template",
list:[
{
name:["小芳","大芳"],
age:18
},
{
name:"我是谁2",
age:19
},
]
};
var html = template("template-mod",data);
document.getElementById('my-id').innerHTML = html;
五、art-template流程控制语句写法
{{if flag}}
{{if state == 1}}
失败
{{else if state == 2}}
成功
{{else}}
交易完成
{{/if}}
{{else}}
没有数据
{{/if}}
var data = {
flag:1,
state:1
};
var html = template("template-mod",data);
document.getElementById('my-id').innerHTML = html;
六、art-template自定义过滤器方法的使用
老版本的方式我们可以通过template.helper(name,fnCallBack)注册自定义方法，然后在模板{{}}调用，最新的版本中使用template.defaults.imports.name = function(state){}
{{each list as value index}}
{{index + 1}}、
时间：{{value.time}}
状态：{{handle(value.state)}}
{{/each}}
var data = {
tem:"我是art-template",
list:[
{
state:1,
time:"2017-11-11"
},
{
state:2,
time:"2017-11-11"
},
{
state:3,
time:"2017-11-11"
},
]
};
//自定义函数 ,新版的方法，template.defaults.imports.handle = function(state){}
template.defaults.imports.handle = function(state){
console.log(state);
if(state == 1){
return "失败"
}else if(state == 2){
return "成功"
}else if(state == 3){
return "交易完成"
}
};
//自定义函数-老版本的方法 template.helper("handle",function(state){}
template.helper("handle",function(state){
console.log(state);
if(state == 1){
return "失败"
}else if(state == 2){
return "成功"
}else if(state == 3){
return "交易完成"
}
});
//使用art-template的template(id, data)方法，然后根据id来渲染模板
var html = template("template-mod",data);
document.getElementById('my-id').innerHTML = html;
七、template.compile(source, options)函数的使用
编译模板并返回一个渲染函数。我们可以把模板可以直接写在JS中，再编译渲染，如
var source = '
- '
+ '{{each list value index}}'
+ '
索引 {{index + 1}} ：{{value}}'
+ '{{/each}}'
+ '
';
var render = template.compile(source);
var html = render({list: ['摄影', '电影', '民谣', '旅行', '吉他']});
document.getElementById('my-id').innerHTML = html;
八、引用子模板
{{each list as value index}}
{{index + 1}}、
时间：{{value.time}}
状态：{{value.state}}
姓名：{{include 'children-template1' name}}
模板名字：{{include 'children-template2' data}}
{{/each}}
{{val}}
{{tem}}
var data = {
tem:"我是art-template",
list:[
{
state:1,
time:"2017-11-11"
},
{
state:2,
time:"2017-11-11"
},
{
state:3,
time:"2017-11-11"
},
],
name:{
val:"都是同一个人"
}
};
var html = template("template-mod",data);
document.getElementById('my-id').innerHTML = html;