|
|
@@ -24,7 +24,7 @@ export const createCompiler = createCompilerCreator(function baseCompile (
|
|
|
|
|
|
可以看到 `parse` 函数的返回值就是抽象语法树(`AST`)，根据文件头部的引用关系可知 `parse` 函数来自于 `src/compiler/parser/index.js` 文件，实际上该文件所有的内容都在做一件事，即创建 `AST`。
|
|
|
|
|
|
-本章的讲解目标就是 `src/compiler/parser/index.js` 文件，不过具体到源码之前，我们有必要独立思考一下如何根据词法分析创建一个抽象语法树。
|
|
|
+本章的讲解目标就是 `src/compiler/parser/index.js` 文件，不过具体到源码之前，我们有必要独立思考一下如何根据词法分析创建一棵抽象语法树。
|
|
|
|
|
|
## 根据令牌生成AST的思路
|
|
|
|
|
|
@@ -119,7 +119,7 @@ export const createCompiler = createCompilerCreator(function baseCompile (
|
|
|
|
|
|
实际上构建抽象语法树的工作就是创建一个类似如上所示的一个能够描述节点关系的对象树，节点与节点之间通过 `parent` 和 `children` 建立联系，每个节点的 `type` 属性用来标识该节点的类别，比如 `type` 为 `1` 代表该节点为元素节点，`type` 为 `2` 代表该节点为文本节点，这只是人为的一个规定，你可以用任何方便的方式加以区分。
|
|
|
|
|
|
-明白了我们的目标，下面我们在回到 `parseHTML` 函数，因为目前为止我们所拥有的只有这一个函数，我们需要使用该函数构建出一棵如上所述的描述对象。
|
|
|
+明白了我们的目标，下面我们再回到 `parseHTML` 函数，因为目前为止我们所拥有的只有这一个函数，我们需要使用该函数构建出一棵如上所述的描述对象。
|
|
|
|
|
|
首先我们需要定义一个 `parse` 函数，假设该函数就是用来把 `html` 字符串生成 `AST` 的，如下：
|
|
|
|
|
|
@@ -131,7 +131,7 @@ function parse (html) {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-如上代码所示，我们在 `parse` 函数内定义了变量 `root` 并将其返回，其中 `root` 所代表的就是整个 `AST`，`parse` 函数体中间的所有代码都是为了充实 `root` 变量。怎么充实呢？这是我们需要借助 `parseHTML` 函数帮助我们解析 `html` 字符串，如下：
|
|
|
+如上代码所示，我们在 `parse` 函数内定义了变量 `root` 并将其返回，其中 `root` 所代表的就是整棵 `AST`，`parse` 函数体中间的所有代码都是为了充实 `root` 变量。怎么充实呢？这时我们需要借助 `parseHTML` 函数帮助我们解析 `html` 字符串，如下：
|
|
|
|
|
|
```js
|
|
|
function parse (html) {
|
|
|
@@ -203,7 +203,7 @@ root = {
|
|
|
</div>
|
|
|
```
|
|
|
|
|
|
-这段 `html` 字符串比之前的 `html` 字符串的不同之处在于 `div` 标签多了一个子节点，即多了一个 `span` 标签。如果继续沿用之前的解析代码，当解析如上 `html` 字符串时首先会遇到 `div` 元素的开始标签，此时 `start` 钩子函数被调用，`root` 变量被设置为：
|
|
|
+这段 `html` 字符串与之前的 `html` 字符串的不同之处在于 `div` 标签多了一个子节点，即多了一个 `span` 标签。如果继续沿用之前的解析代码，当解析如上 `html` 字符串时首先会遇到 `div` 元素的开始标签，此时 `start` 钩子函数被调用，`root` 变量被设置为：
|
|
|
|
|
|
```js
|
|
|
root = {
|
|
|
@@ -282,7 +282,7 @@ currentParent = {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-接着解析这段 `html` 字符串，会遇到 `span` 元素开始的开始标签，由于此时 `root` 已经存在，所以 `start` 钩子函数会执行 `else...if` 条件的判断，检查 `currentParent` 是否存在，由于 `currentParent` 存在，所以会将 `span` 元素的描述对象添加到 `currentParent` 的 `children` 数组中作为子节点，所以最终生成的 `root` 描述对象为：
|
|
|
+接着解析这段 `html` 字符串，会遇到 `span` 元素的开始标签，由于此时 `root` 已经存在，所以 `start` 钩子函数会执行 `else...if` 条件的判断，检查 `currentParent` 是否存在，由于 `currentParent` 存在，所以会将 `span` 元素的描述对象添加到 `currentParent` 的 `children` 数组中作为子节点，所以最终生成的 `root` 描述对象为：
|
|
|
|
|
|
```js
|
|
|
root = {
|
|
|
@@ -311,7 +311,7 @@ root = {
|
|
|
</div>
|
|
|
```
|
|
|
|
|
|
-在之前的基础上 `div` 元素的子节点多了一个 `p` 标签，按照现有的解析逻辑在解析这段 `html` 字符串时，首先会遇到 `div` 元素的开始标签，此时 `root` 和 `currentParent` 将被设置为 `div` 标签的描述对象。接着会遇到 `span` 元素的开始标签，此时 `span` 标签的描述对象将被添加到 `div` 标签描述对象的 `children` 数组中，同时别忘了 `span` 元素也是非一元标签，所以 `currentParent` 变量会被设置为 `span` 标签的描述对象。接着继续解析，会遇到 `span` 元素的结束标签，由于 `end` 钩子函数什么都没做，直接跳过。再继续解析将遇到 `p` 元素的开始标签，大家注意，**在解析 `p` 元素的开始标签时，由于 `currentParent` 变量引用的是 `span` 元素的描述对象，所以 `p` 元素的描述对象将被添加到 `span` 元素描述对象的 `children` 数组中，被误认为是 `span` 元素的子节点**。而事实上 `p` 标签是 `div` 元素的字节点，这就是问题所在。
|
|
|
+在之前的基础上 `div` 元素的子节点多了一个 `p` 标签，按照现有的解析逻辑在解析这段 `html` 字符串时，首先会遇到 `div` 元素的开始标签，此时 `root` 和 `currentParent` 将被设置为 `div` 标签的描述对象。接着会遇到 `span` 元素的开始标签，此时 `span` 标签的描述对象将被添加到 `div` 标签描述对象的 `children` 数组中，同时别忘了 `span` 元素也是非一元标签，所以 `currentParent` 变量会被设置为 `span` 标签的描述对象。接着继续解析，会遇到 `span` 元素的结束标签，由于 `end` 钩子函数什么都没做，直接跳过。再继续解析将遇到 `p` 元素的开始标签，大家注意，**在解析 `p` 元素的开始标签时，由于 `currentParent` 变量引用的是 `span` 元素的描述对象，所以 `p` 元素的描述对象将被添加到 `span` 元素描述对象的 `children` 数组中，被误认为是 `span` 元素的子节点**。而事实上 `p` 标签是 `div` 元素的子节点，这就是问题所在。
|
|
|
|
|
|
为了解决这个问题，我们需要每当遇到一个非一元标签的结束标签时，都将 `currentParent` 变量的值回退到之前的元素描述对象，这样就能够保证当前正在解析的标签拥有正确的父级。当时如何回退呢？若要回退之前的值，那么必然需要一个变量保存之前的值，所以我们需要一个数组 `stack`，如下代码所示：
|
|
|
|
|
|
@@ -421,7 +421,7 @@ export function parse (
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-通过如上代码的简化，我们可以清晰的看到 `parse` 函数的结构，在 `parse` 函数开头代码用来初始化一些变量的值，以及创建一些新的变量，其中包括 `root` 变量，该变量为 `parse` 函数的返回值，即最终的 `AST`。然后定义了两个函数 `warnOnce` 和 `closeElement`。接着调用了 `parseHTML` 函数，通过上一小节的铺垫，相信大家看到这里已经大概知道了 `parse` 函数是如何创建 `AST` 的了。另外我们能够注意到在调用 `parseHTML` 函数时传递了很多选项，其中包括四个重要的钩子函数选项：`start`、`end`、`chars` 以及 `comment`。最后 `parse` 函数将 `root` 变量返回，也就是最终生成的 `AST`。
|
|
|
+通过如上代码的简化，我们可以清晰地看到 `parse` 函数的结构，在 `parse` 函数开头的代码用来初始化一些变量的值，以及创建一些新的变量，其中包括 `root` 变量，该变量为 `parse` 函数的返回值，即最终的 `AST`。然后定义了两个函数 `warnOnce` 和 `closeElement`。接着调用了 `parseHTML` 函数，通过上一小节的铺垫，相信大家看到这里已经大概知道了 `parse` 函数是如何创建 `AST` 的了。另外我们能够注意到在调用 `parseHTML` 函数时传递了很多选项，其中包括四个重要的钩子函数选项：`start`、`end`、`chars` 以及 `comment`。最后 `parse` 函数将 `root` 变量返回，也就是最终生成的 `AST`。
|
|
|
|
|
|
在 `parse` 函数的后面，定义了非常多的函数，如下：
|
|
|
|
|
|
@@ -463,7 +463,7 @@ el = {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-那么 `process*` 类的函数接收 `el` 参数后都做了什么呢？实际上 `process*` 类函数的作用就是对元素描述对象的进一步处理，比如其中一个函数叫做 `processPre`，这个函数的作用就是用来检测 `el` 元素是否拥有 `v-pre` 属性，如果有 `v-pre` 属性则会在 `el` 描述对象上添加一个 `pre` 属性，如下：
|
|
|
+那么 `process*` 类的函数接收 `el` 参数后都做了什么呢？实际上 `process*` 类函数的作用就是对元素描述对象做进一步处理，比如其中一个函数叫做 `processPre`，这个函数的作用就是用来检测 `el` 元素是否拥有 `v-pre` 属性，如果有 `v-pre` 属性则会在 `el` 描述对象上添加一个 `pre` 属性，如下：
|
|
|
|
|
|
```js {8}
|
|
|
el = {
|
|
|
@@ -503,7 +503,7 @@ export const onRE = /^@|^v-on:/
|
|
|
export const dirRE = /^v-|^@|^:/
|
|
|
```
|
|
|
|
|
|
-它用来匹配以字符 `v-` 或 `@` 或 `:` 开头的字符串，主要作用是检测标签属性名是否是指令。所以通过这个正则我们可以知道，在 `vue` 中所以 `v-` 开头的属性都被认为是指令，另外 `@` 字符是 `v-on` 的缩写，`:` 字符是 `v-bind` 的缩写。
|
|
|
+它用来匹配以字符 `v-` 或 `@` 或 `:` 开头的字符串，主要作用是检测标签属性名是否是指令。所以通过这个正则我们可以知道，在 `vue` 中所有以 `v-` 开头的属性都被认为是指令，另外 `@` 字符是 `v-on` 的缩写，`:` 字符是 `v-bind` 的缩写。
|
|
|
|
|
|
#### 正则常量 forAliasRE
|
|
|
|
|
|
@@ -623,7 +623,7 @@ matchs[0].slice(1) // 'stop'
|
|
|
const decodeHTMLCached = cached(he.decode)
|
|
|
```
|
|
|
|
|
|
-`cached` 函数我们前面遇到过，它的作用是接收一个函数作为参数并返回一个新的函数，新函数的功能与作为参数传递的函数功能相同，唯一不同的是多了新函数将会缓存值，如果一个函数在接收相同参数的情况下所返回的值总是相同的，那么 `cached` 函数将会为该函数提供性能提升的优势。
|
|
|
+`cached` 函数我们前面遇到过，它的作用是接收一个函数作为参数并返回一个新的函数，新函数的功能与作为参数传递的函数功能相同，唯一不同的是多了新函数将会缓存值的功能，如果一个函数在接收相同参数的情况下所返回的值总是相同的，那么 `cached` 函数将会为该函数提供性能提升的优势。
|
|
|
|
|
|
可以看到传递给 `cached` 函数的参数是 `he.decode` 函数，其中 `he` 为第三方的库，`he.decode` 函数用于 `HTML` 字符实体的解码工作，如：
|
|
|
|
|
|
@@ -747,7 +747,7 @@ element = {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-上面的描述对象中的 `parent` 属性我们没有细说，其实在上一小节我们讲解思路的时候已经接触过 `currentParent` 变量的作用，实际上元素描述对象间的引用关系就是通过 `currentParent` 完成的，后面会仔细讲解。另外我们注意到描述对象中除了 `attrsList` 属性是原始的标签属性数组之后，还有一个叫做 `attrsMap` 属性：
|
|
|
+上面的描述对象中的 `parent` 属性我们没有细说，其实在上一小节我们讲解思路的时候已经接触过 `currentParent` 变量的作用，实际上元素描述对象间的引用关系就是通过 `currentParent` 完成的，后面会仔细讲解。另外我们注意到描述对象中除了 `attrsList` 属性是原始的标签属性数组之外，还有一个叫做 `attrsMap` 的属性：
|
|
|
|
|
|
```js {3}
|
|
|
{
|
|
|
@@ -3969,4 +3969,4 @@ function closeElement (element) {
|
|
|
无论是前置处理，中置处理还是后置处理，这些名词都是为了让大家更好理解而“杜撰”出来的，他们的作用等价于提供了对元素描述对象处理的钩子，让外界有能力参与不同阶段的元素描述对象的处理，这对于平台化是很重要的事情，不同平台能够通过这些处理钩子去处理那些特定平台下特有的元素或元素的属性。
|
|
|
|
|
|
由于这套文章只关注 `web` 平台，所以后面会详细讲解 `web` 平台下都应用了那些前置处理，中置处理和后置处理，以及处理的目的。
|
|
|
-
|
|
|
+
|
yoshino