【Vue源码解析】mustache模板引擎

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 【Vue源码解析】mustache模板引擎

什么是模板引擎

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


以前出现过的其它数据变视图的方法

  • 纯 DOM 法
  • 数组 join 法
    在 js 里单双引号内的内容是不能换行的,为了提高 dom 结构可读性,利用了数组的 join 方法(将数组变为字符串),注意 join 的参数 ‘’ 不可以省略,否则得到的 str 字符串会是以逗号间隔的
  • es6 的模板字符串(``)

刚开始用模板引擎时可以引用 如下:

<script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.2.0/mustache.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.2.0/mustache.js"></script>

底层核心机理

//最简单的模板的实现机理,利用的是正则表达式中的replace()方法

// replace()的第二个参数可以是一个函数,这个函数提供捕获的东西的参数,就是$1

//结合data的对象,即可进行智能的替换

//编译普通对象成token
const templateStr = `<h3>我今天买了一部{{thing}}手机,花了我{{money}}元,心情好{{mood}}啊</h3>`;
[
    ["text",'<h3>我今天买了一部'],
    ["name",'thing'],
    ["text",'手机,花了我'],
    ["name",'money']
    ["text",'元,心情好'],
    ["name","mood"],
    ["text",'啊']
]

模块化打包工具有webpack(webpack-dev-server) 、rollup、Parcel等

我们经常使用webpack进行模块化打包

实现 Scanner 类

Scanner 类的实例就是一个扫描器,用来扫描构造时作为参数提供的那个模板字符串

属性

  • pos:指针,用于记录当前扫描到字符串的位置
  • tail:尾巴,值为当前指针之后的字符串(包括指针当前指向的那个字符)

方法

  • scan:无返回值,让指针跳过传入的结束标识 stopTag
  • scanUntil:传入一个指定内容 stopTag 作为让指针 pos 结束扫描的标识,并返回扫描内容
// Scanner.js
export default class Scanner {
  constructor(templateStr) {
    this.templateStr = templateStr
    // 指针
    this.pos = 0
    // 尾巴
    this.tail = templateStr
  }
  scan(stopTag) { 
    this.pos +=  stopTag.length // 指针跳过 stopTag,比如 stopTag 是 {{,则 pos 就会加2
    this.tail = this.templateStr.substring(this.pos) // substring 不传第二个参数直接截取到末尾
  }
  scanUntil(stopTag) {
    const pos_backup = this.pos // 记录本次扫描开始时的指针位置
    // 当指针还没扫到最后面,并且当尾巴开头不是 stopTag 时,继续移动指针进行扫描
    while (!this.eos() && this.tail.indexOf(stopTag) !== 0){
      this.pos++ // 移动指针
      this.tail = this.templateStr.substring(this.pos) // 更新尾巴
    }
    return this.templateStr.substring(pos_backup, this.pos) // 返回扫描过的字符串,不包括 this.pos 处
  }
  // 指针是否已经抵达字符串末端,返回布尔值 eos(end of string)
  eos() {
    return this.pos >= this.templateStr.length
  }
}

根据模板字符串生成 tokens

tokens是一个JS的嵌套数组,说白了,就是模板字符串的JS表示

有了 Scanner 类后,就可以着手去根据传入的模板字符串生成一个 tokens 数组了。最终想要生成的 tokens 里的每一条 token 数组的第一项用 name(数据) 或 text(非数据文本) 或 #(循环开始) 或 /(循环结束) 作为标识符

// parseTemplateToTokens.js
import Scanner from './Scanner.js'
import nestTokens from './nestTokens' // 后面会解释
// 函数 parseTemplateToTokens
export default templateStr => {
  const tokens = []
  const scanner = new Scanner(templateStr)
  let word
  while (!scanner.eos()) {
    word = scanner.scanUntil('{{')
    word && tokens.push(['text', word]) // 保证 word 有值再往 tokens 里添加
    scanner.scan('{{')
    word = scanner.scanUntil('}}')
    /** 
     *  判断从 {{ 和 }} 之间收集到的 word 的开头是不是特殊字符 # 或 /, 
     *  如果是则这个 token 的第一个元素相应的为 # 或 /, 否则为 name
     */
    word && (word[0] === '#' ? tokens.push(['#', word.substr(1)]) : 
      word[0] === '/' ? tokens.push(['/', word]) : tokens.push(['name', word]))
    scanner.scan('}}')
  }
  return nestTokens(tokens) // 返回折叠后的 tokens, 详见下文
}

在 index.js 引入 parseTemplateToTokens

// index.js
import parseTemplateToTokens from './parseTemplateToTokens.js'
window.My_TemplateEngine = {
  render(templateStr, data) {
    const tokens = parseTemplateToTokens(templateStr)
    console.log(tokens)
  }
}

