《Vue.js设计与实现》笔记 第16章：解析器

Vue.js设计与实现 第16章：解析器

本章导读

Vue模板：

<div>
  <p>Hello Vue</p>
</div>

浏览器无法直接理解：

Vue Template

---

因此需要：

编译器

将其转换为：

render()

---

编译流程：

Template

↓

Parser

↓

AST

↓

Transform

↓

JS AST

↓

Generate

↓

Render Function

---

第16章主要完成：

Template

↓

AST

即：

Parser

---

一、什么是Parser

Parser：

解析器

---

作用：

将字符串模板

转换为

抽象语法树(AST)

---

例如：

<div>Hello</div>

---

转换：

{
  type:'Root',
  children:[
    {
      type:'Element',
      tag:'div',
      children:[
        {
          type:'Text',
          content:'Hello'
        }
      ]
    }
  ]
}

---

二、什么是AST

AST：

Abstract Syntax Tree

抽象语法树

---

作用：

结构化描述模板

---

模板：

<div>
  <p>Hello</p>
</div>

---

AST：

Root

└── div

     └── p

          └── Hello

---

三、为什么需要AST

字符串：

<div>Hello</div>

---

难以：

分析

优化

转换

---

AST：

树结构

---

方便：

遍历

修改

生成代码

---

四、Parser整体流程

Template

↓

Token

↓

AST

---

分为：

词法分析

语法分析

---

五、词法分析(Tokenize)

输入

<div>Hello</div>

---

输出：

[
  {
    type:'tag',
    name:'div'
  },

  {
    type:'text',
    content:'Hello'
  },

  {
    type:'tagEnd',
    name:'div'
  }
]

---

称为：

Token

---

六、Token是什么

Token：

最小语法单元

---

例如：

<div>

---

对应：

{
  type:'tag'
}

---

文本：

Hello

---

对应：

{
  type:'text'
}

---

七、有限状态机

Vue Parser核心：

有限状态机(FSM)

---

状态：

初始状态

标签开始

标签名称

文本状态

结束标签

---

八、状态切换

例如：

<div>

---

读取：

<

进入：

标签开始状态

---

读取：

div

进入：

标签名称状态

---

读取：

>

生成：

tag token

---

九、词法分析流程

字符流

↓

状态机

↓

Token数组

---

例如：

<div>Hello</div>

---

得到：

tag

text

tagEnd

---

十、语法分析(Parse)

输入：

tokens

---

输出：

AST

---

例如：

tokens

↓

Root

↓

Element

↓

Text

---

十一、构造AST

根节点：

{
 type:'Root',
 children:[]
}

---

维护：

elementStack

---

作用：

记录父子关系

---

十二、栈结构

开始：

[
 Root
]

---

遇到：

<div>

---

入栈：

[
 Root,
 div
]

---

十三、处理开始标签

Token：

{
 type:'tag'
}

---

创建：

{
 type:'Element'
}

---

加入：

父节点children

---

然后：

压栈

---

十四、处理文本节点

Token：

{
 type:'text'
}

---

创建：

{
 type:'Text'
}

---

加入：

parent.children

---

十五、处理结束标签

Token：

{
 type:'tagEnd'
}

---

作用：

出栈

---

例如：

</div>

---

执行：

stack.pop()

---

十六、AST构建过程

模板：

<div>
  <p>Hello</p>
</div>

---

过程：

Root

↓

div

↓

p

↓

Text

---

最终：

树结构

---

十七、文本模式(Text Mode)

HTML解析存在：

DATA

RCDATA

RAWTEXT

CDATA

---

不同模式：

解析规则不同

---

例如：

<textarea>

---

内部：

不会解析标签

---

十八、解码HTML实体

示例

模板：

<

---

实际：

<

---

需要：

HTML Decode

---

十九、插值解析

模板

{{ msg }}

---

AST：

{
 type:'Interpolation',

 content:'msg'
}

---

表示：

动态表达式

---

二十、注释解析

模板

<!-- hello -->

---

AST：

{
 type:'Comment',
 content:'hello'
}

---

二十一、Parser输出结果

最终：

Root
 ├── Element
 ├── Text
 ├── Comment
 └── Interpolation

---

供后续：

Transform

处理。

---

二十二、核心流程

Template

↓

Tokenize

↓

Tokens

↓

Parse

↓

AST

↓

Transform

↓

Generate

---

第16章核心知识图谱

Compiler

│

├── Template

│

├── Tokenize

│      ├── FSM
│      └── Token

│

├── Parse

│      ├── Root
│      ├── Element
│      ├── Text
│      ├── Comment
│      └── Interpolation

│

└── AST

---

高频面试题

什么是Parser？

将模板转换为AST

---

什么是AST？

抽象语法树

---

Parser分几步？

词法分析

语法分析

---

Token是什么？

最小语法单元

---

为什么使用状态机？

识别HTML结构

---

为什么需要栈？

维护父子关系

---

开始标签如何处理？

创建Element

压栈

---

结束标签如何处理？

出栈

---

插值表达式对应什么节点？

Interpolation

---

Parser输出什么？

AST

---

本章总结

Parser作用：

Template

↓

AST

核心步骤：

词法分析

↓

Token

↓

语法分析

↓

AST

关键技术：

有限状态机(FSM)

栈(Stack)

核心节点：

Root

Element

Text

Comment

Interpolation

这是 Vue Compiler 的基础。

后续章节将在 AST 基础上进行：

Transform

Code Generate

最终生成：

render()