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 = '<div><span>'+joson[i].uname+'</span></div>\n' +
              '<div><span>'+joson[i].age+'</span></div>\n' +
              '<div><span>'+joson[i].sex+'</span></div>';
          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. 定义模板

      <script type="text/template" id="test"> // 添加id 作为之后使用时引入的标记
              {{if age}} // if条件句
              <div>{{uname}}</div>// 变量需要用{{}}包围
              <span>{{sex}}</span>
              {{/if}}
          </script>
      

   4. 使用模板

        <script type="text/javascript">
              window.addEventListener('load',function () {
            // 传入的数据必须是对象
                 let data = {
                      uname: 'zt',
                      age: 19,
                      sex: 'f'
                  };
            // 第一个参数是模板id 第二个参数是需要传入的对象数据，返回转换后的字符串
                  var html = template('test',data);
                  document.querySelector('div').innerHTML = html;
              })
          </script>
      

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嵌套模板

      <script type="text/template" id="test"> // 添加id 作为之后使用时引入的标记
              {{if age}} // if条件句
              <div>{{uname}}</div>// 变量需要用{{}}包围
              <span>{{sex}}</span>
              {{/if}}
              {{include test2}};// test2为需要引入的模板的id// 类似于直接在当前模板下继续写模板，适用于当模板比较复杂同时模板部分内容可以复用的情况
      </script>
      <script type="text/html" id="test2"> // 添加id 作为之后使用时引入的标记
      	<div>{{uname}}</div>
      </script>
      

   5. 转义/不转义

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

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

   6. 外部模板引入

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

      <script type="text/javascript">
              let tem = '<div>{{uname}}</div>\n' +
                  '        <span>{{sex}}</span>\n';// 此字符串可以写入txt文本中进一步的读取
              let st = template.compile(tem);// 将模板字符串作为参数传入，返回模板解析对象
           	// 传入的数据必须是对象类型
              let data = {
                  uname: 'zt',
                  age: 19,
                  sex: 'f'
              };
      		// 将需要构建的对象传入，类似于template(模板id，需要构建的对象)，返回构建完成的字符串
              let html = st(data);
              document.querySelector('div').innerHTML = html;
          </script>
      

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环境中没有页面元素，也即不能像浏览器中使用模板引擎一样采用<script>标签进行定义模板。

3.客户端渲染与服务端渲染的区别

1. 客户端渲染如果页面只有一个ajax请求，则需要请求两次，一次页面获取，一次动态数据
2. 服务器渲染，通过模板引擎构建页面字符串，只需要请求一次就可以获取到。
3. 客户端渲染不利于SEO搜索引擎优化。服务端是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到，所以网站一般既不是纯异步也不是纯服务器渲染出来的，比如：京东商品列表采用服务端渲染，为了SEO搜索引擎优化，而商品评论列表为了用户体验，不需要SEO优化，所以采用客户端渲染