如果您也和我一样准备春招，只为
TOP20大厂，欢迎加我微信sAnL1ng,一起交流面经，一起屡败屡战，不破楼兰终不还。
前言
从接触前端到现在大致已有五六个月了，总结下来最有收获的学习方式就是看源码，比如从vue源码中我就体会到了代码之美，比如逻辑思维和组件封装时的一些抽象概念。
我把它比作一棵枝叶茂盛的大树🌳，当我起初尝试直接闯将进去，我直接迷失在了这片挪威的森林，而当我们顺着它的一条枝干去逐步分析，我慢慢柳暗花明道：原来并不用担心一个组件的代码会影响我们的理解，因为源码的作者写的正是高质量代码，比如通过使用闭包等方法来私有化变量，不仅不会影响外界，可读性也很好，这就是所谓的把复杂留给自己，把光明留给他人吧~
示例
首先，我们知道在Vue的模块化中它是由响应式（比如reactive和ref）、Compile（编译）等组成的，在之前的文章中我们已有介绍过vue的响应式原理 ，那么今天我们就来借助这个例子来搞懂Vue源码中是如何实现Compiler的吧~
-
【手搓ref】
模板字符串及其结构
我们可以把模板字符串想象成构建网页的"蓝图"。在 Vue3 中，它是程序员告诉程序如何渲染页面的地方。就比如，这些模板字符串看起来可能有点像这样：
js
<div id="#app">
<div @click="()=>console.log('xx')" :id="name">{{name}}</div>
<h1 :name="title">玩转Vue3</h1>
<p>编译原理</p>
</div>这个蓝图告诉 Vue3 诸如："在
#app这个容器中，有一个<div>，点击它时触发一个函数，显示name的内容；然后是一个<h1>标签，显示标题title；最后是一个<p>标签，显示文字'编译原理'。"
简而言之，模板字符串就像是一个指南，告诉 Vue3 应该在页面上放置什么元素以及它们应该如何工作。
实现一个编译器
词法分析器(tokenizer)的设计与实现
词法分析器就像是一个语言翻译机器，它能够理解并分解我们写的模板字符串，把它们翻译成计算机可以理解的"语言"。
js
function tokenizer(input) {
let tokens = []
let type = '' // 标签 属性 ....
let val = ''
// 逐一字符分词
for (let i = 0; i < input.length; i++) {
let ch = input[i] // 每个字符
if (ch === '<') {
push()
if (input[i + 1] === '/') {
type = 'tagend'
} else {
type= 'tagstart'
}
}
if (ch === '>') {
if (input[i-1] == '=') {
// 箭头函数
} else{
push()
type="text"
continue
}
} else if (/[\s]/.test(ch)) {
push()
type='props'
continue // div 拿完了 不需要再加ch
}
val += ch
}
return tokens;
function push() {
if (val) {
// <div
if (type === 'tagstart') val = val.slice(1) // <div div
if (type === 'tagend') val = val.slice(2) // </div div
tokens.push({
type,
val
})
val = ''
}
}
}首先，它会把模板字符串中的每一个字符都看一遍，然后根据不同的
符号或者空格，把这些字符分成一段一段的小块，这些小块就是我们的"Token(词)"。比如，碰到了<符号，就会把它认为是一个标签的开始；碰到了>符号，就认为是标签的结束；空格则表示着一个属性的结束。
简而言之：词法分析器做的事情就像是把一篇文章拆成了一句一句的话，这样计算机就能逐个去理解了。
解析器(parse)的设计与实现
解析器就像是一个小小的工程师，它接收词法分析器给的"词"，然后把这些词组织成一棵"树"，这棵树叫做 AST（Abstract Syntax Tree）抽象语法树，简单来说就是计算机理解模板字符串的一种方式。
js
function parse(template) {
// 分词
const tokens = tokenizer(template);
// console.log(tokens);
let cur = 0
let ast = {
type: 'root',
props: [],
children: []
}
while(cur < tokens.length) {
ast.children.push(walk())
}
return ast
function walk() {
let token = tokens[cur]
if (token.type == 'tagstart') {
let node = {
type: 'element',
tag: token.val,
props: [],
children: []
}
token = tokens[++cur]
while (token.type !== 'tagend') {
if (token.type == 'props') {
node.props.push(walk())
} else {
node.children.push(walk())
}
token = tokens[cur]
}
cur++
return node
}
if (token.type === 'tagend') {
cur++
}
if (token.type === 'text') {
cur++
return token
}
if (token.type === 'props') {
cur++
const [key,val] = token.val.replace('=', '~').split('~')
return {
key,
val
}
}
}
}解析器的工作就像是在
组装一棵树，它先看第一个词，如果是一个标签的开始，那么它就会创建一个树枝，表示这个标签；然后它再看下一个词，如果是属性，那么就把这个属性加到刚才那个标签上；如果是文本内容，就把这个文本放到标签里面。
通过walk函数，就这样不断走进每根树枝内心深处，一层一层地处理，就像搭积木一样，最后就组装出了一棵树，这棵树就是我们模板字符串的"蓝图"。
编译器(compiler)的实现
编译器就像是一个翻译员，它负责把我们写的模板字符串翻译成计算机能够理解的指令。
js
function compiler(template) {
const ast = parse(template)
console.log(ast);
}
首先，编译器会把模板字符串交给词法分析器，让它把字符串分成一段段的小块，就像把一篇文章拆成了一句一句的话。
然后，编译器把这些小块交给解析器，让解析器把这些小块组织成一棵树，这棵树就是我们的"蓝图"，告诉计算机我们想要在页面上放置什么元素，以及它们应该如何工作。
最后，编译器会把这棵树转换成一系列的指令，这些指令就是告诉计算机如何去操作页面元素的步骤，比如说，"在这个位置放一个按钮"，"点击这个按钮时，执行这个函数"。
这样，编译器就完成了它的任务，把我们写的模板字符串翻译成了计算机能够理解的指令，让页面可以正常工作啦！
最后测试一下
现在，我们就来测试一下,通过我们自己手写的编译器是否可以完成字符串模板的编译效果呢~
运行结果：
结语
从模板字符串到打造一个编译器，从vue源码的学习中我终于体会到了高质量代码的魅力：学习到了闭包的使用案例，并且每个模块内部的功能也分工的很明确。从把模板字符串分成一段段小块，接着交给封装好的解析函数再一步步组成一棵屹立不倒的大树。
站在这棵大树下，我感觉我向往的楚门还很遥远，但是我依然充满激情，依然不断探索着....
如果您也和我一样准备春招，只为
TOP20大厂，欢迎加我微信sAnL1ng,一起交流面经，一起屡败屡战，不破楼兰终不还。