草庐IT

ES Module原理详解

goodlovingz 2024-05-03 原文

ES Module原理详解

ES Module 系列:

一、ES Modules如何工作

当前,在浏览器中通过 <script type="module"> 已原生支持 ESM。以vite创建的Vue3项目为例:

// index.html文件
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" href="favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>xxxx</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>

其中/src/main.ts是Vue3的入口文件。

注意:浏览器中ES Module是异步加载,不会堵塞浏览器,即等到整个页面渲染完,再执行模块脚本。如果网页有多个ESM,它们会按照在页面出现的顺序依次执行。

流程简析

1、创建AST

当使用ES Modules进行开发时,实际上以入口节点为根节点(如main.js)创建出一张依赖关系图。不同依赖项之间通过export\import语句来进行关联。

2、生成 Module Record

浏览器无法直接使用文件本身,但是浏览器会解析这些文件,根据 import/export 语句构成模块记录(Module Record),每个模块文件对应生成一个 Module Record,记录当前模块的信息:

3、转化 Module Instance

模块记录转化为模块实例,浏览器最终能够读取也就是Module Instance

二、模块加载

模块加载的过程就是从入口文件到拥有一个完整的模块实例图的过程,对于 ES Module 来说,分三步进行:

构造:查找、下载并解析所有文件到模块记录中。

实例化:在内存中寻找一块区域来存储所有导出的变量(但还没有填充值)。然后让 export 和 import 都指向这些内存块。这个过程叫做链接(linking)

求值:在内存块中填入变量的实际值。

1、构造

在构造阶段,每个模块都会经历三件事情:

  • 查找:找出从哪里下载包含该模块的文件(也称为模块解析);

    通常会有一个入口文件,然后通过import代码去寻找与之关联的其他模块,形成一个依赖关系树(AST)

  • 下载:获取文件(从 URL 下载或从文件系统加载);

    解析文件前,需要一层一层地遍历树,找出它的依赖项,然后找到并加载这些依赖项;

  • 解析:将文件解析为模块记录;

    把解析出来的模块构成表 称为 Module Record (模块记录)。

    Module Record 包含了当前模块的 AST,引用了哪些模块的变量,以及一些特定属性和方法。

    一旦 Module Record 被创建,它会被记录在模块映射Module Map中。被记录后,如果再有对相同 URL 的请求,Loader 将直接采用 Module MapURL 对应的Module Record

在构造过程结束时,从主入口文件变成了一堆模块记录Module Record

2、实例化

实例化阶段:将构造的模块实例化并将所有实例链接在一起。

模块实例包含两部分:代码、状态

状态存在于内存中,因此实例化步骤就是写入内存。

首先,JS引擎创建一个模块环境记录(Module Enviroment Record)来管理 Module Record 的变量。然后它在内存中找到所有导出内容对应的位置。模块环境记录将跟踪内存中导出内容对应的位置与导出内容间的联系。

此时内存中的这些位置中还不会存放值,只有在计算后才会有值。

注意,导出和导入都指向内存中的同一位置。首先链接导出,可确保所有导入都可以链接到匹配的导出。

ES Module 的这种连接方式被称为 Live Bindings(动态绑定);

