|
|
@@ -28,7 +28,7 @@ export const createCompiler = createCompilerCreator(function baseCompile (
|
|
|
|
|
|
## 根据令牌生成AST的思路
|
|
|
|
|
|
-在上一节的末尾我们讲解了 `parseHTML` 函数的使用，该函数接收一些选项参数，其中包括几个重要的钩子函数，如每当遇到一个开始标签时会调用的 `options.start` 钩子函数，每当遇到一个结束标签时会调用的 `options.end` 钩子函数等等。实际上一颗抽象语法树的构建最关键的就是这两个钩子函数，接下来我们简单讲解一下构建抽象语法树的思路。
|
|
|
+在上一节的末尾我们讲解了 `parseHTML` 函数的使用，该函数接收一些选项参数，其中包括几个重要的钩子函数，如每当遇到一个开始标签时会调用的 `options.start` 钩子函数，每当遇到一个结束标签时会调用的 `options.end` 钩子函数等等。实际上一棵抽象语法树的构建最关键的就是这两个钩子函数，接下来我们简单讲解一下构建抽象语法树的思路。
|
|
|
|
|
|
假设我们有一段 `html` 字符串，如下：
|
|
|
|
|
|
@@ -40,7 +40,7 @@ export const createCompiler = createCompilerCreator(function baseCompile (
|
|
|
</ul>
|
|
|
```
|
|
|
|
|
|
-那么最终生成的这颗树应该是与如上 `html` 字符串的结构一一对应的：
|
|
|
+那么最终生成的这棵树应该是与如上 `html` 字符串的结构一一对应的：
|
|
|
|
|
|
```sh
|
|
|
├── ul
|
|
|
@@ -81,7 +81,7 @@ export const createCompiler = createCompilerCreator(function baseCompile (
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-按照以上思路，实际上你可以为节点的描述对象添加任何你需要的属性，从而进一步描述该节点的特征。如果使用如上这个对象描述之前定义的 `html` 字符串，那么这颗抽象语法树应该长成如下这个样子：
|
|
|
+按照以上思路，实际上你可以为节点的描述对象添加任何你需要的属性，从而进一步描述该节点的特征。如果使用如上这个对象描述之前定义的 `html` 字符串，那么这棵抽象语法树应该长成如下这个样子：
|
|
|
|
|
|
```js
|
|
|
{
|
|
|
@@ -119,7 +119,7 @@ export const createCompiler = createCompilerCreator(function baseCompile (
|
|
|
|
|
|
实际上构建抽象语法树的工作就是创建一个类似如上所示的一个能够描述节点关系的对象树，节点与节点之间通过 `parent` 和 `children` 建立联系，每个节点的 `type` 属性用来标识该节点的类别，比如 `type` 为 `1` 代表该节点为元素节点，`type` 为 `2` 代表该节点为文本节点，这只是人为的一个规定，你可以用任何方便的方式加以区分。
|
|
|
|
|
|
-明白了我们的目标，下面我们在回到 `parseHTML` 函数，因为目前为止我们所拥有的只有这一个函数，我们需要使用该函数构建出一颗如上所述的描述对象。
|
|
|
+明白了我们的目标，下面我们在回到 `parseHTML` 函数，因为目前为止我们所拥有的只有这一个函数，我们需要使用该函数构建出一棵如上所述的描述对象。
|
|
|
|
|
|
首先我们需要定义一个 `parse` 函数，假设该函数就是用来把 `html` 字符串生成 `AST` 的，如下：
|
|
|
|
HcySunYang