art-template模板引擎

1、模板引擎的基本概念

1.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结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦。

1.2、什么是模板引擎

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

1.3、模板引擎的好处

减少了字符串的拼接操作
使代码结构更清晰
使代码更易于阅读与维护

2、art-template简介

art-template 是一个简约、超快的模板引擎。中文官网首页为 art-template

3、art-template的安装

在浏览器中访问安装 - art-template 页面，找到下载链接后，鼠标右键，选择“链接另存为”，将 art-template 下载到本地，然后，通过 <script> 标签加载到网页上进行使用。

4、art-template模板引擎的基本使用

（1）使用传统方式渲染UI结构

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/jquery.js"></script>
</head>

<body>
  <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 () {
      $('#name').html(data.name)
      $('#title').html(data.title)
      $('#age').html(data.age)
      $('#isVIP').html(data.isVIP)
      $('#regTime').html(data.regTime)

      var rows = []
      $.each(data.hobby, function (i, item) {
        rows.push('<li>' + item + '</li>')
      })
      $('#hobby').html(rows.join(''))
    })
  </script>
</body>

</html>

（2） art-template的使用步骤

导入 art-template
定义数据
定义模板
调用 template 函数
渲染HTML结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1. 导入模板引擎 -->
    <!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
    <script src="./lib/template-web.js"></script>
    <script src="./lib/jquery.js"></script>
</head>

<body>

    <div id="container"></div>

    <!-- 3. 定义模板 -->
    <!-- 3.1 模板的 HTML 结构，必须定义到 script 中 -->
    <script type="text/html" id="tpl-user">
        <h1>{{name}} ------ {{age}}</h1>
        {{@ test}}

        <div>
            {{if flag === 0}}
            flag的值是0
            {{else if flag === 1}}
            flag的值是1
            {{/if}}
        </div>

        <ul>
            {{each hobby}}
            <li>索引是:{{$index}}，循环项是:{{$value}}</li>
            {{/each}}
        </ul>

        <h3>{{regTime | dateFormat}}</h3>
    </script>

    <script>
        // 定义处理时间的过滤器
        template.defaults.imports.dateFormat = function (date) {
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()

            return y + '-' + m + '-' + d
        }


        // 2. 定义需要渲染的数据
        var data = {
            name: 'zs',
            age: 20,
            test: '<h3>测试原文输出</h3>',
            flag: 1,
            hobby: ['吃饭', '睡觉', '写代码'],
            regTime: new Date()
        }

        // 4. 调用 template 函数
        var htmlStr = template('tpl-user', data)
        console.log(htmlStr)
        // 5. 渲染HTML结构
        $('#container').html(htmlStr)
    </script>
</body>

</html>

5、art-template标准语法

5.1、什么是标准语法

art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行变量输出，或循环数组等操作，这种 {{ }} 语法在 art-template 中被称为标准语法。

5.2、标准语法 - 输出

（1）{{value}}

（2）{{obj.key}}

（3）{{obj['key']}}

（4）{{a ? b : c}}

（5）{{a || b}}

（6）{{a + b}}

在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

5.3、标准语法 – 原文输出

{{@ value }}

如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。

5.4、标准语法 – 条件输出

如果要实现条件输出，则可以在 {{ }} 中使用 if … else if … /if 的方式，进行按需输出。

{{if value}} 按需输出的内容 {{/if}}

{{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}

5.5、标准语法 – 循环输出

如果要实现循环输出，则可以在 {{ }} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问。

{{each arr}}

{{$index}} {{$value}}

{{/each}}

5.6、标准语法 – 过滤器

过滤器的本质，就是一个 function 处理函数。

{{value | filterName}}

过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

定义过滤器的基本语法如下：

template.defaults.imports.filterName = function(value){/*return处理的结果*/}

5.7、案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1. 导入模板引擎 -->
    <!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
    <script src="./lib/template-web.js"></script>
    <script src="./lib/jquery.js"></script>
</head>

<body>

    <div id="container"></div>

    <!-- 3. 定义模板 -->
    <!-- 3.1 模板的 HTML 结构，必须定义到 script 中 -->
    <script type="text/html" id="tpl-user">
        <h1>{{name}} ------ {{age}}</h1>
        {{@ test}}

        <div>
            {{if flag === 0}}
            flag的值是0
            {{else if flag === 1}}
            flag的值是1
            {{/if}}
        </div>

        <ul>
            {{each hobby}}
            <li>索引是:{{$index}}，循环项是:{{$value}}</li>
            {{/each}}
        </ul>

        <h3>{{regTime | dateFormat}}</h3>
    </script>

    <script>
        // 定义处理时间的过滤器
        template.defaults.imports.dateFormat = function (date) {
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()

            return y + '-' + m + '-' + d
        }


        // 2. 定义需要渲染的数据
        var data = {
            name: 'zs',
            age: 20,
            test: '<h3>测试原文输出</h3>',
            flag: 1,
            hobby: ['吃饭', '睡觉', '写代码'],
            regTime: new Date()
        }

        // 4. 调用 template 函数
        var htmlStr = template('tpl-user', data)
        console.log(htmlStr)
        // 5. 渲染HTML结构
        $('#container').html(htmlStr)
    </script>
</body>

</html>