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