第 15 章 编译器核心技术概览(2)
霍春阳(HcySunYang)
15.4 AST 的转换与插件化架构
在上一节中,我们完成了模板 AST 的构造。本节,我们将讨论关于 AST 的转换。所谓 AST 的转换,指的是对 AST 进行一系列操作,将其转换为新的 AST 的过程。新的 AST 可以是原语言或原 DSL 的描述,也可以是其他语言或其他 DSL 的描述。例如,我们可以对模板 AST 进行操作,将其转换为 JavaScript AST。转换后的 AST 可以用于代码生成。这其实就是 Vue.js 的模板编译器将模板编译为渲染函数的过程,如图 15-21 所示。
![](https://static001.geekbang.org/files/resource/ebook/100005/image00630.jpeg)
图 15-21 模板编译器将模板编译为渲染函数的过程
其中 transform 函数就是用来完成 AST 转换工作的。
15.4.1 节点的访问
为了对 AST 进行转换,我们需要能访问 AST 的每一个节点,这样才有机会对特定节点进行修改、替换、删除等操作。由于 AST 是树型数据结构,所以我们需要编写一个深度优先的遍历算法,从而实现对 AST 中节点的访问。不过,在开始编写转换代码之前,我们有必要编写一个 dump 工具函数,用来打印当前 AST 中节点的信息,如下面的代码所示:
我们沿用上一节中给出的例子,看看使用 dump 函数会输出怎样的结果:
运行上面这段代码,将得到如下输出:
可以看到,dump 函数以清晰的格式来展示 AST 中的节点。在后续编写 AST 的转换代码时,我们将使用 dump 函数来展示转换后的结果。
公开
同步至部落
取消
完成
0/2000
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
![](https://static001.geekbang.org/resource/image/d0/e4/d0880927e2a522a038be2d04bf19dfe4.png)
本文深入介绍了编译器核心技术中的AST转换与插件化架构。作者首先详细讲解了AST的转换过程,包括使用transform函数完成AST转换的过程以及节点的访问和深度优先遍历算法。接着,作者介绍了转换上下文与节点操作的关系,说明了为什么要使用context对象,并展示了如何将转换函数注册到context.nodeTransforms数组中。文章还讨论了转换工作流的设计,以及如何将模板AST转换为JavaScript AST,为后续讲解代码生成做铺垫。在代码生成方面,作者介绍了如何根据JavaScript AST生成渲染函数的代码,强调了代码生成的重要性。整体来看,本文通过具体的代码示例,清晰地介绍了AST的转换与插件化架构的实现方式,为读者提供了深入理解编译器核心技术的指导。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Vue.js 设计与实现》
《Vue.js 设计与实现》
立即购买
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论