一、一句話介紹
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 | 過濾器名稱 參數}} -- 有一個以上參數的過濾器調用方式