首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

前端工程师为什么要学习编译原理?

普遍的观点认为,前端就是打好 HTML、CSS、JS 三大基础,深刻理解语义化标签,了解 N 种不同的布局方式,掌握语言的语法、特性、内置 API。再学习一些主流的前端框架,使用社区成熟的脚手架,即可快速搭建一个前端项目。胜任前端工作非常容易。再往深处学习,你会发现前端这个领域,总是有学不完的框架、工具、库,不断有新的轮子出现。技术推陈出新,版本快速迭代,但万变不离其宗。工具致力于流程自动化、规范化,服务于简洁、优雅、高效的编码,将问题高度抽象化、层次化。在如今前端开源界如此火热的现状下,框架的使用者与框架的维护者联系更加紧密,不仅能深入源码来更彻底地认识框架,还能够提出问题,参与讨论,贡献代码,共同解决技术问题,推进前端生态的发展和壮大。而编译原理,作为一门基础理论学科,除了 JS 语言本身的编译器之外,更成为 Babel、ESLint、Stylus、Flow、Pug、YAML、Vue、React、Marked 等开源前端框架的理论基石之一。了解编译原理能够对所接触的框架有更充分的认识。

03

自己动手实现一个简单的JSON解析器

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。相对于另一种数据交换格式 XML,JSON 有着诸多优点。比如易读性更好,占用空间更少等。在 web 应用开发领域内,得益于 JavaScript 对 JSON 提供的良好支持,JSON 要比 XML 更受开发人员青睐。所以作为开发人员,如果有兴趣的话,还是应该深入了解一下 JSON 相关的知识。本着探究 JSON 原理的目的,我将会在这篇文章中详细向大家介绍一个简单的JSON解析器的解析流程和实现细节。由于 JSON 本身比较简单,解析起来也并不复杂。所以如果大家感兴趣的话,在看完本文后,不妨自己动手实现一个 JSON 解析器。好了,其他的话就不多说了,接下来让我们移步到重点章节吧。

01

用c语言手搓一个600行的类c语言解释器: 给编程初学者的解释器教程(3)- 词法分析

用c语言手搓一个600行的类c语言解释器: 给编程初学者的解释器教程(1)- 目标和前言 用c语言手搓一个600行的类c语言解释器: 给编程初学者的解释器教程(2)- 简介和设计 用c语言手搓一个600行的类c语言解释器: 给编程初学者的解释器教程(3)- 词法分析 用c语言手搓一个600行的类c语言解释器: 给编程初学者的解释器教程(4)- 语法分析1:EBNF和递归下降文法 用c语言手搓一个600行的类c语言解释器: 给编程初学者的解释器教程(5)- 语法分析2: tryC的语法分析实现 用c语言手搓一个600行的类c语言解释器: 给编程初学者的解释器教程(6)- 语义分析:符号表和变量、函数

03

自己动手实现一个简单的JSON解析器

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。相对于另一种数据交换格式 XML,JSON 有着诸多优点。比如易读性更好,占用空间更少等。在 web 应用开发领域内,得益于 JavaScript 对 JSON 提供的良好支持,JSON 要比 XML 更受开发人员青睐。所以作为开发人员,如果有兴趣的话,还是应该深入了解一下 JSON 相关的知识。本着探究 JSON 原理的目的,我将会在这篇文章中详细向大家介绍一个简单的JSON解析器的解析流程和实现细节。由于 JSON 本身比较简单,解析起来也并不复杂。所以如果大家感兴趣的话,在看完本文后,不妨自己动手实现一个 JSON 解析器。好了,其他的话就不多说了,接下来让我们移步到重点章节吧。

019

笔记:写Flink SQL Helper时学到的一些姿势

这块其实是编译原理的一部分,属于前端编译部分,并未涉及后端编译。见:github.com/camilesing/…中的 // 使用生成的词法分析器和解析器进行语法检查 const inputStream = new ANTLRInputStream(event.getText()); //词法解析 const lexer = new FlinkSQLLexer(inputStream); const tokenStream = new CommonTokenStream(lexer); //语法解析 const parser = new FlinkSQLParser(tokenStream); parser.removeErrorListeners(); parser.addErrorListener({ syntaxError: (recognizer: Recognizer<any, any>, offendingSymbol: any, line: number, charPositionInLine: number, msg: string, e: RecognitionException | undefined): void => { vscode.window.showErrorMessage("Parser flink sql error. line: " + line + " position: " + charPositionInLine + " msg: " + msg); }, }) parser.compileParseTreePattern // 解析文件内容并获取语法树 const parseTree = parser.program(); 写这块代码我用到了Antlr4-TS这个库。我根据一些Antlr4的语法规则,生成了对应的代码,并将输入内容丢进这些类,让它们吐出结果。在了解Antlr相关的语法规则时,让我特别震撼——类似于刚毕业一年时接触到DSL时的震撼。通过一系列规则的描述,竟然可以生产如此复杂、繁多的代码,巨幅解放生产力。这些规则是一种很美又具有实际价值的抽象。 那让我们抛开Antlr这个框架的能力,如果去手写一个词法、语法分析的实现,该怎么做呢? 在编程语言里,一般会有保留字和标识符的概念。保留字就是这个语言的关键字,比如SQL中的select,Java中的int等等,标识符就是你用于命名的文字。比如public class Person中的Person,select f1 as f1_v2 from t1 中的f1,f1_v2,t1。 再扩展一下概念,我们以int a=1;这样一段代码为例子,int 是关键字,a是标识符,=是操作符,;是符号(结束符)。搞清楚哪些词属于什么类型,这就是词法解析器要做的事。那怎么做呢?最简单的方法其实就是按照一定规则(比如A-Za-z$)一个个去读取,比如读到i的时候,它要去看后面是不是结束符或者空格,也就上文提到的的peek,如果不为空,就要继续往后读,直到读到空格或者结束符。那么读取出来是个int,就知道这是个关键字。 伪代码如下: 循环读取字符 case 空白字符 处理,并继续循环 case 行结束符 处理,并继续循环 case A-Za-z$_ 调用scanIden()识别标识符和关键字,并结束循环 case 0之后是X或x,或者1-9 调用scanNumber()识别数字,并结束循环 case , ; ( ) [ ]等字符 返回代表这些符号的Token,并结束循环 case isSpectial(),也就是% * + - | 等特殊字符 调用scanOperator()识别操作符 ... 这下我们知道了int a=1;在词法解析器看来其实就是关键字(类型) 标识符 操作符 数字 结束符。这样的写法其实是符合Java的语法规则的。反过来说:int int=1;是能够通过词法分析的,但是无法通过语法分析,因为关键字(类型) 关键字(类型) 操作符 数字 结束符是不符合Java的语法定义的。 这个时候可能会有人问,为啥要有词法分析这一层?都放到语法分析这一层也是可以做的啊。可以做,但会很复杂。而且一般软件工程中会都做分层,避免外面的变动影响到里面的核心逻辑。 举个例子:后续Java新增了一个类型,如果词法分析、语法分析是拆开的,那么只要改词法分析层的一些代码就行了,语法分析不用。但是如果没有词法分析这一层,语法分析的代码会有很多,而且一点点改动就很容易影响到这一层。 在此之后就会生成语法树。后续我打算做一些基于语法树的分析,Antlr提供了两种读语法节点的方式,一种是Vistor,一种是Listeners。前者意

01
领券