Vue源码mustache模板引擎-手写Scanner类_mustache scanner

作者：从前慢现在也慢 | 2024-08-18 14:04:50

踩

mustache scanner

需要了解Vue源码，先了解mustache模板引擎

什么是模板引擎呢

模板引擎是将数据变为视图最优雅的解决方案，用过Vue的都知道v-for，v-for实际上就是一种模板引擎

发展

纯dom法：非常笨拙，没有实战价值，现在基本不用

数组join法：曾经前端必备

ES6反引号法：ES6新增的`${a}`语法糖

模板引擎：将数据变为视图最优雅的解决方案

手写Scanner类

先创建文件夹，配置mustache环境，安装webpack及相关依赖和配置webpack，这部分不清楚的可以上网查看一下相关文章

在mustache源码中一个Scanner类，有一个scan方法，作用是跳过指定内容，有一个scanUtil方法，作用是让指针进行扫描直到遇见直到内容结束，返回结束之前的内容


//扫描类
export default class Scanner {
  constructor(templateStr) {
    //将模板字符串写到实例身上
    this.templateStr = templateStr
    // 指针
    this.pos = 0
    //尾巴，一开始就是字符串原文
    this.tail = templateStr
  }
 
  //功能弱，就是走过指定内容，没有返回值
  scan(tag) {
    if (this.tail.indexOf(tag) === 0) {
      //tag有多长，就让指针后移多少位
      this.pos += tag.length
      // 改变尾巴从pos位置开始
      this.tail = this.templateStr.substring(this.pos)
    }
  }
 
  //让指针进行扫描，直到遇见指定内容结束，返回结束之前的文字
  scanUtil(stopTag) {
    //记录一下pos的值
    const pos_back = this.pos
    //当尾巴开头不是stopUtil的时候，就继续
    //this.eos()找到最后找不到就停止
    while (this.tail.indexOf(stopTag) !== 0 && !this.eos()) {
      this.pos++
      //改变尾巴从当前pos开始
      this.tail = this.templateStr.substr(this.pos)
    }
    return this.templateStr.substring(pos_back, this.pos)
  };
  //指针是否到头，返回布尔值 end of string
  eos() {
    return this.pos >= this.templateStr.length;
  }
};

测试

index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 虚拟文件 webpack把src中的js文件打包到bundle.js中-->
  <script src="/xuni/bundle.js"></script>
  <script>
    let templateStr = '我有一个好{{mood}},真开心啊{{zn}}，再见'
    let data ={}
    TemplateEnging.render(templateStr,data)
  </script>
</body>
</html>

index.js


import Scanner from './Scanner.js';
// 全局提供templateenging对象
window.TemplateEnging={
  // 渲染方法
  render (templateStr,data){
    // 实例化一个扫描器。构造时提供一个参数，这个参数是字符串模板
    // 也就是说这个扫描器就是针对这个模板字符串工作的
    var scanner =new Scanner(templateStr)
    console.log(templateStr)
    //当scanner没有到头
    let word;
    while(!scanner.eos()){
      word = scanner.scanUtil('{{')
      console.log(word)
      scanner.scan("{{");
      word = scanner.scanUtil('}}')
      console.log(word);
      scanner.scan('}}')
    }
  }
}

结果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/997725