重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

(小实验)理解编译原理:一个四则运算的解释器

winter 2019-03-21
你好,我是 winter。
在前面的课程中,我在 JavaScript 和 CSS 的部分,多次提到了编译原理相关的知识。这一部分的知识,如果我们从编译原理“龙书”等正规的资料中学习,就会耗费掉不少的时间,所以我在这里设计了一个小实验,帮助你快速理解编译原理相关的知识。
今天的内容比较特殊,我们来做一段详细的代码实验,详细的代码我放在了文章里,如果你正在收听音频,可以点击文章查看详情。

分析

按照编译原理相关的知识,我们来设计一下工作,这里我们分成几个步骤。
定义四则运算:产出四则运算的词法定义和语法定义。
词法分析:把输入的字符串流变成 token。
语法分析:把 token 变成抽象语法树 AST。
解释执行:后序遍历 AST,执行得出结果。

定义四则运算

四则运算就是加减乘除四种运算,例如:
1 + 2 * 3
首先我们来定义词法,四则运算里面只有数字和运算符,所以定义很简单,但是我们还要注意空格和换行符,所以词法定义大概是下面这样的。
Token
Number: 1 2 3 4 5 6 7 8 9 0 的组合
Operator: +-*/ 之一
Whitespace: <sp>
LineTerminator:<LF> <CR>
这里我们对空白和换行符没有任何的处理,所以词法分析阶段会直接丢弃。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(15)

  • 阿成
    * 以前我只大概了解一般的做法是消除文法中的左递归,这一课让我知道原来还可以通过“层层展开”去处理。
    * 词法分析我尝试了正则的方式
    * 括号的处理费了些时间,这里我是修改了文法(感觉我的 Expression 产生式[在源码注释里]怪怪的,希望 winter 老师有时间的话可以指点一下),另一种做法是,先把中缀表达式变成前缀表达式
    * 学习一些编译原理的知识还是很有必要也很有趣的,可以去写一些webpack的loader啊,插件啊,vscode的插件等等
    https://github.com/aimergenge/arithmetic-executor
    2019-03-26
    13
  • 一条不会挣扎的咸鱼🐟
    想问下老师有没有推荐的国外论坛|YouTube作者|个人博客
    2019-03-21
    5
  • 北天魔狼
    感觉每一篇都需要看三遍,才能看懂一点写的是啥。后端入行,大前端,全栈,架构师。路还很长,楼上的:日拱一卒,共勉
    2019-07-09
    1
    4
  • 翰弟
    日拱一卒
    2019-03-22
    4
  • Rango
    这边把中缀表达式解析成后缀表达式会不会更容易理解一点?

    作者回复: 怎么解析呢 难道不是跟语法分析一样?

    2019-06-18
    3
  • Bojack
    实现了小数与负数的编译器 https://gist.github.com/OPY-bbt/8ee387122550326f60592b94b7908d19
    2019-03-24
    3
  • Glee
    日拱一卒
    2019-10-14
    2
  • 爱的神
    大三正在学习编译原理,目前仅能看懂词法分析那些,后面还不能看懂。补全了emmitToken函数。
    var tokens = []
    emmitToken(type,value){
       tokens.push({
          type : type,
          value: value
       })
    }
    不知道对不对🤔
    2019-03-27
    1
    2
  • leslee
    BNF 那里有没有详细一点的资料呢 或者有没有更加通俗的写法? 看不懂了……
    2019-03-22
    2
  • chang.xu
    标记,需要基础再回来
    2019-08-14
    1
  • Huayra
    硬啃龙书,对编程语言的理解更上一层楼
    2019-03-21
    1
  • 缺个豆饼吗
    之前写了一个JS的编译器的词法和语法分析。可以处理变量声明,加减乘除运算及赋值运算。
    https://github.com/yuguomin/my-compiler
    2019-12-07
  • 芬芬颜
    产生式如下
    Expr = Add <EOF>
    Add = Multiply | Add + Multiply | Add - Multiply
    Multiply = Num | Multiply * Multiply | Multiply / Multiply | ( Add )
    Num = 有理数

    对于括号的处理,关键在MultiplicativeExpression方法中判断运算符左右两侧的变量是否为(Add)
    function MultiplicativeExpression(source) {
      if (source[0].type === "Number") {
        let node = {
          type: "MultiplicativeExpression",
          children: [source[0]]
        }
        source[0] = node;
        return MultiplicativeExpression(source);
      }
      if (source[0].type === "parentness") {
        let addExpr = [];
        let i = 0;
        while (i++ < source.length && source[i].type !== "parenthese") {
          addExpr.push(source[i]);
        }
        source.splice(0, addExpr.length + 2, AdditiveExpression([...addExpr]));
        source[0].type = "MultiplicativeExpression";
      }
      if (source[2] && source[2].type === "parenthese") {
        let addExpr = [];
        let i = 2;
        while (i++ < source.length && source[i].type !== "parenthese") {
          addExpr.push(source[i]);
        }
        source.splice(2, addExpr.length + 2, AdditiveExpression([...addExpr]));
        source[2].type = "MultiplicativeExpression";
      }
    ...
    2019-05-06
  • 疯二中
    涨知识了,BNF和LL真是精妙
    2019-03-24
  • ban
    老师,做后端的感觉越到后面越看不到,请问该怎么做,求解
    2019-03-21
收起评论
15
返回
顶部