第四章：模板引擎

第四章：模板引擎

4.1：模板引擎的基本概念

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

  var rows = [];
  $.each(res.data, function (i, item) {
      var str = '<li class="list-group-item">
      				<span class="badge" style="background-color: #F0AD4E;">评论时间：' + item.time + '</span>
      				<span class="badge" style="background-color: #5BC0DE;">评论人：' + item.username + '</span>'
      		   item.content + '</li>';
      rows.push(str);
  })
  $('#cmt-list').empty().append(rows.join(''));
  

  上述代码是通过字符串拼接的形式，来渲染UI结构。如果UI结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。一旦需求发生改变，修改起来也非常麻烦。

• 什么是模板引擎

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

• 模板引擎的好处

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

4.2：art-template模板引擎

• art-template简介

  art-template是一个简约、超快的模板引擎。中文官网首页为http://aui.github.io/art-template/zh-cn/index.html。

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

  1. 导入art-template
  2. 定义数据
  3. 定义模板
  4. 调用template函数
  5. 渲染HTML页面

• art-template标准语法

  1. 什么是标准语法

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

  2. 输出

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

     • 变量输出：{{ value }}
     • 对象属性输出：{{ obj.key }}或{{ obj['key'] }}
     • 三元表达式输出：{{ a ? b : c }}
     • 逻辑输出：{{ a | b }}
     • 加减乘除表达式输出：{{ a + b }}

  3. 原文输出

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

     {{@ value}}
     

  4. 条件输出

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

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

  5. 循环输出

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

     {{ each arr }}
     	{{ $index }}  {{ $value }}
     {{ /each }}
     

  6. 过滤器
     

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

     {{ value | filterName }}
     

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

     template.defaults.imports.filterName = function(value) {}
     

4.3：模板引擎的实现原理

• 正则与字符串操作

  1. 基本语法

     exec()函数用于检索字符串中的正则表达式的匹配，如果字符串中有匹配的值，则返回该匹配值，否则返回null。

     RegExpObject.exec(String)
     

  2. 分组

     正则表达式中()包起来的内容表示一个分组，可以通过分组来提取自己想要的内容，示例代码如下：

      var str = '<div>我是{{name}}</div>';
     var pattern = /{{([a-zA-Z]+)}}/;
     var result = pattern.exec(str);
     // ['{{name}}', 'name', index: 7, input: '<div>我是{{name}}</div>', groups: undefined]
     console.log(result);				
     

  3. 字符串的replace函数

     replace()函数用于在字符串中用一些字符替换另一些字符。语法格式如下：

     var result = '123456'.replace('123', 'abc');		// abc456
     

• 实现简易模板引擎

  1. 定义模板

     <div id="user-box"></div>
     <script type="text/html" id="tpl-user">
         <div>姓名： {{name}}</div>
         <div>年龄： {{age}}</div>
         <div>性别： {{gender}}</div>
         <div>住址： {{address}}</div>
     </script>
     
     <script>
         var data = {name: 'zs', age: 20, gender: '男', address: '北京顺义马坡'}
         var htmlStr = template('tpl-user', data);
         document.getElementById('user-box').innerHTML = htmlStr;
     </script>
     

  2. 实现模板引擎

     function template(id, data) {
         var str = document.getElementById(id).innerHTML;
         var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
         var pattResult = null;
         while (pattResult = pattern.exec(str)) {
             str = str.replace(pattResult[0], data[pattResult[1]]);
         }
         return str;
     }