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

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

　　art-template是一款輕量級(jí)的JavaScript模板引擎，具有接近JavaScript極限的運(yùn)行性能、精準(zhǔn)的調(diào)試性能、簡(jiǎn)單的語(yǔ)法使用規(guī)則、支持JavaScript的原生語(yǔ)法等特性，使得前后端開(kāi)發(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文件引入即可。

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

　　(1)編寫(xiě)模板

　　首先編寫(xiě)模板，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è)置對(duì)應(yīng)的HTML元素即可。第3～8行代碼用于在script標(biāo)簽內(nèi)編寫(xiě)模板，type值要設(shè)置為“text/html”，id用于為模板渲染數(shù)據(jù)時(shí)找到對(duì)應(yīng)的模板。