artTemplate前端模板引擎使用说明
一、一句话介绍
artTemplate是新一代的高性能JavaScript模板引擎
二、插件官网
https://aui.github.io/art-template/
三、插件下载
完整版：https://github.com/aui/art-template
浏览器版：https://github.com/aui/art-template/tree/master/lib
四、简单使用（浏览器版）
1. 引入template-web.js
<script type="text/javascript" src="template-web.js"></script>2. 定义数据结果渲染区
<div id="content"><div>3. 定义数据模板
使用一个type="text/html"的script标签定义数据存放模板
<script id="data-tpl" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>4. 渲染数据
var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('data-tpl', data);
document.getElementById('content').innerHTML = html;五、artTemplate基础语法（浏览器版）
1. 变量输出
{{value}} -- 输出单个变量
{{data.key}} -- 输出对象中的某个属性
{{data['key']}} -- 输出数组中的某个属性
{{a ? b : c}} -- 三目运算
{{a || b}} -- 为某个变量设置默认值b
{{a + b}} -- 表达式运算
{{@ value }} -- 原样输出（变量前加@符号）
2. 条件判断
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
3. 循环遍历
形式一（默认key和value）
{{each target}}
{{$index}} {{$value}}
{{/each}}
形式二（自定义key和value）
{{each target val key}}...{{/each}}
4. 引入子模板
-- 子模板的默认变量为data
{{include './header.art'}}
-- 向子模板传递自定义变量
{{include './header.art' data}}
注意：默认情况下，子模板中的数据变量名为data。标准语法不支持对象和数组的声明，只支持引用变量。但是，原始语法没有此限制。
5. 自定义过滤器
第一步：注册过滤器
template.defaults.imports.dateFormat = function(value, format) {...};
template.defaults.imports.timestamp = function(value) {...};
注意：过滤器至少需要一个参数，且第一个参数表示原始变量值，过滤器最后必须要return一个返回值。
第二步：使用过滤器
{{value | 过滤器名称}} -- 只有一个参数的过滤器调用方式
{{value | 过滤器名称 参数}} -- 有一个以上参数的过滤器调用方式