这样我们就可以把传入的 templateStr 初步转成 tokens 了,比如 templateStr 为

const templateStr = `
  <ul>
      {{#arr}}
        <li>
          <div>{{name}}的基本信息</div>
          <div>
            <p>{{name}}</p>
            <p>{{age}}</p>
            <div>
              <p>爱好:</p>
              <ol>
                {{#hobbies}}
                  <li>{{.}}</li>
                {{/hobbies}}
              </ol>
            </div>
          </div>
        </li>
      {{/arr}}
  </ul>
`

那么目前经过 parseTemplateToTokens 处理将得到如下的 tokens

实现 tokens 的嵌套

新建 nestTokens.js 文件,定义 nestTokens 函数来做 tokens 的嵌套功能,将传入的 tokens 处理成包含嵌套的 nestTokens 数组返回。

然后在 parseTemplateToTokens.js 引入 nestTokens,在最后 return nestTokens(tokens)

  在 nestTokens 中,我们遍历传入的 tokens 的每一个 token,遇到第一项是 # 和 /的分别做处理,其余的做一个默认处理。

大致思路是当遍历到的 token 的第一项为 # 时,就把直至遇到配套的 / 之前,遍历到的每一个 token 都放入一个容器(collector)中,把这个容器放入当前 token 里作为第 3 项元素


但这里有个问题:在遇到匹配的 / 之前又遇到 # 了怎么办?也就是如何解决循环里面嵌套循环的情况?

解决方法就是新建一个 栈数据类型 的数组(stack),遇到一个 #,就把当前 token 放入这个栈中,让 collector 指向这个 token 的第三个元素。

遇到下一个 # 就把新的 token 放入栈中,collector 指向新的 token 的第三个元素。

遇到 / 就把栈顶的 token 移出栈,collector 指向移出完后的栈顶 token。

这就利用了栈的先进后出的特点,保证了遍历的每个 token 都能放在正确的地方,也就是 collector 都能指向正确的地址。

// nestTokens.js
export default (tokens) => {
  const nestTokens = []
  const stack = []
  let collector = nestTokens // 一开始让收集器 collector 指向最终返回的数组 nestTokens
  tokens.forEach(token => {
    switch (token[0]) {
      case '#':
        stack.push(token)
        collector.push(token)
        collector = token[2] = [] // 连等赋值
        break
      case '/':
        stack.pop(token)
        collector = stack.length > 0 ? stack[stack.length-1][2] : nestTokens
        break;
      default:
        collector.push(token)
        break
    }
  })
  return nestTokens
}

One More Thing

上面的代码中有用到 collector = token[2] = [],是为连等赋值,相当于

token[2] = []
collector = token[2]

看着简单,其实暗含着小坑,除非你真的了解它,否则尽量不要使用。比如我在别处看到这么一个例子,

let a = {n:1};
a.x = a = {n:2};
console.log(a.x); // 输出? 

答案是 undefined,你做对了吗?

tokens 结合数据解析为 dom 字符串

大致思路是遍历 tokens 数组,根据每条 token 的第一项的值来做不同的处理,为 text 就直接把 token[1]

加入到最终输出的 dom 字符串,为 name 则根据 token[1] 去 data 里获取数据,结合进来。

当 data 里存在多层嵌套的数据结构,比如 data = { test: { a: { b: 10 } } },这时如果某个 token 为[“name”, “test.a.b”],即代表数据的 token 的第 2 项元素是 test.a.b 这样的有多个点符号的值,那么我么直接通过 data[test.a.b] 是无法拿到正确的值的,因为 js 不认识这种写法。

我们需要提前准备一个 lookup 函数,用以正确获取数据。

定义 lookup 函数

// lookup.js
// 思路就是先获取 test.a 的值, 比如说是 temp, 再获取 temp.b 的值, 一步步获取
export default (data, key) => {
  // 如果传入的 key 里有点符号而且不是仅仅只是点符号
  if (key.indexOf('.') !== -1 && key !== '.' ) {
    const keys = key.split('.') // 将 key 用 . 分割成一个数组
    return keys.reduce((acc, cur) => {
      return acc[cur] // 一步步获取
    }, data)
  }
  // 如果传入的 key 没有点符号,直接返回
  return data[key]
}

定义 renderTemplate 函数

接下来写个 renderTemplate 函数将 tokens 和 data 作为参数传入,解析为 dom 字符串了。

// renderTemplate.js
import lookup from './lookup.js'
import parseArray from './parseArray.js'
export default (tokens, data) => {
  let domString = ''
  tokens.forEach(token => {  
    switch (token[0]) {
      case 'text':
        domString += token[1]
        break
      case 'name':
        domString += lookup(data, token[1])
        break
      case '#':
        domString += parseArray(token[2], data[token[1]])
        break
      default:
        break
    }
  }) 
  return domString
}
复制代码

