前端培訓(xùn)jQuery：模板引擎

　　項(xiàng)目開發(fā)中，經(jīng)常需要將后端服務(wù)器返回的數(shù)據(jù)拼接到HTML元素內(nèi)，再將其顯示到頁面中。例如，將Ajax從服務(wù)器端請求到的數(shù)據(jù)顯示到列表內(nèi)，就可以通過字符串拼接完成。但若一個項(xiàng)目中多處編寫這樣的代碼，代碼會變得復(fù)雜且難以維護(hù)。此時(shí)，可以使用模板引擎將頁面結(jié)構(gòu)與數(shù)據(jù)分離。而art-template因其優(yōu)越的性能成為開發(fā)中最常用的模板引擎之一。本節(jié)將針對art-template的使用進(jìn)行詳細(xì)講解。

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

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

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

　　(1)編寫模板

　　首先編寫模板，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>

　　demo7-3.html

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