学习vue源码（7）手写解析器(上)

伪代码如下：

parseHTML(template, {

start (tag, attrs, unary) {

// 每当解析到标签的开始位置时，触发该函数

},

end () {

// 每当解析到标签的结束位置时，触发该函数

},

chars (text) {

// 每当解析到文本时，触发该函数

},

comment (text) {

// 每当解析到注释时，触发该函数

}

})

你可能不能很清晰地理解，下面我们举个简单的例子：

我是Berwin

当上面这个模板被HTML解析器解析时，所触发的钩子函数依次是：start、start、chars、end、end。

也就是说，解析器其实是从前向后解析的。解析到<div>时，会触发一个标签开始的钩子函数start；然后解析到<p>时，又触发一次钩子函数start；接着解析到我是Berwin这行文本，此时触发了文本钩子函数chars；然后解析到</p>，触发了标签结束的钩子函数end；接着继续解析到</div>，此时又触发一次标签结束的钩子函数end，解析结束。

因此，我们可以在钩子函数中构建AST节点。在start钩子函数中构建元素类型的节点，在chars钩子函数中构建文本类型的节点，在comment钩子函数中构建注释类型的节点。

当HTML解析器不再触发钩子函数时，就代表所有模板都解析完毕，所有类型的节点都在钩子函数中构建完成，即AST构建完成。

我们发现，钩子函数start有三个参数，分别是tag、attrs和unary，它们分别代表标签名、标签的属性以及是否是自闭合标签。

而文本节点的钩子函数chars和注释节点的钩子函数comment都只有一个参数，只有text。这是因为构建元素节点时需要知道标签名、属性和自闭合标识，而构建注释节点和文本节点时只需要知道文本即可。

什么是自闭合标签？举个简单的例子，input标签就属于自闭合标签：

，而div标签就不属于自闭合标签：

。

在start钩子函数中，我们可以使用这三个参数来构建一个元素类型的AST节点，例如：

function createASTElement (tag, attrs, parent) {

return {

type: 1,

tag,

attrsList: attrs,

parent,

children: []

}

}

parseHTML(template, {

start (tag, attrs, unary) {

let element = createASTElement(tag, attrs, currentParent)

}

})

在上面的代码中，我们在钩子函数start中构建了一个元素类型的AST节点。

如果是触发了文本的钩子函数，就使用参数中的文本构建一个文本类型的AST节点，例如：

parseHTML(template, {

chars (text) {

let element = {type: 3, text}

}

})

如果是注释，就构建一个注释类型的AST节点，例如：

parseHTML(template, {

comment (text) {

let element = {type: 3, text, isComment: true}

}

})

你会发现，看到的AST是有层级关系的，一个AST节点具有父节点和子节点，但是shang介绍的创建节点的方式，节点是被拉平的，没有层级关系。因此，我们需要一套逻辑来实现层级关系，让每一个AST节点都能找到它的父级。下面我们介绍一下如何构建AST层级关系。

构建AST层级关系其实非常简单，我们只需要维护一个栈（stack）即可，用栈来记录层级关系，这个层级关系也可以理解为DOM的深度。

HTML解析器在解析HTML时，是从前向后解析。每当遇到开始标签，就触发钩子函数start。每当遇到结束标签，就会触发钩子函数end。

基于HTML解析器的逻辑，我们可以在每次触发钩子函数start时，把当前构建的节点推入栈中；每当触发钩子函数end时，就从栈中弹出一个节点。

这样就可以保证每当触发钩子函数start时，栈的最后一个节点就是当前正在构建的节点的父节点，如图1所示。

图1 使用栈记录DOM层级关系（英文为代码体）

下面我们用一个具体的例子来描述如何从0到1构建一个带层级关系的AST。

假设有这样一个模板：

我是Berwin

我今年23岁

上面这个模板被解析成AST的过程如图9-2所示。

