vue源码解析之mustache模板引擎——底层核心机理

不能用简单的正则表达式思路实现

底层token思想

手写mustache库

1.遍历查找“{{ }}”(Scanner类)

scanner类：用于解析templateStr模板字符串
主要由两个方法
scan()：跳过{{
scanUtil(): 让指针进行扫描,知道遇见指定内容结束,并且能够返回之前路过的文字

index.js

import Sanner from "./Sanner";

window.WJY_TemplateEngine = {
	// 渲染
	render(templateStr,data) {

		// 实例化一个扫描器,构造时提供模板字符串
		var scanner = new Sanner(templateStr)
		var word
		while (!scanner.eos()) {
			word = scanner.scanUtil('{{')
			console.log(word)
			scanner.scan('{{')
			word = scanner.scanUtil('}}')
			console.log(word)
			scanner.scan('}}')
		}
	}
};

Scanner.js

// 扫描器类
export default class Sanner {
	constructor(templateStr) {
		console.log('我是Scanner----', templateStr)
		// 指针
		this.pos = 0
		this.templateStr = templateStr

		// 尾巴, 一开始就是模板字符串的原文
		this.tail = templateStr
	}

	// 跳过{{
	scan(tag) {
		if (this.tail.indexOf(tag) == 0) {
			// 跳过tag的长度
			this.pos += tag.length
			this.tail = this.templateStr.substring(this.pos)
		}
	}

	// 让指针进行扫描,知道遇见指定内容结束,并且能够返回之前路过的文字
	// 接收结束标记
	scanUtil(stopTag) {
		// 记录下执行本方法时Pos的值
		const pos_backup = this.pos

		// 当尾巴的开头不是stopTag,就说明还没有扫描到{{
		// 写&&有必要,因为防止找不到,那么寻找到最后也要停止下来
		while (this.tail.indexOf(stopTag) !== 0 && !this.eos()) {
			this.pos++
			// 改变尾巴为从当前指针这个字符开始,到最后的全部字符
			this.tail = this.templateStr.substring(this.pos)
		}
		return this.templateStr.substring(pos_backup,this.pos)
	}

	eos(){
		return this.pos >= this.templateStr.length
	}
}

生成tokens数组

这里将scanner封装到parseTeplateToTokens,这个函数直接返回tokens
index.js

import parseTeplateToTokens from "./parseTemplateToTkoens";

window.WJY_TemplateEngine = {
	// 渲染
	render(templateStr,data) {
		// 调用par...,让模板字符串能够变为tokens数组
		var tokens = parseTeplateToTokens(templateStr)
		console.log(tokens)
	}
};

parseTeplateToTokens.js

import Sanner from "./Sanner";

export default function parseTeplateToTokens(templateStr){

	var tokens=[]

	// 实例化一个扫描器,构造时提供模板字符串
	var scanner = new Sanner(templateStr)
	var word

	// 当scanner没有到头
	while (!scanner.eos()) {

		word = scanner.scanUtil('{{')
		if (word != ''){ // 存起来
			tokens.push(["text",word]);
		}
		scanner.scan('{{')

		word = scanner.scanUtil('}}')
		if (word !=''){
			if (word[0] == '#'){
				tokens.push(["#",word.substring(1)]);
			} else if (word[0] == '/'){
				tokens.push(["/", word.substring(1)]);
			} else {
				tokens.push(["name",word]);
			}
		}
		scanner.scan('}}')
	}

	return tokens
}