一、简介
ArtTemplate是腾讯开发的一款使用方便、性能卓越javascript模板引擎,其渲染效率极其快。ArtTemplate的库分为两种,一个是template.js,这个是简单的语法版本。另一个是template-native.js，是原生的语法版本;,两个库的语法不可混用,否则会出错。本文主要讲解简单的语法版本。
二、原理
虽然每个引擎从模板语法、语法解析、变量赋值、字符串拼接的实现方式各有所不同，但关键的渲染原理仍然是动态执行 javascript 字符串。template.js，在上述模板引擎实现原理中，因为要对模板变量进行赋值，所以每次渲染都需要动态编译 javascript 字符串完成变量赋值。而 artTemplate 的编译赋值过程却是在渲染之前完成的，这种方式称之为“预编译”。具体可参考（https://cdc.tencent.com/2012/06/15/%E9%AB%98%E6%80%A7%E8%83%BDjavascript%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/）。
三、特性
1.性能卓越,执行速度通常是Mustache与tmpl的20多倍(性能测试)
2.支持运行时调试,可精确定位异常模板所在语句(演示)
3.对NodeJS Express友好支持
4.安全,默认对输出进行转义,在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)
5.支持include语句,可导入定义的其它模块
6.可在浏览器端实现按路径加载模板(详情)
7.支持预编译,可将模板转换成为非常精简的js文件
8.模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选
9.支持所有流行的浏览器
10.丰富的自定义配置
11.支持数据过滤
12.异常捕获功能
四、使用方法（简介版语法）
1.if--else语法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>if -- else</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../../static/template.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/html" id="test">
{{if isAdmin}}
姓名：<span>{{admin.name}}</span><br>
性别：<span>{{admin.sex}}</span><br>
职务：<span>{{admin.position}}</span>
{{else}}
姓名：<span>{{staff.name}}</span><br>
性别：<span>{{staff.sex}}</span><br>
职务：<span>{{staff.position}}</span>
{{/if}}
</script>
<script type="text/javascript">
data = {
isAdmin: true,
admin: {name: '张三', sex: '男', position: "部门经理"},
staff: {name: '李四', sex: '男', position: "普通员工"}
}
var html = template('test',data);
document.getElementById("app").innerHTML = html;
</script>
</body>
</html>2.each
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>each</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../../static/template.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/html" id="test">
{{if isAdmin}}
<h1>{{title}}</h1>
{{each list as value index}}
<ul>
<li>{{index + 1}} : {{value}}</li>
</ul>
{{/each}}
{{/if}}
</script>
<script type="text/javascript">
var data = {
isAdmin:true,
title:'球类运动',
list:['足球','篮球','排球','棒球','网球','羽毛球','乒乓球']
}
var html = template('test',data);
document.getElementById('app').innerHTML = html;
</script>
</body>
</html>3.转义
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>转义</title>
<script type="text/javascript" src="../static/template.js"></script>
</head>
<body>
<h1>不转义HTML</h1>
<div id="content"></div>
<script type="text/html" id="test">
<p>不转义：{{#value}}</p>
<p>默认转义：{{value}}</p>
</script>
<script type="text/javascript">
var data = {
value:'<span style="color: green">hello world</span>'
};
var html = template('test',data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>4.嵌套
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>include</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../../static/template.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/html" id="topicPart">
<h1>题目：{{topic}}</h1>
<ul>
{{each optionList as value index}}
<li>{{value.ind}} . {{value.val}}</li>
{{/each}}
</ul>
{{include 'anserPart'}}
</script>
<script type="text/html" id = "anserPart">
<span>参考答案：{{anser}}</span>
</script>
<script type="text/javascript">
var data = {
topic:'1+1=?',
optionList:[
{ind:'A',val:2},
{ind:'B',val:1},
{ind:'C',val:3},
{ind:'D',val:4},
],
anser:"A"
}
var html = template("topicPart",data);
document.getElementById("app").innerHTML = html;
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>test template</title>
<script type="text/javascript" src="../static/template.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/html" id="main">
<ul>
{{each list}}
<li>{{$value}}</li>
{{/each}}
</ul>
</script>
<script type="text/html" id="test">
<div>
<ul>
{{each person}}
<li>{{$value.name}}</li>
{{/each}}
</ul>
{{include 'main' a}}
</div>
</script>
<script type="text/javascript">
var data = {
person:[
{name:"jack",age:18,sex:1},
{name:"tom",age:19,sex:0},
{name:"jerry",age:20,sex:0},
{name:"kid",age:21,sex:1},
{name:"jade",age:22,sex:0},
{name:"lrving",age:23,sex:1},
],
a:{
list:['足球','篮球','排球','棒球','网球','羽毛球','乒乓球']
}
};
var html = template('test',data);
document.getElementById('app').innerHTML = html;
</script>
</body>
</html>5.自定义函数
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>自定义函数</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../../static/template.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/html" id="test">
{{if isAdmin}}
姓名：<span>{{admin.name}}</span><br>
性别：<span>{{getSex(admin.sex)}}</span><br>
职务：<span>{{admin.position}}</span>
{{else}}
姓名：<span>{{staff.name}}</span><br>
性别：<span>{{getSex(staff.sex)}}</span><br>
职务：<span>{{staff.position}}</span>
{{/if}}
</script>
<script type="text/javascript">
template.helper('getSex',function (sex) {
if(1 == sex){
return '男';
}else if(0 == sex){
return '女';
}
})
data = {
isAdmin: true,
admin: {name: '张三', sex: '1', position: "部门经理"},
staff: {name: '李四', sex: '0', position: "普通员工"}
}
var html = template('test',data);
document.getElementById("app").innerHTML = html;
</script>
</body>
</html>五、总结
这里只是简单的介绍了ArtTemplate的基本用法，更深入的用法，希望各位在使用的过程中，进行深入的学习，下一篇文章，会介绍阿里开发的javaScript引擎模板Velocity。