【Ajax】模板引擎

一、模板引擎的基本概念

1. • 渲染UI结构时遇到的问题

var rows = [] //遍历空数组
$.each(res.data, function (i, item) { // 循环拼接字符串
    rows.push('<li class="list-group-item">'+ item.content +'<span class="badge cmt-date">评论时间：'+ item.time +'</span><span class="badge cmt-person">评论人：'+ item.username +'</span></li>')  // 字符串拼接过程
})
$('#cmt-list').empty().append(rows.join('')) // 渲染列表的UI结构

上述代码是通过字符串拼接的形式，来渲染UI结构。

如果UI结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦。

解决方法：模板引擎

2. 什么是模板引擎

模板引擎可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。

3. 模板引擎的好处

减少了字符串的拼接操作

使代码结构更清晰

使代码更易于阅读与维护

二、art-template模板引擎

1. • art-template简介

art-template 是一个简约、超快的模板引擎。

中文官网首页为 http://aui.github.io/art-template/zh-cn/index.html

2. art-template的安装

在浏览器中访问 http://aui.github.io/art-template/zh-cn/docs/installation.html 页面，找到下载链接后，鼠标右键，选择“链接另存为”，将 art-template 下载到本地，然后，通过 <script> 标签加载到网页上进行使用。

3. art-template模板引擎的基本使用

3.1 使用传统方式渲染UI结构

  <script src="./lib/jquery.js"></script>

  <div id="title"></div>
  <div>姓名：<span id="name"></span></div>
  <div>年龄：<span id="age"></span></div>
  <div>会员：<span id="isVIP"></span></div>
  <div>注册时间：<span id="regTime"></span></div>
  <div>爱好：
    <ul id="hobby">
      <li>爱好1</li>
      <li>爱好2</li>
    </ul>
  </div>

  <script>
    var data = {
      title: '<h3>用户信息</h3>',
      name: 'zs',
      age: 20,
      isVIP: true,
      regTime: new Date(),
      hobby: ['吃饭', '睡觉', '打豆豆']
    }


    $(function () {
      $(