程序语言进阶之DSL与AST实战解析

程序语言进阶之DSL与AST实战解析

在线课程DSL与AST实战

GIT代码: https://github.com/chalecao/parse_css_in_js

 

前端进阶系列课程

《用JavaScript自己写MVVM前端框架》:http://t.cn/REeKJp0

《前端函数式编程FP易学易用》:http://t.cn/REeKVSk

《前端自己用NodeJS编写区块链BlockChain》:http://t.cn/REeoF7v

《程序语言进阶之DSL与AST实战解析》:http://t.cn/R3XoQJA

《高性能web前端网页优化开发实战》:学习在线视频教程

《机器学习python与tensorflow实战》:在线学习视频教程

 

适用人群

本节课讲解AST与DSL在解析编程语言中的原理与应用,介绍DSL与AST的运行原理与机制,在实际编程语言解析到执行中是如何运用DSL和AST相关知识的,并根据学习的知识,我们可以自己定义一套DSL,通过解析AST实现自己需要的功能。本课程也会结合babel转换JSX的语法插件实例介绍在前端领域中如何应用AST实现灵活的处理各种语言的处理。

 

课程大纲

第1章:DSL与AST相关基础概念

1. 介绍DSL与AST类比编译原理

比如C语言或者c++编写的代码都是首先经过编译器编译成汇编语言,然后经过汇编器链接一些类库,最后生成可执行程序exe。这其中编译器部分就是根据c语言或者c++语言的DSL定义,分析代码生成AST语法树,然后生成汇编代码。

2. 类比NLP介绍DSL与AST

NLP自然语言处理是最近几年也比较火,常用的莫过于语音识别,将人么的语音输入识别为计算机相应的指令。比如google推出的google assistant和siri,语音首先会被识别转换为一句文本,然后通过文字DSL词法分析拆分成有意义的词语。然后根据不同语言的语法做语法分析,最后生成一个语法树。最后根据推断规则转换成语音指令。

3. DSL与AST定义讲解

4. 在线演示解析Javascript为AST

通过https://astexplorer.net/这个在线工具,我们可以更直观的查看我们代码生成的AST。 在线视频课程地址DSL与AST实战

第2章:DSL与AST原理与运用

1. DSL与AST原理与项目应用

2. DSL的词法解析与语法解析

详细内容见在线视频课程地址DSL与AST实战

第3章:手写CSS解析器

这里我们依照CSS的语法定义实现了一个简易的css解析器。具体实现方法和步骤可以参考视频教程内容。这里不做详细介绍。

词法的分析提取和语法嵌套和识别主要还是依赖于正则表达式,其实这里最后识别产出的是一个解析树(parsed tree),也就是具体的语法树(CST, concrete syntax tree)。 详细内容见在线视频课程地址DSL与AST实战

第4章:babel插件实现原理

先看一下babel插件原理,如下: 前端开发已经离不开babel,通过babel转换过程,我们可以使用最新的es各种新特性。其实整个过程的原理也很简单,首先通过babylon这个词法、语法分析器,生成抽象语法树。将代码转换成按照特定语法组成的词汇token流集合,然后通过babel-traverse遍历这个抽象语法树,通过对各个token处理,可以转换成需要的语法,比如将=>箭头函数转换成function,将let转换成var;最后通过babel-generator生成符合规范的代码。 关于如何写babel插件可以参考这里:http://github.com/jamiebuilds/babel-handbook。 关于JSX插件可以看这里:transform-react-jsx 插件的执行阶段是在babel-traverse阶段,通过访问者模式,可以访问到抽象语法树的各个节点,JSX插件主要工作是找到HTML片段,将HTML转换成一个个具有层级嵌套关系的Virtual Node构成的virtual DOM,准确的说是一个vnode函数。这个函数的参数是元素类型,元素的属性和子元素。 视频课程中有详细介绍,课程地址JS写virtualDom   和   DSL与AST实战  

第4章:基于peg.js实现代码压缩工具

