咨询热线

400-123-4567

您当前的位置: 首页 > 新太阳城网资讯

树英语语法 你怎么可以不了解 AST 呢?

文章作者:佚名    时间:2024-01-03 18:02:12

/

周世铁,微医前端技术部医疗支撑组前端架构师

前言

在我们编写业务代码的时候,可能很少人会使用到AST,以至于大多数同学都不大了解AST。有的同学曾经学过,但是不去实践的话,过段时间又忘的差不多了。看到这里,你会发现说的就是你。听说贵圈现在写文章都要编故事,时不时还要整点表情包。这是真的吗?作为公司最头铁的前端,我就不放。

本文将通过以下几个方面对AST进行学习

基础知识

实战小例子

总结

基础知识

AST是什么

先贴下官方的解释

在计算机科学中,抽象语法树( tree 或者缩写为 AST),或者语法树( tree),是源代码的抽象语法结构的树状表现形式,这里特指编程语言的源代码。

为了方便大家理解抽象语法树,来看看具体的例子。

var tree = 'this is tree'

js 源代码将会被转化成下面的抽象语法树

{ "type": "Program", "start": 0, "end": 25, "body": [ { "type": "VariableDeclaration", "start": 0, "end": 25, "declarations": [ { "type": "VariableDeclarator", "start": 4, "end": 25, "id": { "type": "Identifier", "start": 4, "end": 8, "name": "tree" }, "init": { "type": "Literal", "start": 11, "end": 25, "value": "this is tree", "raw": "'this is tree'" } } ], "kind": "var" } ], "sourceType": "module"}

可以看到一条语句由若干个词法单元组成。这个词法单元就像 26 个字母。创造出个十几万的单词,通过不同单词的组合又能写出不同内容的文章。

至于有哪些词法单元可点击查看AST 对象文档 或者 参考掘金大佬的文章高级前端基础- 抽象语法树 AST里面列举了语法树节点与解释。

推荐一个工具 在线 ast 转换器。可以在这个网站上,亲自尝试下转换。点击语句中的词,右边的抽象语法树节点便会被选中,如下图:

树英语语法_英语语法树图_语法树简单短语

tree.jpg

AST 有什么用AST 如何生成

看到这里,你应该已经知道抽象语法树大致长什么样了。那么AST又是如何生成的呢?

AST 整个解析过程分为两个步骤:

还是以上面var tree = 'this is tree'为例

正规理解

先经过词法分析,扫描输入的源代码字符串,生成一系列的词法单元 ()。这些词法单元包括数字,标点符号,运算符等

语法树简单短语_英语语法树图_树英语语法

树英语语法_语法树简单短语_英语语法树图

.png

语法分析阶段就会将上一阶段生成的 列表转换为如下图所示的 AST(我把start、end字段去掉了不用在意)

语法树简单短语_英语语法树图_树英语语法

ast.png

非正规理解

郑重声明:我周某人语文很少及格,大致意思能理解就好。

例子:"它是猪。"

先经过词法分析,扫描输入的源代码字符串,生成一系列的词法单元 ()。这些词法单元包括数字,标点符号,运算符等

语法树简单短语_树英语语法_英语语法树图

.png

语法分析阶段就会将上一阶段生成的 列表转换为如下图所示的 AST

英语语法树图_语法树简单短语_树英语语法

.png

,把 js 源码转化为抽象语法树的解析器。

实战小例子

例子 1:去

源代码:

function fn() { console.log('debugger') debugger;}

根据前面学过的知识点,我们先脑海中意淫下如何去掉这个

先将源代码转化成AST

遍历**AST**上的节点,找到****节点,并删除

将转换过的AST再生成JS代码

将源代码拷贝到 在线 ast 转换器 中,并点击左边区域的,可以看到左边的节点就被选中了。所以只要把图中选中的抽象语法树节点删除就行了。

树英语语法_英语语法树图_语法树简单短语

