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

　　art-template是一款輕量級的JavaScript模板引擎，具有接近JavaScript極限的運行性能、精準的調試功能、簡單的語法使用規(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ù)后的內容，讀者根據(jù)實際情況具體設置對應的HTML元素即可。第3～8行代碼用于在script標簽內編寫模板，type值要設置為“text/html”，id用于為模板渲染數(shù)據(jù)時找到對應的模板。

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