artTemplate模板引擎

chen
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 和浏览器

速度测试:

template_01

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

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优化,所以采用客户端渲染
阅读 339
4 声望
0 粉丝
0 条评论
4 声望
0 粉丝
文章目录
宣传栏