artTemplate模板引擎

1. 什么是模板引擎

模板引擎简单的理解就是：按照某种规则处理数据并显示，而此规则就是模板，按照该模板将数据传入，不用关于数据如何处理的，只需要关心数据的显示即可。模板引擎不关心内容，只关心规则。此外最开始的模板引擎出现于服务器，最后才不断引入到了客户端

2.模板引擎理解

1. 最初没有模板引擎时的做法

   当有大量数据的时候

   var joson = [{
       uname: 'zt',
       age: 19,
       sex: 'f'
   },{
       uname: 'zztt',
       age: 20,
       sex: 'f'
   },{
       uname: 'zii',
       age: 19,
       sex: 'm'
   }]

   将数据渲染到页面上可以采取以下的做法：

   1. 字符串拼接：

      for (let i = 0; i < joson.length; i++) {
          var str = '
      '+joson[i].uname+'
      \n' +
              '
      '+joson[i].age+'
      \n' +
              '
      '+joson[i].sex+'
      ';
          document.querySelector('#div').innerHTML = str;
      }

   2. 通过创建DOM对象的方式

      let roor = document.querySelector('#root');
      for (let i = 0; i < joson.length; i++) {
          let div = document.createElement("div");
          let span = document.createElement('span');
          span.innerHTML = joson[i].uname + '   ' + joson[i].age + joson[i].sex;
          div.appendChild(span);
          roor.appendChild(div);
              }

      当数据量增加的时候，如果采取以上的方式进行数据的显示，务必会造成代码的冗余以及代码可维护性较差的情况的产生。因此为了解决这一方面，通过自定义语法规则简化代码书写

2. 简单的模板引擎实现

   function fn(string) {
       let prams = [].slice.call(arguments,1);// 由于arguments为伪数组，不能使用数组方法slice，但是可以改变数组的this指向，使其指向arguments并获取到除了第一个参数以外的其他参数
       var str = string.replace(/{(\d+)}/g,function () {// 全局匹配搜索替换，只要匹配到一项，就会执行后面的函数，而此时的arguments是匹配结果（）里面的值，也即0，1，2，作为索引获取到需替换的值
           let index = arguments[1];
           return prams[index];
       });
       return str;
   }
   
   console.log(fn('1,{0},{1},{2}', 2, 3, 4, 5));// 1,2,3,4

   从以上可以看出，模板引擎就是对数据的替换，按照某种规则：{}去替换相应的数据。

3.artTemplate模板引擎

腾讯的artTemplate，地址：jquery版本:https://www.jq22.com/jquery-info1097，github:https://github.com/lhywork/artTemplate

art-template 是一个简约、超快的模板引擎。它采用作用域 预声明 的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器

速度测试：

模板引擎不关心内容，只认识{{}}

1. 浏览器

1. 基本使用

   1. 法一：下载art-template

      1. 引入template-web.js

   2. 法二：npm install art-template --save 默认下载在node_module文件夹下

      1. 引入：node_modules/art-template/lib/template-web.js

   3. 定义模板

   4. 使用模板

2. 语法：

   art-template支持简洁的写法以及原生的写法，用{{}}是简洁的写法

   1. 变量

      {{a +-/* a}}
      {{ a || b}}
      {{obj.uname}}

   2. 条件语句

      {{if a}}...{{else if b}}...{{/if}}

   3. 循环语句

      // art-template 3.0
      {{each target as value i}}...{{/each}};// 其中value为循环项的当前项的值，i为当前项的索引
      // art-template 4.0
      // 4.0对3.0的内容进行了简写，但是相应的能实现的逻辑部分也在减少，但是补救的方式可以通过原生的写法进一步增加逻辑部分的书写，其他value与index默认为当前循环项的值以及索引
      {{each target}}
      {{$value}} 
      {{$index}}
      {{/each}}

   4. include嵌套模板

   5. 转义/不转义

      art-template默认对于传入的标签字符串默认转义为默认标签，但是在特定情况下，只需要标签字符串，而不需要转移之后的标签内容。

      // art-template 4
      {{@content}};// 其中@表示该字符串不转义，显示默认的字符串内容
      // art-template 3
      {{#content}};// 其中#表示该字符串不转义，显示默认的字符串内容
      {{content}};// 默认转义，会被引擎解析为标签内容进行显示

   6. 外部模板引入

      由于Js不支持引入外部文件的形式，因此可以采取引入外部模板的方式来构建字符串。但是此方式只适用于所构建的字符串的规模较小的情况下，规模太大，模板维护性较差

2.NodeJS

1. 安装

   npm install art-template --save

2. 使用

   // 1. 引入art-template模块
   let artTemplate = require('art-template');
   // 2. 引入文件操作fs模块
   let fs = require('fs');
   
   // 3. 读取文件
   fs.readFile('../html/practice_02.html',function (error,data) {
       // 4. 构建数据 传入数据需要是对象
       let source = {
           uname: 'zt',
           age: 19,
           title: 'Person information'
       }
       // 4. 构建字符串 render第一个参数为字符串，而readFile获取的数据结果为二进制数据，因此需要转换为字符串，第二个参数是传入的数据
       let str = artTemplate.render(data.toString(),source);// 返回渲染结果
       console.log(str);
   })

   由于NodeJS环境中没有页面元素，也即不能像浏览器中使用模板引擎一样采用\