需要注意的是遇到循环的情况,也就是当某个 token 的第一项为 “#” 时,要再次递归调用 renderTemplate 函数。这里我们新定义了一个 parseArray 函数来处理。

// parseArray.js
import renderTemplate from './renderTemplate.js'
export default (tokens, data) => {
  let domString = ''
  data.forEach(itemData => {
    domString += renderTemplate(tokens, {
      ...itemData,
      '.': itemData // 针对简单数组的情况,即模板字符串里的 {{.}} 
    })
  })
  return domString
}
复制代码

到此,就算是完结了。能力一般,水平有限,难免会有纰漏不足的地方,还请各位看官斧正。

image.png

目录
相关文章
|
26天前
|
存储 设计模式 算法
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析
行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配。行为型模式分为类行为模式和对象行为模式,前者采用继承机制来在类间分派行为,后者采用组合或聚合在对象间分配行为。由于组合关系或聚合关系比继承关系耦合度低,满足“合成复用原则”,所以对象行为模式比类行为模式具有更大的灵活性。 行为型模式分为: • 模板方法模式 • 策略模式 • 命令模式 • 职责链模式 • 状态模式 • 观察者模式 • 中介者模式 • 迭代器模式 • 访问者模式 • 备忘录模式 • 解释器模式
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析
|
26天前
|
设计模式 存储 安全
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
结构型模式描述如何将类或对象按某种布局组成更大的结构。它分为类结构型模式和对象结构型模式,前者采用继承机制来组织接口和类,后者釆用组合或聚合来组合对象。由于组合关系或聚合关系比继承关系耦合度低,满足“合成复用原则”,所以对象结构型模式比类结构型模式具有更大的灵活性。 结构型模式分为以下 7 种: • 代理模式 • 适配器模式 • 装饰者模式 • 桥接模式 • 外观模式 • 组合模式 • 享元模式
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
|
26天前
|
设计模式 存储 安全
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
创建型模式的主要关注点是“怎样创建对象?”,它的主要特点是"将对象的创建与使用分离”。这样可以降低系统的耦合度,使用者不需要关注对象的创建细节。创建型模式分为5种:单例模式、工厂方法模式抽象工厂式、原型模式、建造者模式。
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
|
2天前
|
自然语言处理 数据处理 索引
mindspeed-llm源码解析(一)preprocess_data
mindspeed-llm是昇腾模型套件代码仓,原来叫"modelLink"。这篇文章带大家阅读一下数据处理脚本preprocess_data.py(基于1.0.0分支),数据处理是模型训练的第一步,经常会用到。
8 0
|
2月前
|
缓存 监控 Java
Java线程池提交任务流程底层源码与源码解析
【11月更文挑战第30天】嘿,各位技术爱好者们,今天咱们来聊聊Java线程池提交任务的底层源码与源码解析。作为一个资深的Java开发者,我相信你一定对线程池并不陌生。线程池作为并发编程中的一大利器,其重要性不言而喻。今天,我将以对话的方式,带你一步步深入线程池的奥秘,从概述到功能点,再到背景和业务点,最后到底层原理和示例,让你对线程池有一个全新的认识。
65 12
|
1月前
|
PyTorch Shell API
Ascend Extension for PyTorch的源码解析
本文介绍了Ascend对PyTorch代码的适配过程,包括源码下载、编译步骤及常见问题,详细解析了torch-npu编译后的文件结构和三种实现昇腾NPU算子调用的方式:通过torch的register方式、定义算子方式和API重定向映射方式。这对于开发者理解和使用Ascend平台上的PyTorch具有重要指导意义。
|
27天前
|
安全 搜索推荐 数据挖掘
陪玩系统源码开发流程解析,成品陪玩系统源码的优点
我们自主开发的多客陪玩系统源码,整合了市面上主流陪玩APP功能,支持二次开发。该系统适用于线上游戏陪玩、语音视频聊天、心理咨询等场景,提供用户注册管理、陪玩者资料库、预约匹配、实时通讯、支付结算、安全隐私保护、客户服务及数据分析等功能,打造综合性社交平台。随着互联网技术发展,陪玩系统正成为游戏爱好者的新宠,改变游戏体验并带来新的商业模式。
|
JavaScript 前端开发
vue源码解析之mustache模板引擎
vue源码解析之mustache模板引擎
117 0
|
JavaScript
01 - vue源码解析之vue 数据绑定实现的核心 Object.defineProperty()
01 - vue源码解析之vue 数据绑定实现的核心 Object.defineProperty()
99 0
|
JavaScript 索引
Vue $set 源码解析(保证你也能看懂)
说明这个key本来就在对象上面已经定义过了的,直接修改值就可以了,可以自动触发响应
138 0
Vue $set 源码解析(保证你也能看懂)

推荐镜像

更多