JavaScript 模板引擎作為資料與介面分離工作中最重要一環，越來越受開發者關注，模板引擎種類也是五花八門，我就說幾個安全性高、錯誤處理除錯優，執行速度快的有artTemplate(騰訊 14k)、juicer(國外 12k)這倆個，doT除了錯誤處理除錯差以外其他的都和這兩個一樣,他有一個優點是小(4k)，扯遠啦。
art-template 是一個簡約、超快的模板引擎。
它採用作用域預宣告的技術來優化模板渲染速度，從而獲得接近 JavaScript 極限的執行效能，並且同時支援 NodeJS 和瀏覽器。線上速度測試。
我們就講一下講簡潔語法的渲染方式，template(filename, content)根據模板名渲染模板。前提是你已經對artTemplate有所瞭解，
今天我們就講一下陣列渲染的方法
陣列渲染有陣列物件和純陣列兩種形式，我們先說陣列物件，如後端返回我們介面，收到的就是一個陣列。比如：
const res = [
{"name":"小明", "age":16, "marry":"單身"},
{"name":"小花","age":15, "marry":"有男朋友"},
{"name":"小胖","age":15, "marry":"有女朋友"},
{"name":"小麗","age":15, "marry":"單身"}
];
用artTemplate有個好處就是除了你的資料需要重組，其他的完全可以拿來直接用。如下
html
<div id="person"></div>
js
<script>
const res = [
{"name":"小明", "age":16, "marry":"單身"},
{"name":"小花","age":15, "marry":"有男朋友"},
{"name":"小胖","age":15, "marry":"有女朋友"},
{"name":"小麗","age":15, "marry":"單身"}
];
document.getElementById('person').innerHTML = template('personTemp', {data:res}); // 其實這裡是把陣列轉為物件的形式傳進的
</scrtip>
template
<script type="text/html" id="personTemp">
//寫法一
{{each data}}
<li>{{$index}}索引 我叫{{$value.name}}，今年{{$value.age}}歲，{{$value.marry}}</li>
{{/each}}
//寫法二
{{each data item index}}
<li>{{index}}索引 我叫{{item.name}}，今年{{item.age}}歲，{{item.marry}}</li>
{{/each}}
</script>
下面在看陣列渲染，這是一個陣列
const res = ['文藝', '部落格', '攝影', '電影', '民謠', '旅行', '吉他'];
html
<div id="interest"></div>
js
<script>
const res = ['文藝', '部落格', '攝影', '電影', '民謠', '旅行', '吉他'];
document.getElementById('interest').innerHTML = template('interestTemp', {data:res}); // 其實這裡是把陣列轉為物件的形式傳進的
</scrtip>
template
<script type="text/html" id="interestTemp">
//寫法一
{{each data}}
<li>{{$index}}索引 我喜歡{{$value.name}}</li>
{{/each}}
//寫法二
{{each data item index}}
<li>{{index}}索引 我喜歡{{item}}</li>
{{/each}}
</script>
就說這麼多吧，其實這種模板用著挺簡單的很順手。