图9-2给出了构建AST的过程，图中的黑底白数字代表解析的步骤，具体如下。

(1) 模板的开始位置是div的开始标签，于是会触发钩子函数start。start触发后，会先构建一个div节点。此时发现栈是空的，这说明div节点是根节点，因为它没有父节点。最后，将div节点推入栈中，并将模板字符串中的div开始标签从模板中截取掉。

(2) 这时模板的开始位置是一些空格，这些空格会触发文本节点的钩子函数，在钩子函数里会忽略这些空格。同时会在模板中将这些空格截取掉。

(3) 这时模板的开始位置是h1的开始标签，于是会触发钩子函数start。与前面流程一样，start触发后，会先构建一个h1节点。此时发现栈的最后一个节点是div节点，这说明h1节点的父节点是div，于是将h1添加到div的子节点中，并且将h1节点推入栈中，同时从模板中将h1的开始标签截取掉。

(4) 这时模板的开始位置是一段文本，于是会触发钩子函数chars。chars触发后，会先构建一个文本节点，此时发现栈中的最后一个节点是h1，这说明文本节点的父节点是h1，于是将文本节点添加到h1节点的子节点中。由于文本节点没有子节点，所以文本节点不会被推入栈中。最后，将文本从模板中截取掉。

(5) 这时模板的开始位置是h1结束标签，于是会触发钩子函数end。end触发后，会把栈中最后一个节点弹出来。

(6) 与第(2)步一样，这时模板的开始位置是一些空格，这些空格会触发文本节点的钩子函数，在钩子函数里会忽略这些空格。同时会在模板中将这些空格截取掉。

(7) 这时模板的开始位置是p开始标签，于是会触发钩子函数start。start触发后，会先构建一个p节点。由于第(5)步已经从栈中弹出了一个节点，所以此时栈中的最后一个节点是div，这说明p节点的父节点是div。于是将p推入div的子节点中，最后将p推入到栈中，并将p的开始标签从模板中截取掉。

(8) 这时模板的开始位置又是一段文本，于是会触发钩子函数chars。当chars触发后，会先构建一个文本节点，此时发现栈中的最后一个节点是p节点，这说明文本节点的父节点是p节点。于是将文本节点推入p节点的子节点中，并将文本从模板中截取掉。

(9) 这时模板的开始位置是p的结束标签，于是会触发钩子函数end。当end触发后，会从栈中弹出一个节点出来，也就是把p标签从栈中弹出来，并将p的结束标签从模板中截取掉。

(10) 与第(2)步和第(6)步一样，这时模板的开始位置是一些空格，这些空格会触发文本节点的钩子函数并且在钩子函数里会忽略这些空格。同时会在模板中将这些空格截取掉。

(11) 这时模板的开始位置是div的结束标签，于是会触发钩子函数end。其逻辑与之前一样，把栈中的最后一个节点弹出来，也就是把div弹了出来，并将div的结束标签从模板中截取掉。

(12)这时模板已经被截取空了，也就代表着HTML解析器已经运行完毕。这时我们会发现栈已经空了，但是我们得到了一个完整的带层级关系的AST语法树。这个AST中清晰写明了每个节点的父节点、子节点及其节点类型。

3 HTML解析器

通过前面的介绍，我们发现构建AST非常依赖HTML解析器所执行的钩子函数以及钩子函数中所提供的参数，你一定会非常好奇HTML解析器是如何解析模板的，接下来我们会详细介绍HTML解析器的运行原理。

1 运行原理

事实上，解析HTML模板的过程就是循环的过程，简单来说就是用HTML模板字符串来循环，每轮循环都从HTML模板中截取一小段字符串，然后重复以上过程，直到HTML模板被截成一个空字符串时结束循环，解析完毕，如图9-2所示。

在截取一小段字符串时，有可能截取到开始标签，也有可能截取到结束标签，又或者是文本或者注释，我们可以根据截取的字符串的类型来触发不同的钩子函数。

