Vue.js 模板解析器原理

本文来自《深入浅出Vue.js》模板编译原理篇的第九章，主要讲述了如何将模板解析成AST，这一章的内容是全书最复杂且烧脑的章节。本文排版较为紧凑和图片是未经加工的原稿，真实纸质书的排版和图片会更加精致。

通过第8章的学习，我们知道解析器在整个模板编译中的位置。我们只有将模板解析成AST后，才能基于AST做优化或者生成代码字符串，那么解析器是如何将模板解析成AST的呢？

本章中，我们将详细介绍解析器内部的运行原理。

9.1 解析器的作用

解析器要实现的功能是将模板解析成AST。

例如：

<div>
  <p>{{name}}p>
div>
复制代码

上面的代码是一个比较简单的模板，它转换成AST后的样子如下：

{
  tag: "div"
  type: 1,
  staticRoot: false,
  static: false,
  plain: true,
  parent: undefined,
  attrsList: [],
  attrsMap: {},
  children: [
    {
      tag: "p"
      type: 1,
      staticRoot: false,
      static: false,
      plain: true,
      parent: {tag: "div", ...},
      attrsList: [],
      attrsMap: {},
      children: [{
        type: 2,
        text: "{{name}}",
        static: false,
        expression: "_s(name)"
      }]
    }
  ]
}
复制代码

其实AST并不是什么很神奇的东西，不要被它的名字吓倒。它只是用JS中的对象来描述一个节点，一个对象代表一个节点，对象中的属性用来保存节点所需的各种数据。比如，parent属性保存了父节点的描述对象，children属性是一个数组，里面保存了一些子节点的描述对象。再比如，type属性代表一个节点的类型等。当很多个独立的节点通过parent属性和children属性连在一起时，就变成了一个树，而这样一个用对象描述的节点树其实就是AST。

9.2 解析器内部运行原理

事实上，解析器内部也分了好几个子解析器，比如HTML解析器、文本解析器以及过滤器解析器，其中最主要的是HTML解析器。顾名思义，HTML解析器的作用是解析HTML，它在解析HTML的过程中会不断触发各种钩子函数。这些钩子函数包括开始标签钩子函数、结束标签钩子函数、文本钩子函数以及注释钩子函数。

伪代码如下：

parseHTML(template, {
    start (tag, attrs, unary) {
        // 每当解析到标签的开始位置时，触发该函数
    },
    end () {
        // 每当解析到标签的结束位置时，触发该函数
    },
    chars (text) {
        // 每当解析到文本时，触发该函数
    },
    comment (text) {
        // 每当解析到注释时，触发该函数
    }
})
复制代码

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

<div><p>我是Berwinp>div>
复制代码

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

也就是说，解析器其实是从前向后解析的。解析到

时，会触发一个标签开始的钩子函数start；然后解析到

时，又触发一次钩子函数start；接着解析到我是Berwin这行文本，此时触发了文本钩子函数chars；然后解析到

，触发了标签结束的钩子函数end；接着继续解析到

，此时又触发一次标签结束的钩子函数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}
    }
})
复制代码

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

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

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

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

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

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

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

假设有这样一个模板：

<div>
    <h1>我是Berwinh1>
    <p>我今年23岁p>
div>
复制代码

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

图9-2构建AST的过程（下面的(1)~(12)需要改成图中那样黑底白字的）

图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中清晰写明了每个节点的父节点、子节点及其节点类型。

9.3 HTML解析器

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

9.3.1 运行原理

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

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

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

function parseHTML(html, options) {
  while (html) {
    // 截取模板字符串并触发钩子函数
  }
}
复制代码

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

<div>
  <p>{{name}}p>
div>
复制代码

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

最初的HTML模板：

`

  
{{name}}
`
复制代码

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

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

`
  
{{name}}

` 复制代码

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

`
  `
复制代码

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

`
{{name}}

` 复制代码

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

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

`{{name}}

` 复制代码

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

`

` 复制代码

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

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

`

` 复制代码

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

`
`
复制代码

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

`

` 复制代码

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