这一节注定会很长……. 需要耐心和信心。 Parse Tree:解析出来的是语法结构树,注重表达语法结构 Abstract Syntax Tree:抽象语法树着重表达逻辑结构  

文法

讲到这里,我们就必须要在学习一下文法相关的知识。文法是一种规范描述语法的术语。关于词法分析,这里就不介绍,可以参考(词法分析 如果使用上面的文法来分析1+2*3这样的语句,我们就可能得到两个不同的分析过程: 上面的树形结构就是语法分析树。采用自底向上的方式来计算表达式,第一个是(1+2)*3,第二个是1+(2*3)。如果一个文法对一个句子进行分析可以产生多个语法分析树,我们就称这个文法是二义文法。这个时候计算机就不知道该使用哪个过程了。但是,通常二义文法可以转化成非二义文法: 详细内容见在线视频课程地址DSL与AST实战

PEG=Parsing Expression Grammars

解析表达语法(PEG)是Brian Ford在2004年发表的一篇论文。从技术上讲,它来源于一种称为自顶向下解析语言(Top-Down Parsing Language,TDPL)的旧式正式语法。然而,描述它的一个简单的方法是在现实世界中的EBNF。上面的例子用peg来写,如下:

letter    ← [a-z]
digit     ← [0-9]
character ← letter / digit
text      ← character+

详细内容见在线视频课程地址DSL与AST实战

编程实例

peg.js是基于javascript实现的peg语法格式分析器,我们可以很方便的实现自定义的DSL解析。线上地址:https://pegjs.org/online ,打开后会默认有个基于peg.js实现的四则运算的例子。大家可以自己看下。 题目1将JavaScript的代码中的if函数转换成三元表达式。 我们经常看到我们代码经过打包编译之后,基本上if函数都不见了,都变成了三元表达式。有的会嵌套很多层,调试起来看得真费劲。那么,你知道怎么实现的么?今天我们基于peg.js实现一个简单的版本。 详细内容见在线视频课程地址DSL与AST实战 题目2,四算法则计算器 这个例子是官网默认的例子,我们直接解析一下,代码如下:

Expression
  = head:Term tail:(_ ("+" / "-") _ Term)* {
      return tail.reduce(function(result, element) {
        if (element[1] === "+") { return result + element[3]; }
        if (element[1] === "-") { return result - element[3]; }
      }, head);
    }

Term
  = head:Factor tail:(_ ("*" / "/") _ Factor)* {
      return tail.reduce(function(result, element) {
        if (element[1] === "*") { return result * element[3]; }
        if (element[1] === "/") { return result / element[3]; }
      }, head);
    }

Factor
  = "(" _ expr:Expression _ ")" { return expr; }
  / Integer

Integer "integer"
  = _ [0-9]+ { return parseInt(text(), 10); }

_ "whitespace"
  = [ \t\n\r]*

详细内容见在线视频课程地址DSL与AST实战

第5章:实现基于http的code loader

现有的例子: http-vue-loader  angular-http-loader  , 更有惊喜的消息是浏览器目前也开始逐步支持动态加载es module,

<script type="module"> 
import {addTextToBody} from './utils.mjs'; 
addTextToBody('Modules are pretty cool.'); 
</script>
// utils.mjs 
export function addTextToBody(text) {
   const div = document.createElement('div'); 
   div.textContent = text; 
   document.body.appendChild(div); 
}

step1:解析export module script脚本 step2. 解析import module脚本 step3. 实现http加载模块,并结合step1解析模块函数,同时调用step2解析出来的函数。 详细内容见在线视频课程地址DSL与AST实战

 

前端进阶系列课程

《用JavaScript自己写Virtual DOM》:http://t.cn/REeKJp0

《前端函数式编程FP易学易用》:http://t.cn/REeKVSk

《前端自己用NodeJS编写区块链BlockChain》:http://t.cn/REeoF7v

《程序语言进阶之DSL与AST实战解析》:http://t.cn/R3XoQJA

fed123版权所有,转载请保留出处:前端123学堂 » 程序语言进阶之DSL与AST实战解析

赞 (2) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