腾讯art-template4，即vue后又获一利器
腾讯art-template4，即vue后又获一利器
art-template是一个简约、超快的模板引擎，官方给出的优点及特性是：
1.拥有接近 JavaScript 渲染极限的的性能
2.调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
3.支持 Express、Koa、Webpack
4.支持模板继承与子模板
5.浏览器版本仅 6KB 大小
其中第2点看出来不错哦，支付打断点，其它几个优点见仁见智。
首先了解一下框架工作流程，大致可以分为两步：编辑模板和渲染模板。
编辑模板就是将需要动态生成的DOM抽象成为模板，渲染则是利用渲染函数，把后端返回的数据 填入模板中相应的位置上，生成最终的html串并且回填到html页面的指定位置中。
下面开始学习这旅吧。
1.先去网络或github上去下载art-template.js文件，然后在html或jsp里引入文件即可以使用
2.学习一个框架，从3点开始下手
第一：数据怎么展示
第二：数据怎么提供
第三：数据怎么生效。
2.1 第一：数据怎么展示：
ArtTemplate提供2种语法
1.标准语法或叫做极简语法，使用的是双大括号或者叫“胡子”，推荐使用，看起来简洁
{{if data}}
{{data.name}}
{{/if}}只将数据放到胡子，其它标签安jsp或html语法写
2.原始语法，<%%>
<% if (data) { %>
<%= data.name %>
<% } %>使用jsp的语法，我们知道”<%%>”里是可以写java代码的，可以定义局部变量和java代码语句。把数据和逻辑那块放到<%%>里写，其它按正常的逻辑写，类似写jsp。缺点是看起来不整洁，特别是页面复杂的，优点是拥有强大的逻辑表达能力
3.双大括号或胡子里可以使用的逻辑符包括“.””[]”,”三目运算符”,”||&”,”逻辑运算符”。如下：
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
例子如下：
basic-demo
渲染出来的结果：
1).红色部分是我们特别关注的地方，强调一点，这里的模块指的是用
包裹的部分。胡子和标签都在里面写，脚本视做一个模块。
2).胡子里可以使用指定的操作符，如逻辑判断有运算符，如果不足够，可以使用原始语法，那里逻辑运算比较全面。
3).让渲染出来的元素在页面上生效。
var html = template('test', data);
document.getElementById('content').innerHTML = html;4.条件判断
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
所以取数据和逻辑判断都在胡子里。例子：
basic-demo
结果如下：
看红色部分，以{{if value}}开头，以{{/if}}结尾，中间可以有else if。可以做到java里
if(value){
}else if(value){
}else if(value){
}5.模拟for或foreach逻辑。如上面的例子：
{{each list value i}}
- 第{{i + 1}}门课 ：{{value}}
{{/each}}
6.设置变量：{{set temp = value}}
例如：
basic-demo
7.过滤器
template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};
使用{{value|filter}}
使用类似管道符来传递数据，数据会传递到定义的过滤器函数filter里
helper-demo
自定义过滤器
结果如下
第一种方式是直接使用方式，通过管道符将数据拿到过滤器里，第二种方式是函数方式，我们知道，模板通过 $imports可以访问到模板外部的全局变量与导入的变量，我们可以使用$import直接方式通过template.defaults.imports导入的函数或变量，也可以访问全局的函数或变量，注意是全局的，所以通过$imports可以直接调用方法或变量，所以，有第3个例子，通过$imports模板变量访问了没导入但是是全局的test函数。
art-template.js提供了如下几种内置变量：
1.$data 传入模板的数据，如上数据可以$data.math访问到数学分数是多少
2.$imports外部导入的变量以及全局变量，（重要，重点，重量，重要的事说3遍，还不带重的）
3.print 字符串输出函数，后面可根随机个值，然后将拼接的字符串打印出来，比如如上数据：print
函数：print name "的数学是" math "，英文是" english ",总分是" {{math + english}}
结果如下：
4.include子模板载入函数
5.extend模板继承模板导入函数
6.block 模板块声明函数
第二：数据怎么提供
我们知道js里提供数据常用json格式，数据怎么提供的问题涉及到art-template的2种渲染方式。
第一种直接提供模板名和数据源渲染，再将渲染后的模板页面添加到jsp里某个dom元素里。使用template(“filename”,content)
Filename:模板名，如上面script脚本id，或者单独抽出来的子模板路径，
Content:如果提供的是object，一般当做提供的是json格式数据，那么template方法会渲染模板将以string形势返回渲染后的结果，最张将返回的string添加到dom元素上。
如果 content为string，则编译模板并返回function，
一般使用方式是var html = template('testP', data);然后将返回的字符串html插入到dom元素上document.getElementById('content').innerHTML = html;
第二种。以字符串形势提供模板，调用 compile或者render编译模板，然后将数据提供给模板。注意以字符串形势提供的模板严格来讲并不是”模板“，必需经过编译才行。例如：
var source = ''
+ '{{each list value i}}'
+ '- 索引 {{i + 1}} ：{{value}}
'
+ '{{/each}}'
+ '
';
var data = {
list: ['摄影', '电影', '民谣', '旅行', '吉他']
}
var render = template.compile(source);
var html = render(data);结果：
compile(source, options)编译模板并返回一个渲染函数。先编译再提供数据
或者编译和提供数据放一起
var render = template.render(source,data);
document.getElementById('content').innerHTML = render;
结果同上。
所以：
template(filename, content)
compile(source, options)
render(source, data)
即是提供数据和让数据怎么生效的三种方式。这也解释了第三个问题数据怎么生效。
第三：数据怎么生效
见第二解答。
高级用法include函数，
{{include '模板id'}}
{{include '模板id' data}}
data 数默认值为$data，也可赋值，指定数据源
例子：
结果如下：
模板id为test使用Includ函数包裹了一个模板id为list的模板。虽然显示出来了，但这里有个坑。所以模板都必需写在同一个html或jsp里，不同模板可以写在不 同的