|
|
@@ -25,7 +25,7 @@ export const createCompiler = createCompilerCreator(function baseCompile (
|
|
|
|
|
|
可以看到 `baseCompile` 函数接收两个参数，分别是字符串模板(`template`)和选项参数(`options`)，其中选项参数 `options` 我们已经分析过了，并且我们有对应的附录专门整理编译器的选项参数，可以在 [编译器选项整理](../appendix/compiler-options.md) 中查看。
|
|
|
|
|
|
-`baseCompile` 函数很简短，由三句代码和一个 `return` 语句组成，这三句代码的作用如以下：
|
|
|
+`baseCompile` 函数很简短，由三句代码和一个 `return` 语句组成，这三句代码的作用如下：
|
|
|
|
|
|
```js
|
|
|
// 调用 parse 函数将字符串模板解析成抽象语法树(AST)
|
|
|
@@ -201,7 +201,7 @@ console.log('disabled'.match(attribute)) // 测试无属性值
|
|
|
|
|
|
数组共有从 `0` 到 `5` 六个元素，第 `0` 个元素是被整个正则所匹配的结果，从第 `1` 至第 `5` 个元素分别对应五个捕获组的匹配结果，我们可以看到，第 `1` 个元素对应第一个捕获组，匹配到了属性名(`class`)；第 `2` 个元素对应第二个捕获组，匹配到了等号(`=`)；第 `3` 个元素对应第三个捕获组，匹配到了带双引号的属性值；而第 `4` 和第 `5` 个元素分别对应第四和第五个捕获组，由于没有匹配到所以都是 `undefined`。
|
|
|
|
|
|
-所以通过以上结果我们很容易想到当属性值被单引号起来和不使用引号的情况下所得到的匹配结果是什么，变化主要就在匹配结果数组的第 `3`、`4`、`5` 个元素，匹配到哪种情况，那么对应的位置就是属性值，其他位置则是 `undefined`，如下：
|
|
|
+所以通过以上结果我们很容易想到当属性值被单引号引起来和不使用引号的情况下所得到的匹配结果是什么，变化主要就在匹配结果数组的第 `3`、`4`、`5` 个元素，匹配到哪种情况，那么对应的位置就是属性值，其他位置则是 `undefined`，如下：
|
|
|
|
|
|
```js
|
|
|
// 对于单引号的情况
|
|
|
@@ -1344,7 +1344,7 @@ lastTag === 'p' && isNonPhrasingTag(tagName)
|
|
|
<p><h2></h2></p>
|
|
|
```
|
|
|
|
|
|
-在解析上面这段 `html` 字符串的时候，首先遇到 `p` 标签的开始标签，此时 `lastTag` 被设置为 `p`，紧接着会遇到 `h2` 标签的开始标签，由于 `h2` 标签得内容模型属于非**段落式内容(`Phrasing content`)**模型，所以会立即调用 `parseEndTag(lastTag)` 函数闭合 `p` 标签，此时由于强行插入了 `</p>` 标签，所以解析后的字符串将变为如下内容：
|
|
|
+在解析上面这段 `html` 字符串的时候，首先遇到 `p` 标签的开始标签，此时 `lastTag` 被设置为 `p`，紧接着会遇到 `h2` 标签的开始标签，由于 `h2` 标签的内容模型属于非**段落式内容(`Phrasing content`)**模型，所以会立即调用 `parseEndTag(lastTag)` 函数闭合 `p` 标签，此时由于强行插入了 `</p>` 标签，所以解析后的字符串将变为如下内容：
|
|
|
|
|
|
```html
|
|
|
<p></p><h2></h2></p>
|
|
|
@@ -1577,7 +1577,7 @@ textEnd += next
|
|
|
rest = html.slice(textEnd)
|
|
|
```
|
|
|
|
|
|
-由于 `next` 值为 `3` 不小于 `0`，所以代码会继续执行，可以看到这句代码：`textEnd += next`，更新了 `textEnd` 的值，更新后的 `textEnd` 的值将是第二个 `<` 符号的索引，之后又使用新的 `textEnd` 对原始字符串 `html` 进行截取，并将新截取的字符串赋值给 `rest` 变量，如此往复直到遇到一个能够成功匹配标签的 `<` 符号为止，或者当再也遇到不下一个 `<` 符号时，`while` 循环会 `break`，此时循环也会终止。
|
|
|
+由于 `next` 值为 `3` 不小于 `0`，所以代码会继续执行，可以看到这句代码：`textEnd += next`，更新了 `textEnd` 的值，更新后的 `textEnd` 的值将是第二个 `<` 符号的索引，之后又使用新的 `textEnd` 对原始字符串 `html` 进行截取，并将新截取的字符串赋值给 `rest` 变量，如此往复直到遇到一个能够成功匹配标签的 `<` 符号为止，或者当再也遇不到下一个 `<` 符号时，`while` 循环会 `break`，此时循环也会终止。
|
|
|
|
|
|
当循环终止后，代码会继续执行，来到最后两句：
|
|
|
|
|
|
@@ -1628,7 +1628,7 @@ if (process.env.NODE_ENV !== 'production' && !stack.length && options.warn) {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-这段代码的作用是什么呢？我们想象一下什么情况下会使这段 `if` 语句的条件成立，关键在于第二个条件：`!stack.length`，`stack` 栈为空代表着标签被处理完毕了，但此时仍然有剩余的字符串未处理，距离例子假设 `html` 字符串为：`<div></div><a`，在解析这个字符串时首先会成功解析 `div` 的开始标签，此时 `stack` 栈中将存有 `div` 的开始标签，接着会成功解析 `div` 的结束标签，此时 `stack` 栈会被清空，接着会解析剩余的字符串 `<a`，此时由于 `stack` 栈被清空了，所以将满足上面 `if` 语句的判断条件。这时会打印警告信息，提示你 `html` 字符串的结尾不符合标签格式，很显然字符串 `<div></div><a` 是不合法的。
|
|
|
+这段代码的作用是什么呢？我们想象一下什么情况下会使这段 `if` 语句的条件成立，关键在于第二个条件：`!stack.length`，`stack` 栈为空代表着标签被处理完毕了，但此时仍然有剩余的字符串未处理，举例子假设 `html` 字符串为：`<div></div><a`，在解析这个字符串时首先会成功解析 `div` 的开始标签，此时 `stack` 栈中将存有 `div` 的开始标签，接着会成功解析 `div` 的结束标签，此时 `stack` 栈会被清空，接着会解析剩余的字符串 `<a`，此时由于 `stack` 栈被清空了，所以将满足上面 `if` 语句的判断条件。这时会打印警告信息，提示你 `html` 字符串的结尾不符合标签格式，很显然字符串 `<div></div><a` 是不合法的。
|
|
|
|
|
|
## textEnd 小于 0 的情况
|
|
|
|
|
|
@@ -1641,7 +1641,7 @@ if (textEnd < 0) {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-就将整个 `html` 字符串作为文本处理就好了，
|
|
|
+就将整个 `html` 字符串作为文本处理就好了。
|
|
|
|
|
|
## 对纯文本元素的处理
|
|
|
|
frank