|
|
@@ -313,7 +313,7 @@ root = {
|
|
|
|
|
|
在之前的基础上 `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`，如下代码所示：
|
|
|
+为了解决这个问题，我们需要每当遇到一个非一元标签的结束标签时，都将 `currentParent` 变量的值回退到之前的元素描述对象，这样就能够保证当前正在解析的标签拥有正确的父级。但是如何回退呢？若要回退之前的值，那么必然需要一个变量保存之前的值，所以我们需要一个数组 `stack`，如下代码所示：
|
|
|
|
|
|
```js {4,23,26-29}
|
|
|
function parse (html) {
|
|
|
@@ -353,11 +353,11 @@ function parse (html) {
|
|
|
|
|
|
如上高亮代码所示，首先我们定义了 `stack` 常量，它是一个数组，接着我们做了一些修改，每次遇到非一元开始标签的时候，除了设置 `currentParent` 的值之外，还会将 `currentParent` 添加到 `stack` 数组。接着我们在 `end` 钩子函数中添加了一句代码，也就是说每当遇到一个非一元标签的结束标签时，都会回退 `currentParent` 变量的值为之前的值，这样我们就修正了当前正在解析的元素的父级元素。
|
|
|
|
|
|
-以上就是根据 `parseHTML` 函数生成 `AST` 的基本方式，实际上我们还考虑的还不够周全，比如上面的讲解中我们没有处理一元标签，另外我们还需要处理文本节点和注释节点等等。不过上面的讲解很好的为我们后续对源码的解析做了铺垫，更详细的内容我们将在接下来的源码分析阶段为大家仔细说明。
|
|
|
+以上就是根据 `parseHTML` 函数生成 `AST` 的基本方式，实际上我们考虑的还不够周全，比如上面的讲解中我们没有处理一元标签，另外我们还需要处理文本节点和注释节点等等。不过上面的讲解很好的为我们后续对源码的解析做了铺垫，更详细的内容我们将在接下来的源码分析阶段为大家仔细说明。
|
|
|
|
|
|
## 解析前的准备工作
|
|
|
|
|
|
-前面说过，整个 `src/compiler/parser/index.js` 文件的所做的工作都是在创建 `AST`，所以我们应该先了解一下这个文件的结构，以方便后续的理解。在该文件的开头定义了一些常量和变量，其中包括一些正则常量，我们后续会详细讲解。
|
|
|
+前面说过，整个 `src/compiler/parser/index.js` 文件所做的工作都是在创建 `AST`，所以我们应该先了解一下这个文件的结构，以方便后续的理解。在该文件的开头定义了一些常量和变量，其中包括一些正则常量，我们后续会详细讲解。
|
|
|
|
|
|
接着定义了 `createASTElement` 函数，如下：
|
|
|
|
|
|
@@ -529,7 +529,7 @@ export const forAliasRE = /([^]*?)\s+(?:in|of)\s+([^]*)/
|
|
|
export const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
|
|
|
```
|
|
|
|
|
|
-该正则用来匹配 `forAliasRE` 第一个捕获组所捕获到的字符串，可以看到如上正则中拥有三个分组，有两个捕获的分组，第一个捕获组用来捕获一个不包含字符 `}` 和 `]` 的字符串，且该字符串前面有一个字符 `,`，如：`', index'`。第二个分组为非捕获的分组，第三个分组为捕获的分组，其捕获的内容与第一个捕获组相同。
|
|
|
+该正则用来匹配 `forAliasRE` 第一个捕获组所捕获到的字符串，可以看到如上正则中拥有三个分组，有两个捕获的分组，第一个捕获组用来捕获一个不包含字符 `,` `}` 和 `]` 的字符串，且该字符串前面有一个字符 `,`，如：`', index'`。第二个分组为非捕获的分组，第三个分组为捕获的分组，其捕获的内容与第一个捕获组相同。
|
|
|
|
|
|
举几个例子，我们知道 `v-for` 有几种不同的写法，其中一种使用 `v-for` 的方式是：
|
|
|
|
|
|
@@ -1718,7 +1718,7 @@ function findPrevElement (children: Array<any>): ASTElement | void {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-首先 `findPrevElement` 函数只用在了 `processIfConditions` 函数中，它的作用就是当解析器遇到一个带有 `v-else-if` 或 `v-if` 指令的元素时，找到该元素的前一个元素节点，假设我们解析如下 `html` 字符串：
|
|
|
+首先 `findPrevElement` 函数只用在了 `processIfConditions` 函数中，它的作用就是当解析器遇到一个带有 `v-else-if` 或 `v-else` 指令的元素时，找到该元素的前一个元素节点，假设我们解析如下 `html` 字符串：
|
|
|
|
|
|
```html
|
|
|
<div>
|
ts0307