jQuery插件和前端常用組件：art-template編寫模板的方法

　　art-template是一款輕量級的JavaScript模板引擎，具有接近JavaScript極限的運行性能、精準(zhǔn)的調(diào)試功能、簡單的語法使用規(guī)則、支持JavaScript的原生語法等特性，使得前后端開發(fā)時更利于團隊協(xié)作，分工更加明確。

　　art-template被托管于GitHub，下載地址是https://github.com/aui/art-template/releases，這里以v4.12.1版本為例講解。解壓下載的art-template-4.12.1.zip后，在使用時僅需將lib目錄下的template-web.js文件引入即可。

　　為了大家更好地理解，下面通過一個案例演示如何利用art-template將Ajax請求到的數(shù)據(jù)顯示到頁面中。

　　art-template編寫模板的方法如下：

　　首先編寫模板，HTML代碼片段如demo7-3.html所示。

　　demo7-3.html

<div id="content"></div>
<script id="tpl" type="text/html">
    <h2>{{title}}</h2>
    <ul>
        {{each list value index}}
            <li>索引：{{index}}, 值：{{value}}</li>
        {{/each}}
    </ul>
</script>

　　上述第1行用于展示模板渲染數(shù)據(jù)后的內(nèi)容，讀者根據(jù)實際情況具體設(shè)置對應(yīng)的HTML元素即可。第3～8行代碼用于在script標(biāo)簽內(nèi)編寫模板，type值要設(shè)置為“text/html”，id用于為模板渲染數(shù)據(jù)時找到對應(yīng)的模板。

　　其中，“{{”和“}}”是art-template標(biāo)準(zhǔn)語法開始和結(jié)束的標(biāo)簽。title與list是渲染模板時傳遞的數(shù)據(jù)對象中的屬性名稱。each用于循環(huán)對象(如list)，value表示屬性值或數(shù)組元素的值，index表示屬性名稱或數(shù)組元素的索引。需要注意的是，each在使用時一定要添加結(jié)束標(biāo)簽，如第7行代碼所示。