一：什么是art-template
- art-template 是一個(gè)簡(jiǎn)約柴墩、超快的模板引擎。它采用作用域預(yù)聲明的技術(shù)來(lái)優(yōu)化模板渲染速度豫喧，從而獲得接近 JavaScript 極限的運(yùn)行性能靴跛，并且同時(shí)支持 NodeJS 和瀏覽器。使用art-template也便于維護(hù)代碼羞延，以前我們渲染數(shù)據(jù)是以模板字符串的形式在js文件中寫入的html內(nèi)容恤浪，如果html內(nèi)容需要修改，我們需要在js中修改肴楷。而用了模板引擎以后水由，我們只需要html文件中修改html內(nèi)容。還有使用了模板引擎以后DOM操作的效率也會(huì)更高一點(diǎn)赛蔫。
二：art-template特性
- 擁有接近 JavaScript 渲染極限的的性能
- 調(diào)試友好：語(yǔ)法砂客、運(yùn)行時(shí)錯(cuò)誤日志精確到模板所在行；支持在模板文件上打斷點(diǎn)(Webpack Loader)
- 支持 Express呵恢、Koa鞠值、Webpack
- 支持模板繼承與子模板
- 瀏覽器版本僅 6KB 大小
三：art-template與其他模板引擎運(yùn)行速度對(duì)比
模板引擎運(yùn)行速度對(duì)比
四：關(guān)于art-template的一些學(xué)習(xí)網(wǎng)站
https://github.com/aui/art-template（art-template完整文檔）
https://aui.github.io/art-template/zh-cn/index.html（art-template中文文檔）
五：安裝art-template，有以下2種方式：
- 在命令行中使用如下命令
npm install art-template --save
- 也可以在瀏覽器中實(shí)時(shí)編譯渗钉，進(jìn)入鏈接ctrl+s保存文件至項(xiàng)目目錄中：lib/template-web.js（gzip: 6kb這個(gè)源碼是壓縮過的）
六：art-template語(yǔ)法
- art-template 支持標(biāo)準(zhǔn)語(yǔ)法與原始語(yǔ)法彤恶。標(biāo)準(zhǔn)語(yǔ)法可以讓模板易讀寫，而原始語(yǔ)法擁有強(qiáng)大的邏輯表達(dá)能力鳄橘。（例如再使用循環(huán)時(shí)声离，標(biāo)準(zhǔn)語(yǔ)法只能使用each循環(huán)遍歷，而原始語(yǔ)法還可以使用for瘫怜，while等循環(huán)）
- 標(biāo)準(zhǔn)語(yǔ)法支持基本模板語(yǔ)法以及基本 JavaScript 表達(dá)式术徊；原始語(yǔ)法支持任意 JavaScript 語(yǔ)句，這和 EJS 一樣鲸湃。
標(biāo)準(zhǔn)語(yǔ)法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
原始語(yǔ)法
<% 語(yǔ)句 %>
<% for(var i=0;i<list.length;i++)%{> <%}>
<%= 表達(dá)式 %>
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
<% %>與<%= %>這個(gè)的區(qū)別需要注意<% %>這個(gè)跟語(yǔ)句赠涮，若要跟表達(dá)式，則使用<%= %>
七： 定義模板
- 因?yàn)闉g覽器不支持文件系統(tǒng)暗挑，所以
template(filename, data)不支持傳入文件路徑笋除，它內(nèi)部使用document.getElementById(filename).innerHTML來(lái)獲取模板，我們則使用<script id="tpl-user" type="text/html"></script>定義模板炸裆，如下所示：
<script id="tpl-user" type="text/html">
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
</script>
八：art-template使用示例：
兩種定義模板方式用一個(gè)就可以了
<div class="span_2 list_box">
</div>
<!-- 定義模板：原始語(yǔ)法 --><!---下面的list為js文件中渲染數(shù)據(jù)對(duì)象的屬性名垃它，curr為遍歷數(shù)組元素對(duì)象時(shí)當(dāng)前屬性值，i為當(dāng)前索引-->
<script type="text/html" id="list_temp2">
<% for (var i = 0, len = list.length; i < len; i++) { var curr=list[i]; %>
<div class="col_1_of_single1 span_1_of_single1">
<a href="/html/single.html">
<img src="<%= curr.img_url %>" class="img-responsive" alt=""/>
<h3><%= curr.title %></h3>
<p><%= curr.desc %></p>
<h4><%= curr.price %></h4>
</a>
</div>
<% } %>
</script>
<!-- 定義模板：標(biāo)準(zhǔn)語(yǔ)法（簡(jiǎn)潔語(yǔ)法） -->
<script type="text/html" id="list_temp">
<!--這個(gè)list是js渲染數(shù)據(jù)對(duì)象的屬性名，curr是遍歷數(shù)組元素時(shí)用于代替list的嗤瞎，index是索引墙歪，即curr【index】為當(dāng)前值代替list-->
{{ each list curr index }}
<div class="col_1_of_single1 span_1_of_single1">
<a href="/html/single.html">
<img src="{{ curr.img_url2 }}" class="img-responsive" alt=""/>
<h3>{{ curr.title }}</h3>
<p>{{ curr.desc }}</p>
<h4>{{ curr.price }}</h4>
</a>
</div>
{{ /each }}
</script>
<!--js文件中使用requirejs引入需要的模塊包括art-template模塊（取的名字為template，這個(gè)模塊是在config文件中配置好的一個(gè)art-template短名稱）贝奇，rap2模擬假數(shù)據(jù)虹菲，jquery獲取假數(shù)據(jù)以及將數(shù)據(jù)渲染至html文件中的.list_box中-->
require(["config"], function(){
require(["jquery", "template", "header", "footer"], function($, template, header){
<!--jquery中方法動(dòng)態(tài)獲取列表頁(yè)面數(shù)據(jù)（模擬假數(shù)據(jù)）-->
$.getJSON("http://rap2api.taobao.org/app/mock/25320/api/list", function(data){
<!--這個(gè)template是art-templatede中有的函數(shù)，他有2個(gè)參數(shù)掉瞳，第一個(gè)是script標(biāo)簽的id毕源，第二個(gè)參數(shù)是模板中需要循環(huán)遍歷的對(duì)象和其值-->
const html = template("list_temp2", {list : data.res_body.data});
$(".list_box").html(html);
})
});
});
