關于騰訊的前端模闆art-template，斷斷續續地用過(維護老項目使用的比較多)，有時用過了，當時還記得住，過一段時間，有的細節容易忘記，還需不斷去百度找文檔，是以在此，自己根據使用過的情況，簡單總結記錄一下，純屬友善自己查找。說明：本人主要使用的是art-template.js 簡潔版的文法(使用中發現，新版本和老版本有的地方寫法略有不同)。
一、art-template介紹
art-template 是一個簡約、超快的模闆引擎。它采用作用域預聲明的技術來優化模闆渲染速度，進而獲得接近 JavaScript 極限的運作性能，并且同時支援 NodeJS 和浏覽器。
二、下載下傳最新版的art-template
1、下載下傳好以後，引入art-template.js檔案
2、編寫HTML模闆，使用一個type=”text/html”的script标簽存放模闆，{{}}是art-template擷取資料的文法，如：
{{ data.name}}
3、在js中讀到資料後，向模闆插入資料，并輸出到頁面，如
var data = {
name:"我是art-template"
};
var html = template("template-mod",data);
document.getElementById('my-id').innerHTML = html;
那麼頁面就可以顯示出“name”的内容了。
四、art-template循環周遊的使用
1、文法：
{{each data}}
索引值：{{$index}}
值：{{$value.name}}
{{/each}}
或者這樣寫法
{{each data value index}}
索引值：{{index}}
值：{{value.name}}
{{/each}}
在老版本中，寫法如下
{{each data as value index}}
2、循環具體寫法
{{each list}}
{{$index + 1}}、
名字：{{$value.name}}
年齡：{{$value.age}}
{{/each}}
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;
3、嵌套循環的寫法：老版本，在chrome中暫時發現一個問題，下面each value.name nameObj h這句代碼中value.name nameObj之間有兩個空格才能渲染。
{{each list as value index}}
{{index + 1}}、
{{each value.name nameObj h}}
名字{{h}}：{{nameObj}}
{{/each}}
{{/each}}
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;
五、art-template流程控制語句寫法
{{if flag}}
{{if state == 1}}
失敗
{{else if state == 2}}
成功
{{else}}
交易完成
{{/if}}
{{else}}
沒有資料
{{/if}}
var data = {
flag:1,
state:1
};
var html = template("template-mod",data);
document.getElementById('my-id').innerHTML = html;
六、art-template自定義過濾器方法的使用
老版本的方式我們可以通過template.helper(name,fnCallBack)注冊自定義方法，然後在模闆{{}}調用，最新的版本中使用template.defaults.imports.name = function(state){}
{{each list as value index}}
{{index + 1}}、
時間：{{value.time}}
狀态：{{handle(value.state)}}
{{/each}}
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;
七、template.compile(source, options)函數的使用
編譯模闆并傳回一個渲染函數。我們可以把模闆可以直接寫在JS中，再編譯渲染，如
var source = '
- '
+ '{{each list value index}}'
+ '
索引 {{index + 1}} ：{{value}}'
+ '{{/each}}'
+ '
';
var render = template.compile(source);
var html = render({list: ['攝影', '電影', '民謠', '旅行', '吉他']});
document.getElementById('my-id').innerHTML = html;
八、引用子模闆
{{each list as value index}}
{{index + 1}}、
時間：{{value.time}}
狀态：{{value.state}}
姓名：{{include 'children-template1' name}}
模闆名字：{{include 'children-template2' data}}
{{/each}}
{{val}}
{{tem}}
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;