第 15 章编译器核心技术概览(2)

霍春阳（HcySunYang）

15.4　AST 的转换与插件化架构在上一节中，我们完成了模板 AST 的构造。本节，我们将讨论关于 AST 的转换。所谓 AST 的转换，指的是对 AST 进行一系列操作，将其转换为新的 AST 的过程。新的 AST 可以是原语言或原 DSL 的描述，也可以是其他语言或其他 DSL 的描述。例如，我们可以对模板 AST 进行操作，将其转换为 JavaScript AST。转换后的 AST 可以用于代码生成。这其实就是 Vue.js 的模板编译器将模板编译为渲染函数的过程，如图 15-21 所示。
图 15-21　模板编译器将模板编译为渲染函数的过程
其中 transform 函数就是用来完成 AST 转换工作的。
15.4.1　节点的访问为了对 AST 进行转换，我们需要能访问 AST 的每一个节点，这样才有机会对特定节点进行修改、替换、删除等操作。由于 AST 是树型数据结构，所以我们需要编写一个深度优先的遍历算法，从而实现对 AST 中节点的访问。不过，在开始编写转换代码之前，我们有必要编写一个 dump 工具函数，用来打印当前 AST 中节点的信息，如下面的代码所示：
 function dump(node, indent = 0) {
   // 节点的类型
   const type = node.type
   // 节点的描述，如果是根节点，则没有描述
   // 如果是 Element 类型的节点，则使用 node.tag 作为节点的描述
   // 如果是 Text 类型的节点，则使用 node.content 作为节点的描述
   const desc = node.type === 'Root'
     ? ''
     : node.type === 'Element'
       ? node.tag
       : node.content
// 打印节点的类型和描述信息
console.log(<code>${'-'.repeat(indent)}$: $</code>)<p></p>
我们沿用上一节中给出的例子，看看使用 dump 函数会输出怎样的结果：
 const ast = parse(`<div><p>Vue</p><p>Template</p></div>`)
 console.log(dump(ast))
运行上面这段代码，将得到如下输出：
 Root:
 --Element: div
 ----Element: p
 ------Text: Vue
 ----Element: p
 ------Text: Template
可以看到，dump 函数以清晰的格式来展示 AST 中的节点。在后续编写 AST 的转换代码时，我们将使用 dump 函数来展示转换后的结果。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文深入介绍了编译器核心技术中的AST转换与插件化架构。作者首先详细讲解了AST的转换过程，包括使用transform函数完成AST转换的过程以及节点的访问和深度优先遍历算法。接着，作者介绍了转换上下文与节点操作的关系，说明了为什么要使用context对象，并展示了如何将转换函数注册到context.nodeTransforms数组中。文章还讨论了转换工作流的设计，以及如何将模板AST转换为JavaScript AST，为后续讲解代码生成做铺垫。在代码生成方面，作者介绍了如何根据JavaScript AST生成渲染函数的代码，强调了代码生成的重要性。整体来看，本文通过具体的代码示例，清晰地介绍了AST的转换与插件化架构的实现方式，为读者提供了深入理解编译器核心技术的指导。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Vue.js 设计与实现》

立即购买

登录后留言

精选留言

由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。

收起评论

第 15 章 编译器核心技术概览(2)

15.4 AST 的转换与插件化架构

15.4.1 节点的访问

精选留言

第 15 章编译器核心技术概览(2)

15.4　AST 的转换与插件化架构

15.4.1　节点的访问