循环HTML模板的伪代码如下：

function parseHTML(html, options) {

while (html) {

// 截取模板字符串并触发钩子函数

}

}

为了方便理解，我们手动模拟HTML解析器的解析过程。例如，下面这样一个简单的HTML模板：

{{name}}

它在被HTML解析器解析的过程如下。

最初的HTML模板：

`

{{name}}

`

第一轮循环时，截取出一段字符串

，并且触发钩子函数start，截取后的结果为：

`

{{name}}

`

第二轮循环时，截取出一段字符串：

并且触发钩子函数chars，截取后的结果为：

`

{{name}}

`

第三轮循环时，截取出一段字符串

，并且触发钩子函数start，截取后的结果为：

`{{name}}

`

第四轮循环时，截取出一段字符串{{name}}，并且触发钩子函数chars，截取后的结果为：

`

`

第五轮循环时，截取出一段字符串

，并且触发钩子函数end，截取后的结果为：

`

`

第六轮循环时，截取出一段字符串：

`

`

并且触发钩子函数chars，截取后的结果为：

</div>

第七轮循环时，截取出一段字符串

``

解析完毕。

HTML解析器的全部逻辑都是在循环中执行，循环结束就代表解析结束。接下来，我们要讨论的重点是HTML解析器在循环中都干了些什么事。

你会发现HTML解析器可以很聪明地知道它在每一轮循环中应该截取哪些字符串，那么它是如何做到这一点的呢？

通过前面的例子，我们发现一个很有趣的事，那就是每一轮截取字符串时，都是在整个模板的开始位置截取。我们根据模板开始位置的片段类型，进行不同的截取操作。

例如，上面例子中的第一轮循环：如果是以开始标签开头的模板，就把开始标签截取掉。再例如，上面例子中的第四轮循环：如果是以文本开始的模板，就把文本截取掉。

这些被截取的片段分很多种类型，示例如下。

• 开始标签，例如<div>。

• 结束标签，例如</div>。

• HTML注释，例如<!-- 我是注释 -->。

• DOCTYPE，例如<!DOCTYPE html>。

• 条件注释，例如<!--[if !IE]>-->我是注释<!--<![endif]-->。

• 文本，例如我是Berwin。

• 通常，最常见的是开始标签、结束标签、文本以及注释。

2 截取开始标签

上一节中我们说过，每一轮循环都是从模板的最前面截取，所以只有模板以开始标签开头，才需要进行开始标签的截取操作。

那么，如何确定模板是不是以开始标签开头？

在HTML解析器中，想分辨出模板是否以开始标签开头并不难，我们需要先判断HTML模板是不是以<开头。

如果HTML模板的第一个字符不是<，那么它一定不是以开始标签开头的模板，所以不需要进行开始标签的截取操作。

如果HTML模板以<开头，那么说明它至少是一个以标签开头的模板，但这个标签到底是什么类型的标签，还需要进一步确认。

如果模板以<开头，那么它有可能是以开始标签开头的模板，同时它也有可能是以结束标签开头的模板，还有可能是注释等其他标签，因为这些类型的片段都以<开头。那么，要进一步确定模板是不是以开始标签开头，还需要借助正则表达式来分辨模板的开始位置是否符合开始标签的特征。

那么，如何使用正则表达式来匹配模板以开始标签开头？我们看下面的代码：

const ncname = ‘[a-zA-Z_][\w\-\.]*’

const qnameCapture = ((?:${ncname}\\:)?${ncname})

const startTagOpen = new RegExp(^<${qnameCapture})

// 以开始标签开始的模板

‘

’.match(startTagOpen) // [“<div”, “div”, index: 0, input: “

”]

// 以结束标签开始的模板

‘

我是Berwin

’.match(startTagOpen) // null

// 以文本开始的模板

‘我是Berwin

’.match(startTagOpen) // null

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件