Vue.js 设计与实现
霍春阳(HcySunYang)
Vue.js 官方团队成员
340 人已学习
立即订阅
Vue.js 设计与实现
15
15
1.0x
00:00/00:00
登录|注册

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

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

编译技术是一门庞大的学科,我们无法用几个章节对其做完善的讲解。但不同用途的编译器或编译技术的难度可能相差很大,对知识的掌握要求也会相差很多。如果你要实现诸如 C、JavaScript 这类通用用途语言(general purpose language),那么就需要掌握较多编译技术知识。例如,理解上下文无关文法,使用巴科斯范式(BNF),扩展巴科斯范式(EBNF)书写语法规则,完成语法推导,理解和消除左递归,递归下降算法,甚至类型系统方面的知识等。但作为前端工程师,我们应用编译技术的场景通常是:表格、报表中的自定义公式计算器,设计一种领域特定语言(DSL)等。其中,实现公式计算器甚至只涉及编译前端技术,而领域特定语言根据其具体使用场景和目标平台的不同,难度会有所不同。Vue.js 的模板和 JSX 都属于领域特定语言,它们的实现难度属于中、低级别,只要掌握基本的编译技术理论即可实现这些功能。

15.1 模板 DSL 的编译器

编译器其实只是一段程序,它用来将“一种语言 A”翻译成“另外一种语言 B”。其中,语言 A 通常叫作源代码(source code),语言 B 通常叫作目标代码(object code 或 target code)。编译器将源代码翻译为目标代码的过程叫作编译(compile)。完整的编译过程通常包含词法分析、语法分析、语义分析、中间代码生成、优化、目标代码生成等步骤,如图 15-1 所示。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

Vue.js模板编译器的工作原理是本文的重点,通过深入介绍编译器的核心技术概览和解析器parser的实现原理,读者可以快速了解Vue.js模板编译器的工作流程。编译器将模板转换为渲染函数的JavaScript代码,通过词法分析、语法分析和语义分析得到模板AST,再转换为JavaScript AST,最终生成渲染函数的代码。此外,文章还详细讨论了解析器parser的实现原理,介绍了有限状态自动机的概念,并通过状态迁移过程和代码实现展示了解析器的工作原理。通过本文,读者能够快速了解Vue.js模板编译器的核心技术和工作原理,为进一步深入学习提供了基础。文章还介绍了使用有限自动机将模板解析为Token,以及构造AST的过程。文章提供了清晰的技术细节和实现思路,适合想深入了解Vue.js模板编译器的读者阅读。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Vue.js 设计与实现》
立即购买
登录 后留言

精选留言

由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论
显示
设置
留言
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部