jQuery插件和前端常用组件：art-template编写模板的方法

　　art-template是一款轻量级的JavaScript模板引擎，具有接近JavaScript极限的运行性能、精准的调试功能、简单的语法使用规则、支持JavaScript的原生语法等特性，使得前后端开发时更利于团队协作，分工更加明确。

　　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请求到的数据显示到页面中。

　　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行用于展示模板渲染数据后的内容，读者根据实际情况具体设置对应的HTML元素即可。第3～8行代码用于在script标签内编写模板，type值要设置为“text/html”，id用于为模板渲染数据时找到对应的模板。

　　其中，“{{”和“}}”是art-template标准语法开始和结束的标签。title与list是渲染模板时传递的数据对象中的属性名称。each用于循环对象(如list)，value表示属性值或数组元素的值，index表示属性名称或数组元素的索引。需要注意的是，each在使用时一定要添加结束标签，如第7行代码所示。