带你揭开神秘的javascript AST面纱之AST 基础与功能

京东云开发者
• 阅读 128

作者:京东科技 周明亮

AST 基础与功能

在前端里面有一个很重要的概念,也是最原子化的内容,就是 AST ,几乎所有的框架,都是基于 AST 进行改造运行,比如:React / Vue /Taro 等等。 多端的运行使用,都离不开 AST 这个概念。

在大家理解相关原理和背景后,我们可以通过手写简单的编译器,简单实现一个 Javascript 的代码编译器,编译后在浏览器端正常运行。

创建数字小明,等于六加一。
创建数字小亮,等于七减二。
输出,小明乘小亮。

通过实现一个自定义的编译器,我们发现我们自己也能写出很多新的框架。最终目标都是通过编译转换,翻译为浏览器识别的 Javascript + CSS + HTML。

没错!翻译翻译~

带你揭开神秘的javascript AST面纱之AST 基础与功能

当然我们也可以以这个为基础,去实现跨端的框架,直接翻译为机器码,跑到各种硬件上。当然一个人肯定比较困难,你会遇到各种各样的问题需要解决,不过没关系,只要你有好的想法,拉上一群人,你就能实现。

大家记得点赞,评论,收藏,一键三连啊~

分析器

说到这个代码语义化操作前,我们先说说分析器,其实就是编译原理。当你写了一段代码,要想让机器知道,你写了啥。

那机器肯定是要开始扫描,扫描每一个关键词,每一个符号,我们将进行词法分析的程序或者函数叫作词法分析器(Lexical analyzer),通过它的扫描可以将字符序列转换为单词(Token)序列的过程。

扫描到了关键词,我们怎么才能把它按照规则,转换为机器认识的特定规则呢?比如你扫描到:

const a = 1

机器怎么知道要创建一个 变量a并且等于1呢?

所以,这时候就引入一个概念:语法分析器(Syntactic analysis,Parser)。通过语法分析器,不断的调用词法分析器,进行语法检查、并构建由输入的单词组成的数据结构(一般是语法分析树、抽象语法树等层次化的数据结构)。

在JS的世界里,这个扫描后得到的数据结构抽象语法树 【AST】。可能很多人听过这个概念,但是具体没有深入了解。机缘巧合,刚好我需要用到这个玩意,今天就简单聊聊。

抽象语法树 AST

AST是Abstract Syntax Tree的缩写,也就是:抽象语法树。在代码的世界里,它叫这个。在语言的世界里面,他叫语法分析树。

语言世界,举个栗子:

我写文章。

语法分析树:
主语:我,人称代词。
谓语:写,动词。
宾语:文章,名词。

长一点的可能会有:主谓宾定状补。是不是发现好熟悉,想当年大家学语文和英语,那是一定要进行语法分析,方便你理解句子要表达的含义。

PS:对我来说,语法老难了!!!哈哈哈,大家是不是找到感觉了~

接下来我们讲讲代码里面的抽象语法树。

const me = "我"
function write() {
  console.log("文章")
}

那我们用来进行语法分析,能够得到什么内容了?这时候我们可以借助已有的工具,将他们进行分析,进行一个初级入门。

其实我们也可以完全自己进行分析,不过这样就不容易入门,定义的语法规则很多,如果只是看,很容易就被劝退了。而通过辅助工具,我们可以很快接受相关的概念。

常用的工具有很多,比如:Recast 、Babel、Acorn 等等

也可以使用在线 AST 解析:AST Explorer,左上角菜单可以切换到各种解析工具,并且支持各类编程语言的解析,强大好用,可以用来学习,帮助你理解 AST。

带你揭开神秘的javascript AST面纱之AST 基础与功能

为了帮助大家理解,我们一点点的进行解析,并且去掉了部分属性,留下主干部分,完整的可以通过在线工具查看。【不同解析器,对于根节点或者部分属性稍有区别,但是本质是一样的。

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "me"
          },
          "init": {
            "type": "Literal",
            "value": "我",
            "raw": "\"我\""
          }
        }
      ],
      "kind": "const"
    },
    {
      "type": "FunctionDeclaration",
      "id": {
        "type": "Identifier",
        "name": "write"
      },
      "params": [],
      "body": {
        "type": "BlockStatement",
        "body": [
          {
            "type": "ExpressionStatement",
            "expression": {
              "type": "CallExpression",
              "callee": {
                "type": "MemberExpression",
                "object": {
                  "type": "Identifier",
                  "name": "console"
                },
                "property": {
                  "type": "Identifier",
                  "name": "log"
                }
              },
              "arguments": [
                {
                  "type": "Literal",
                  "value": "文章",
                  "raw": "\"文章\""
                }
              ]
            }
          }
        ]
      }
    }
  ],
  "sourceType": "module"
}

接下来,我们一个一个节点看,首先是第一个节点Program

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "kind": "const"
      ...
    },
    {
      "type": "FunctionDeclaration",
      "id": {
        "type": "Identifier",
        "name": "write"
      },
      ....
    }
  ],
  "sourceType": "module"
}

