抽象语法树(AST)

TIP

可以用AST explorer测试AST的生成

why

抽象语法树（AST）是编译器和解释器的核心数据结构之一。它提供了一种将源代码结构化表示的方法，使得编译器可以更容易地分析和转换代码。

html

<div id="app"></div>

转化后形如

AST

主要记录了类型(文本、元素、表达式)、位置信息loc、子节点children、props等信息。

原理

循环截取模板代码直到ast生成完成

typescript

while (!isEnd(context)) {}

根据模板的不同部分，调用不同的解析函数(有限状态机)来处理。

不知道算不算策略模式的一种应用

typescript

if (c.startsWith('{{')) {
  node = parseInterpolation(context)
}
else if (c[0] === '<') {
  node = parseElement(context)
}
else {
  // 文本
  node = parseText(context)
}

具体的解析函数会根据当前的上下文和字符来解析出对应的节点，并将其添加到AST中。

最终生成一颗完整的AST树,并返回

抽象语法树(AST) ​

why ​

原理 ​

抽象语法树(AST)

why

原理