VUE源码分析4 -- Mustache简介和重写Scanner

本文主要是介绍VUE源码分析4 -- Mustache简介和重写Scanner，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

下面我们说Vue Dom实现，vue dom 兼容mustache项目。这个链接是mustache官方工程 mustache github地址

请看官方mustahce语法文档，变量前后添加两个大括号{{}},代表要侦测的数据。Vue官方也是兼容改特性。

下面我们要重零开始写Mustache，为什么要重零开始写mustache呢，因为我们追踪vue dom底层，mustache是跑不了的。

熟悉Mustache项目

首先我们先看看Mustache 案例，

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://unpkg.com/mustache@latest"></script>//引用mustache项目</head><body><div id="app"></div><div id="app1"></div></body><script type="text/javascript">console.log("here");var templateStr = `<ul>{{#arr}}<li>{{name}}的基本信息<div><p>姓名:{{name}}</p><p>性别:{{sex}}</p><p>年龄:{{age}}</p></div></li>{{/arr}}</ul>`;var data = {arr: [{"name": "小明","age": 12,"sex": "男"}, {"name": "小明","age": 12,"sex": "男"}, {"name": "小明","age": 12,"sex": "男"}]};var domStr = Mustache.render(templateStr, data);console.log(domStr);var container = document.getElementById('app');container.innerHTML=domStr;var templateStr1 = `		<ul>{{#arr}}<li>{{.}}</li>{{/arr}}</ul>`;var data1 ={arr:['A','B','C']}var domstr1 = Mustache.render(templateStr1, data1);console.log(domstr1);container.innerHTML +=domstr1;</script>
</html>

以上代码执行结果是

从上面给可以知道，{{name}}，{{sex}},{{age}}是变量。并且{{#arr}}...{{/arr}}是否跟vue v-for相似。

Scanner类

下面分析mustache scanner类，为什么要先说scanner类呢，因为mustache把模板字符串转成token，将tokens借和数据，解析为dom字符串。

例如，以下模板字符串是

<div><ol>{{#students}}<li>学生{{name}}的爱好是<ol>{{#hobbies}}<li>{{.}}</li>{{/hobbies}}</ol></li>{{/students}}</ol>
</div>

mustache内部先转成

[ ["text", "<div><ol>"],
["#", "students", [ ["text", "<li>学生"],
["name", "name"],
["text", "的爱好是<ol>"],
["#", "hobbies", [ ["text", "<li>"],
["name", "."],
["text", "</li>"],
]],
["text", "</ol></li>"],
]],
["text", "</ol></div>"] ]

为了验证以上步骤，我们修改官方mustache源码,把254代码改为

修改前：

修改后

然后网页输出信息为，可以看出此时模板字符串输出信息为tokens信息。

上面mustache源码在github链接下，请自行下载查看代码下载

下面我们开始重写Scanner类，

先创建Scanner.js文件，然后创建Scanner类，然后创建scan()和scanUtil()函数，scan函数是用于跳过某个字符，在mustache源码是跳过 {{ 和 }} 字符串。

export default class Scanner{constructor(templateStr){}scan(tag){//跳过 {{ 和 }}}scanUtil(stopTag){ //把字符串转成tokens}
}

scanUtil()函数功能用于把模板字符串转成tokens。

scan()是用于跳过某些字符串。

接下来我们继续写这两个函数代码，先看所有源码

Scanner.js

export default class Scanner{constructor(templateStr) {console.log(templateStr);this.templateStr = templateStr;//将模板字符串写道实例身上this.pos = 0;//当前位置this.tail = templateStr;}scan(tag){if(this.tail.indexOf(tag)==0){//第一位就是0this.pos += tag.length;this.tail = this.templateStr.substring(this.pos);}}scanUtil(stopTag){// console.log("scanUtil",stopTag);const pos_backup = this.pos;//当尾巴开头不是stopTag时候，说明没有扫描到到stopTag//写eos很必要，因为防止找不到，最后也要停止下来while(this.tail.indexOf(stopTag)!=0 && !this.eos()){this.pos++;//把尾巴改为当前扫描剩余字符串this.tail = this.templateStr.substring(this.pos);// console.log(this.tail);}return this.templateStr.substring(pos_backup,this.pos);}eos(){return this.pos >= this.templateStr.length;}
}

上面这个代码没什么好说的，都是基本截取字符串算法，自行手敲一次理解就行。

index.js

import Scanner from './Scanner.js'
//提供window全局方法
window.TemplateEngine = {render(templateStr,data){var scanner = new Scanner(templateStr);var word ;while(scanner.pos!=scanner.templateStr.length)// while(counter --){word = scanner.scanUtil("{{");console.log("word:",word);scanner.scan("{{");// console.log("word:",word);word = scanner.scanUtil("}}");console.log("word:",word);scanner.scan("}}");// console.log("word:",word);}}
}

在上面代码注意，在这里创建一个全局的对象TemplateEngine。然后一直循环截取字符串。

index.js

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="/xuni/bundle.js" type="text/javascript" charset="utf-8"></script></head><body>213123</body><script type="text/javascript">var Str = "<h1>我买了一个{{thing}},好{{mood}}</h1>;"var data = {}TemplateEngine.render(Str)</script>
</html>

上面代码是创建一个模板字符串Str，把Str放到TemplateEngine.render()函数转换成tokens,然后查看浏览器console输出。