Program是代码程序的根节点,通过它进行节点一层一层的遍历操作。 上面我们看出它有两个节点,一个是变量声明节点,另外一个是函数声明节点。

如果我们再定义一个变量或者函数,这时候 body 就又会产生一个节点。我们要扫描代码文件时,我们就是基于 body 进行层层的节点扫描,直到把所有的节点扫描完成。

    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "me"
          },
          "init": {
            "type": "Literal",
            "value": "我",
            "raw": "\"我\""
          }
        }
      ],
      "kind": "const"
    },

上面对应的代码,就是const me = "我",这个节点告诉我们。 声明一个变量,使用类型是:VariableDeclaration, 他的唯一标识名是:me,初始化值:"我"。

后续的函数分析,也是一样的。

{
      "type": "FunctionDeclaration",
      "id": {
        "type": "Identifier",
        "name": "write"
      },
      "params": [],
      "body": {
        "type": "BlockStatement",
        "body": [
          {
            "type": "ExpressionStatement",
            "expression": {
              "type": "CallExpression",
              "callee": {
                "type": "MemberExpression",
                "object": {
                  "type": "Identifier",
                  "name": "console"
                },
                "property": {
                  "type": "Identifier",
                  "name": "log"
                },
              },
              "arguments": [
                {
                  "type": "Literal",
                  "value": "文章",
                  "raw": "\"文章\""
                }
              ],
            }
          }
        ]
      }
    }

这个节点,清楚的告诉我们,这个函数名是什么,他里面有哪些内容,入参是什么,调用了什么函数对象。

我们发现,通过语法分析器的解析,我们可以把代码,变成一个对象。这个对象将代码分割为原子化的内容,很容易能够帮助机器或者我们去理解它的组成。

这个就是分析器的作用,我们不再是一大段一大段的看代码逻辑,而是一小段一小段的看节点。

有了这个我们可以干什么呢?

AST 在 JS 中的用途

1. 自定义语法分析器,写一个新的框架。

通过对现有的 AST 理解,我们可以依葫芦画瓢,写出自定义的语法分析器,转成自定义的抽象语法树,再进行解析转为浏览器可识别的 Javascript 语言,或者其他硬件上能识别的语言。

比如:React / Vue 等等框架。其实这些框架,就是自定义了一套语法分析器,用他们特定的语言,进行转换,翻译翻译,生成相关的DOM节点,操作函数等等 JS 函数。

2. 利用已有语法分析器,实现多端运行。

通过已有的 AST,我们将代码进行翻译翻译,实现跨平台多端运行。我们将得到代码进行语法解析,通过遍历所有的节点,我们将他们进行改造,使得它能够运行在其他的平台上。

比如:Taro / uni-app 等等框架。我们只要写一次代码,框架通过分析转换,就可以运行到 H5 / 小程序等等相关的客户端。

3. 进行代码改造,预编译增强处理。

依旧是通过已有的 AST,我们将代码进行分析。再进行代码混淆,代码模块化处理,自动进行模块引入,低版本兼容处理。

比如:Webpack / Vite 等等打包工具。我们写完代码,通过他们的处理,进行增强编译,增强代码的健壮性。

AST 的应用实践

我们在进行框架的改造或者适配时,我们可能才会用到这个。常规的方法,可能有两种:

  • 按照特定的写法,通过正则表达式,直接进行大段代码替换。
  • /** mingliang start /consta=1/* mingliang end */

如,我们找到这段代码注释,直接通过code.replace(/mingliang/g, 'xxxx')类似这种方式替换。

  • 通过引入运行,改造相关的变量,再重新写入。
// a.js
cost config = { a: 1 }
return config

我们可能先let config = require(a.js)运行这个文件,我们就得到了这个config这个变量值。

之后我们改写变量config.a = 2,

最后,重新通过fs.writeSync('a.js', 'return ' + JSON.stringify(config, null, 2))写入。

现在,我们就可以掌握新的方法,进行代码改造。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Easter79 Easter79
1年前
typeScript数据类型
//布尔类型letisDone:booleanfalse;//数字类型所有数字都是浮点数numberletdecLiteral:number6;lethexLiteral:number0xf00d;letbinaryLiteral:number0b101
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
1年前
VBox 启动虚拟机失败
在Vbox(5.0.8版本)启动Ubuntu的虚拟机时,遇到错误信息:NtCreateFile(\\Device\\VBoxDrvStub)failed:0xc000000034STATUS\_OBJECT\_NAME\_NOT\_FOUND(0retries) (rc101)Makesurethekern
Wesley13 Wesley13
1年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
1年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
1年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Stella981 Stella981
1年前
AST 与前端工程化实战
\AST:全称为AbstractSyntaxTree,意为抽象语法树,他是源代码语法结构的一种抽象表示。AST是一个非常基础但是同时非常重要的知识点,我们熟知的TypeScript、babel、webpack、vuecli得都是依赖AST进行开发的。本文将通过AST与前段工程化的实战向大家展示AST的强大以及重要性。
Wesley13 Wesley13
1年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_