这个例子比较简单,直接上代码。

这个例子我使用@babel/、@babel/、@babel/,它们的作用分别是解析、转换、生成。

语法树简单短语_英语语法树图_树英语语法

const parser = require('@babel/parser');const traverse = require("@babel/traverse");const generator = require("@babel/generator");
// 源代码const code = `function fn() { console.log('debugger') debugger;}`;
// 1. 源代码解析成 astconst ast = parser.parse(code);

// 2. 转换const visitor = { // traverse 会遍历树节点,只要节点的 type 在 visitor 对象中出现,变化调用该方法 DebuggerStatement(path) { // 删除该抽象语法树节点 path.remove(); }}traverse.default(ast, visitor);
// 3. 生成const result = generator.default(ast, {}, code);
console.log(result.code)
// 4. 日志输出
// function fn() {// console.log('debugger');// }

babel核心逻辑处理都在里。会遍历树节点,只要节点的type在对象中出现,便会调用该type对应的方法,在方法中调用path.()将当前节点删除。demo中使用到的path的一些api可以参考babel-。

例子 2:修改函数中执行的 .log 参数

我们有时候在函数里打了日志,但是又想在控制台直观的看出是哪个函数中打的日志,这个时候就可以使用AST,去解析、转换、生成最后想要的代码。

源代码:

function funA() { console.log(1)}// 转换成
function funA() { console.log('from function funA:', 1)}

在编码之前,我们先理清思路,再下手也不迟。这个时候就需要借助 在线 ast 转换器来分析了。

英语语法树图_树英语语法_语法树简单短语

funA.png

通过工具发现想要实现这个案例只需要往前面插入段节点就可以了。

这里也像例子 1 一样先梳理下思路

使用 @babel/ 将源代码解析成 ast

监听 @babel/ 遍历到

触发后,判断如果执行的方法是 .log 时,往 一个

将转换后的 ast 生成代码

将 js 代码解析成 ast 与 将 ast 生成 js 代码与去 例子一致,这里将不再描述。

首先监听遍历

const visitor = { CallExpression(path) { // console.log(path) }

观察 在线 ast 转换器 解析后的树,我们只要判断path 的 中存在对象 及属性 。就可以往当前的 path 的 一个

这里的 types 对象是使用了一个新包 @babel/types , 用来判断类型。

上面用到的,,,都可以在babel-文档中找到,本文就不解释了。

const visitor = { // 当遍历到 CallExpression 时候触发 CallExpression(path) { const callee = path.node.callee; // 判断当前当前执行的函数是否是组合表达式 if (types.isMemberExpression(callee)) { const { object, property } = callee; if (types.isIdentifier(object, { name: 'console' }) && types.isIdentifier(property, { name: 'log' })) { // 查找最接近的父函数或程序 const parent = path.getFunctionParent(); const parentFunName = parent.node.id.name; path.node.arguments.unshift(types.stringLiteral(`from function ${parentFunName}`)) } } }}

总结

就像前言所说的,我们的日常工作中很少会去使用AST,以至于大多数同学都不大了解AST。但了解了 AST 可以帮助我们更好地理解开发工具、编译器的原理,并产出提高代码效率的工具。还记得我在之前的前端小组遇到一个问题,我们项目是ssr项目,在服务端执行的生命周期不允许出现客户端才能执行的代码。但是小组成员有时候无意的写了,导致服务端渲染降级。在学习AST之前,我为了解决这个问题,写了个通过正则去匹配校验,当时可真是逼死我了,正则需要去适配各种场景。后面我学习了AST了之后,编写了个插件实现了客户端代码校验。

参考

地址:新太阳城网·(中国)官方网站 广州市天河区龙口西路551号    电话:400-123-4567     传真:+86-123-4567
版权所有:Copyright © 2002-2023 新太阳城网 版权所有 非商用版本    ICP备案编号:苏ICP备28000507号