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

这篇具有很好参考价值的文章主要介绍了带你揭开神秘的javascript AST面纱之AST 基础与功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作者:京东科技 周明亮

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))写入。

现在,我们就可以掌握新的方法,进行代码改造。文章来源地址https://www.toymoban.com/news/detail-411241.html

到了这里,关于带你揭开神秘的javascript AST面纱之AST 基础与功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 揭开神秘面纱,会stream流就会大数据

    目录 准备工作 1.map类 1.1 java stream map 1.2 spark map 1.2.1 MapFunction 1.2.2 MapPartitionsFunction 2.flatMap类 2.1 java stream flatMap 2.2 spark flatMap 3 groupby类 3.1 java stream groupBy 3.2 spark groupBy 3.3 spark groupByKey 4 reduce类 4.1 java stream reduce 4.2 spark reduce 其它常见操作类 小结 如果你会任意一门语言的stream流

    2023年04月27日
    浏览(48)
  • 【Linux】揭开套接字编程的神秘面纱(上)

    ​🌠 作者:@阿亮joy. 🎆 专栏: 《学会Linux》 🎇 座右铭:每个优秀的人都有一段沉默的时光,那段时光是付出了很多努力却得不到结果的日子,我们把它叫做扎根 源IP地址和目的IP地址 源 IP 地址指发送方的 IP 地址,而目的 IP 地址是指接收方的 IP 地址,源 IP 地址和目的

    2023年04月09日
    浏览(103)
  • 06-揭开神秘面纱:Golang method的魅力解析

    📃个人主页:个人主页 🔥系列专栏:Golang基础 💬Go(又称Golang)是由Google开发的开源编程语言。它结合了静态类型的安全性和动态语言的灵活性,拥有高效的并发编程能力和简洁的语法。Go被设计用于构建可扩展、高性能的软件系统,具有优秀的内存管理和快速的编译速度

    2024年02月09日
    浏览(41)
  • 面试篇-揭开Spring Bean加载的神秘面纱

      启动spring容器(创建beanfactory)-加载配置(注解、xml)-实例化bean(执行构造方法)-注入依赖-初始化bean(设置属性值)-使用-销毁 解析和读取 XML 配置文件或注解配置类,获取 Bean 定义信息。 根据 Bean 定义信息实例化 Bean 对象。根据不同的作用域(如 singleton、prototype 等),S

    2023年04月17日
    浏览(47)
  • 华为鸿蒙系统:揭开全新操作系统的神秘面纱

    在全球科技竞争日益激烈的背景下,我国科技巨头华为公司自主研发了一款全新的操作系统——鸿蒙。这款操作系统旨在为华为自家设备提供强大的性能、安全性和智能化特性,以满足用户不断增长的需求。为了帮助广大开发者充分挖掘鸿蒙系统的巨大潜力,华为发布了一本

    2024年02月04日
    浏览(45)
  • 揭开黑客的神秘面纱:黑客文化、技术手段与防御策略

    黑客一词源于英文单词\\\"hacker\\\",它在过去的几十年中经历了很多变化和演变。黑客的定义因其不断变化的含义而变得复杂,但总体上,黑客是指那些具有出色计算机技术与知识的人。他们利用这些技能来探索、发现和改进计算机系统的弱点与缺陷。然而,黑客行为并不一定都

    2024年02月08日
    浏览(61)
  • 1. HBase中文学习手册之揭开Hbase的神秘面纱

    1.1.1 什么是 Hbase? Apache HBase 是 Hadoop 数据库,一种分布式,可扩展的大数据存储。 1.1.2 Hbase的前世今生 Apache HBase 是一个开源、分布式、版本化、非关系数据库, 模仿了 Google 的Bigtable: Chang等人的结构化数据分布式存储系统。 Apache HBase 在 Hadoop 和 HDFS 之上提供类似 Bigtable 的功

    2024年02月12日
    浏览(43)
  • 逍遥自在学C语言 | 揭开while循环的神秘面纱

    循环是一种重要的控制结构,可以使程序重复执行一段代码,直到满足特定条件为止。 在C语言中,while和do-while是两种常用的循环结构,本文将详细介绍这两种循环的用法。 第一位闪亮登场,有请今后会一直教我们C语言的老师 —— 自在。 第二位上场的是和我们一起学习的

    2024年02月06日
    浏览(60)
  • 解密Vue 3:透过原理看框架,揭开它的神秘面纱

    Vue 3 是一种用于 构建用户界面的现代 JavaScript 框架 。它基于 响应式编程 和 虚拟 DOM 技术 ,并通过 组件化 的方式来实现可重用的 UI 组件。 下面是 Vue 3 的主要原理: Vue 3 的核心是其响应式系统,它用于 追踪数据变化并使其自动更新 。Vue 3 使用 ES6 的 Proxy 对象来 实现监听

    2024年02月12日
    浏览(43)
  • AI辅写疑似度检测PaperPass:揭开神秘面纱,探索无尽可能

    大家好,小发猫降ai今天来聊聊AI辅写疑似度检测paperbert:揭开神秘面纱,探索无尽可能,希望能给大家提供一点参考。降ai辅写 以下是针对论文AI辅写率高的情况,提供一些修改建议和技巧,可以借助此类工具: 还有: AI辅写疑似度检测paperbert:揭开神秘面纱,探索无尽可能

    2024年03月08日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包