ES 模块使用称为动态绑定的东西。两个模块都指向内存中的相同位置。这意味着当导出模块更改值时,该更改将显示在导入模块中。导出值的模块可以随时更改这些值,但导入模块不能更改其导入的值,虽然有此限制,但是如果一个模块导入一个对象,导入模块中可以更改该对象上的属性值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-luLYO6K6-1652615360924)(http://img.wawow.xyz/imgs/esm5.png)]

拥有这样的动态绑定可以使我们在不运行任何代码的情况下连接所有模块。

实例化结束时,已经连接了export/import变量的所有实例和内存位置。

3、求值

最后一步,在内存区中填充绑定的数据的值。

JS 引擎通过执行顶层代码(函数之外的代码,此处可以理解为模块文件中顶层作用域中的代码)来给内存区的引用赋值。

总结

  • ES Module执行分为三个阶段:构造阶段、实例化阶段、求值阶段

  • 构造阶段:

    • 1、根据入口创建依赖关系的AST;
    • 2、下载module文件,用于解析;
    • 3、解析每个module文件,生成 Module Record(包含当前module的AST、变量等);
    • 4、将Module Record 映射到 Module Map中,保持每个module文件的唯一性;

    构造阶段最后生成根据依赖关系AST的 Module Record的依赖树,同时将每个Module Record映射保存到Module Map中。

  • 实例化阶段:

    • 1、生成模每个Module Record的块环境记录(Module Enviroment Record),用来管理 Module Record 的变量等;
    • 2、在内存中写入每个Module的数据,同时 Module文件的导出export和引用文件的 import指向该地址;

    实例化阶段确定了 export和import内存中的指向,同时该内存空间中定义了Module文件的变量(但是还未赋值);

  • 求值阶段:

    • 1、执行对应Module文件中顶层作用域的代码,确定实例化阶段中定义变量的值,放入内存中;

    求值阶段确定了Module文件中变量的值,由于 ES Module使用的是动态绑定(指向内存地址),export中修改数据会映射到内存中,import数据相应也会改变。

参考

ES modules: A cartoon deep-dive

有关ES Module原理详解的更多相关文章

  1. 物联网MQTT协议详解 - 2

    一、什么是MQTT协议MessageQueuingTelemetryTransport:消息队列遥测传输协议。是一种基于客户端-服务端的发布/订阅模式。与HTTP一样,基于TCP/IP协议之上的通讯协议,提供有序、无损、双向连接,由IBM(蓝色巨人)发布。原理:(1)MQTT协议身份和消息格式有三种身份:发布者(Publish)、代理(Broker)(服务器)、订阅者(Subscribe)。其中,消息的发布者和订阅者都是客户端,消息代理是服务器,消息发布者可以同时是订阅者。MQTT传输的消息分为:主题(Topic)和负载(payload)两部分Topic,可以理解为消息的类型,订阅者订阅(Su

  2. Tcl脚本入门笔记详解(一) - 2

    TCL脚本语言简介•TCL(ToolCommandLanguage)是一种解释执行的脚本语言(ScriptingLanguage),它提供了通用的编程能力:支持变量、过程和控制结构;同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发,脚本编程,GUI和测试等方面。•实际上包含了两个部分:一个语言和一个库。首先,Tcl是一种简单的脚本语言,主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的,因此在某种意义上我们又可以把TCL看作C库,这个库中有丰富的用于扩展TCL命令的C\C++过程和函数,所以,Tcl是

  3. 【Unity游戏破解】外挂原理分析 - 2

    文章目录认识unity打包目录结构游戏逆向流程Unity游戏攻击面可被攻击原因mono的打包建议方案锁血飞天无限金币攻击力翻倍以上统称内存挂透视自瞄压枪瞬移内购破解Unity游戏防御开发时注意数据安全接入第三方反作弊系统外挂检测思路狠人自爆实战查看目录结构用il2cppdumper例子2-森林whoishe后记认识unity打包目录结构dll一般很大,因为里面是所有的游戏功能编译成的二进制码游戏逆向流程开发人员代码被编译打包到GameAssembly.dll中使用il2ppDumper工具,并借助游戏名_Data\il2cpp_data\Metadata\global-metadata.dat

  4. 【详解】Docker安装Elasticsearch7.16.1集群 - 2

    开门见山|拉取镜像dockerpullelasticsearch:7.16.1|配置存放的目录#存放配置文件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/config#存放数据的文件夹mkdir-p/opt/docker/elasticsearch/node-1/data#存放运行日志的文件夹mkdir-p/opt/docker/elasticsearch/node-1/log#存放IK分词插件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/plugins若你使用了moba,直接右键新建即可如上图所示依次类推创建

  5. 【Elasticsearch基础】Elasticsearch索引、文档以及映射操作详解 - 2

    文章目录概念索引相关操作创建索引更新副本查看索引删除索引索引的打开与关闭收缩索引索引别名查询索引别名文档相关操作新建文档查询文档更新文档删除文档映射相关操作查询文档映射创建静态映射创建索引并添加映射概念es中有三个概念要清楚,分别为索引、映射和文档(不用死记硬背,大概有个印象就可以)索引可理解为MySQL数据库;映射可理解为MySQL的表结构;文档可理解为MySQL表中的每行数据静态映射和动态映射上面已经介绍了,映射可理解为MySQL的表结构,在MySQL中,向表中插入数据是需要先创建表结构的;但在es中不必这样,可以直接插入文档,es可以根据插入的文档(数据),动态的创建映射(表结构),这就

  6. 最强Http缓存策略之强缓存和协商缓存的详解与应用实例 - 2

    HTTP缓存是指浏览器或者代理服务器将已经请求过的资源保存到本地,以便下次请求时能够直接从缓存中获取资源,从而减少网络请求次数,提高网页的加载速度和用户体验。缓存分为强缓存和协商缓存两种模式。一.强缓存强缓存是指浏览器直接从本地缓存中获取资源,而不需要向web服务器发出网络请求。这是因为浏览器在第一次请求资源时,服务器会在响应头中添加相关缓存的响应头,以表明该资源的缓存策略。常见的强缓存响应头如下所述:Cache-ControlCache-Control响应头是用于控制强制缓存和协商缓存的缓存策略。该响应头中的指令如下:max-age:指定该资源在本地缓存的最长有效时间,以秒为单位。例如:Ca

  7. IDEA 2022 创建 Spring Boot 项目详解 - 2

    如何用IDEA2022创建并初始化一个SpringBoot项目?目录如何用IDEA2022创建并初始化一个SpringBoot项目?0. 环境说明1.  创建SpringBoot项目 2.编写初始化代码0. 环境说明IDEA2022.3.1JDK1.8SpringBoot1.  创建SpringBoot项目        打开IDEA,选择NewProject创建项目。        填写项目名称、项目构建方式、jdk版本,按需要修改项目文件路径等信息。        选择springboot版本以及需要的包,此处只选择了springweb。        此处需特别注意,若你使用的是jdk1

  8. 详解Unity中的粒子系统Particle System (二) - 2

    前言上一篇我们简要讲述了粒子系统是什么,如何添加,以及基本模块的介绍,以及对于曲线和颜色编辑器的讲解。从本篇开始,我们将按照模块结构讲解下去,本篇主要讲粒子系统的主模块,该模块主要是控制粒子的初始状态和全局属性的,以下是关于该模块的介绍,请大家指正。目录前言本系列提要一、粒子系统主模块1.阅读前注意事项2.参考图3.参数讲解DurationLoopingPrewarmStartDelayStartLifetimeStartSpeed3DStartSizeStartSize3DStartRotationStartRotationFlipRotationStartColorGravityModif

  9. Slowloris DoS攻击的原理与简单实现 - 2

    前言    Slowloris攻击是我在李华峰老师的书——《MetasploitWeb 渗透测试实战》里面看的,感觉既简单又使用,现在这种攻击是很容易被防护的啦。不过我也不敢真刀实战的去试,只是拿个靶机玩玩罢了。         废话还是写在结语里面吧。(划掉)结语可以不看(划掉)Slowloris攻击的原理        Slowloris是一种资源消耗类DoS攻击,它利用部分HTTP请求进行操作。也叫做慢速攻击,这里的慢速并不是说发动攻击慢,而是访问一条链接的速度慢。Slowloris攻击的功能是打开与目标Web服务器的连接,然后尽可能长时间的保持这些连接打开。如果由多台电脑同时发起Slo

  10. VMware虚拟机与本地主机进行磁盘共享(详解) - 2

    VMware虚拟机与本地主机进行磁盘共享前提虚拟机版本为Windows10(专业版,不是可能有问题)本地主机为家庭版或学生版(此版本会有问题,但有替代方式)最好是专业版VMware操作1.关闭防火墙,全部关闭。2.打开电脑属性3.点击共享-》高级共享-》权限4.如果没有everyone,就添加权限选择完全控制,然后应用确定。5.打开cmd输入lusrmgr.msc(只有专业版可以打开)如果不是专业版,可以跳过这一步。点击用户-》administrator密码要复杂密码,否则不行。推荐admaiN@1234类型的密码。设置完密码,点击属性,将禁用解开。6.如果虚拟机的windows不是专业版,可

随机推荐