ES module 工作原理浅谈

ES module(ECMAScript module)的工作过程涉及三个主要步骤:获取、解析和实例化。

获取步骤涉及获取所有需要的模块。当JavaScript引擎遇到import语句时,它首先查看module map是否已经有了一个与URL匹配的条目。如果没有,则会生成一个新的请求获取这个模块。

然后,JavaScript引擎解析获取到的文件,以便了解其中的模块结构。所有的模块都是在相当于文件顶部使用了严格模式下被解析的。一旦module record创建完成,它就会被放到module map里面去。

最后的步骤是实例化,JavaScript引擎生成一个模块环境记录,它管理module record的变量,然后把内存里的所有导出的变量链接起来。实例化模块图(module graph),JS引擎会使用一个深度优先后序遍历的操作。这意味着在实例化阶段,它会首先设置所有没有依赖的模块的导出,然后再设置这些模块的导入。

值得注意的是,ES module使用的是实时绑定,也就是说,导出模块和导入模块都指向同一片内存地址。如果导出模块修改了一个值,那么这个修改也会在导入模块里体现出来。

例如:
// counter.mjs
console.log('counter module evaluation');
let i = 0;
export function increment() {
  i++;
}
export function get() {
  return i;
}

// main.mjs
import * as counter from './counter.mjs';
console.log('main module evaluation');
counter.increment();
console.log(counter.get());   // 1

在上述例子中,main模块导入了counter模块,并调用其导出的increment函数增加i的值。然后,通过调用get函数,我们可以看到,导出模块的i值的变化在导入模块里也得到了体现。

ES模块处理循环依赖的情况

ES模块在处理循环依赖的情况时,会采取一种特殊的机制来解决这个问题,这个机制被称为“引入赋值”。

当一个模块被第一次执行时,它会被初始化为一个未完成的状态。这意味着导入的模块只包含模块的接口,而模块的内容暂时为空。在处理循环依赖时,ES模块系统会检测到循环依赖并在其中一个模块未完成时暂停执行。

当另一个模块需要导入暂停执行的模块时,ES模块系统会返回一个接口对象,该对象是一个空对象,只包含导出的接口,而真正的内容将在依赖的模块执行完毕后被添加到该对象中。

这种机制确保了循环依赖时模块系统的稳定性和效率。虽然循环依赖在模块设计中应该尽量避免,但当不可避免时,ES模块系统的引入赋值机制能够成功解决循环依赖问题。

块的导入顺序是否会影响ES模块的实例化过程

以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/761313.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

OSRAM欧司朗XBO短弧氙灯160WHSXLOFR短弧氙灯450W

OSRAM欧司朗XBO短弧氙灯160WHSXLOFR短弧氙灯450W

【python012】Python根据页码处理PDF文件的内容

在日常工作和学习中,需要从PDF文件中提取特定页面的内容,以便进行知识、材料压缩等。 2.欢迎点赞、关注、批评、指正,互三走起来,小手动起来! 3.欢迎点赞、关注、批评、指正,互三走起来,小手动起…

Java外卖点餐连锁店餐饮生鲜奶茶外卖店内扫码点餐源码同城外卖校园外卖源码

外卖点餐连锁店餐饮生鲜奶茶外卖小程序:打造一站式便捷服务 🚀 引领外卖新潮流:小程序的力量 在数字化时代,外卖小程序已成为餐饮行业的新宠。它不仅提供了便捷的点餐服务,还融合了连锁店、餐饮生鲜、奶茶等多种业务…

【机器学习】机器学习与医疗健康在疾病预测中的融合应用与性能优化新探索

文章目录 引言第一章:机器学习在医疗健康中的应用1.1 数据预处理1.1.1 数据清洗1.1.2 数据归一化1.1.3 特征工程 1.2 模型选择1.2.1 逻辑回归1.2.2 决策树1.2.3 随机森林1.2.4 支持向量机1.2.5 神经网络 1.3 模型训练1.3.1 梯度下降1.3.2 随机梯度下降1.3.3 Adam优化…

P4. 微服务: 匹配系统(下)

P4. 微服务: 匹配系统 下 0 概述1 游戏同步系统1.1 游戏同步的设计1.2 游戏同步的实现 2 匹配系统微服务的实现2.1 微服务概述2.2 匹配系统接口url的实现2.3 微服务之间的通信2.4 匹配逻辑的实现2.5 匹配系统的权限控制 3 bug的解决3.1 自己匹配自己3.2 断开连接问题 0 概述 本…

3403两个图像分析引擎差异

1.设置环境变量差异 2.获取数据大小差异 3.ATC差异

【EXCEL技巧】Excel如何将数字前面的0去掉

Excel文件中经常会遇到数据是0001345这种,那么,如何将数字前面的0去掉呢?今天和大家分享方法。 首先,选中一列空的单元格,然后在单元格中输入公式TEXT(D3,0),这里的D3指的是前面带有0的数据的位置 回车之后…

Elasticsearch:Painless scripting 语言(一)

Painless 是一种高性能、安全的脚本语言,专为 Elasticsearch 设计。你可以使用 Painless 在 Elasticsearch 支持脚本的任何地方安全地编写内联和存储脚本。 Painless 提供众多功能,这些功能围绕以下核心原则: 安全性:确保集群的…

【征服数据结构】:期末通关秘籍

【征服数据结构】:期末通关秘籍 💘 数据结构的基本概念😈 数据结构的基本概念😈 逻辑结构和存储结构的区别和联系😈 算法及其特性😈 简答题 💘 线性表(链表、单链表)&…

RPC架构基本结构和核心技术

当你在构建一个分布式系统时,势必需要考虑的一个问题是:如何实现服务与服务之间高效调用?当然,你可以使用Dubbo或Spring Cloud等分布式服务框架来完成这个目标,这些框架帮助我们封装了技术实现的复杂性。那么&#xff…

【论文阅读】-- 研究时间序列可视化,提升用户体验

Investigating Time Series Visualisations to Improve the User Experience 摘要1 引言2 相关工作互动技巧视觉编码坐标系 3 用户研究时间序列可视化互动技巧任务实验设计 4 结果交互技术的效果视觉编码的影响坐标系的影响 5 讨论交互技术的效果视觉编码的影响坐标系的影响 6 …

[JS]正则表达式

介绍 正则表达式是定义匹配字符串的规则, 在JS中, 正则表达式也是对象, 通常用于查找或替换符合规则的文本 许多语言都支持正则表达式, 在前端中常见的场景就是表单验证和敏感词替换 语法 正则字面量 / / const str 好好学习,天天向上 // 1.定义规则: const reg /好///…

17964 水桶打水

这是一个优先队列(堆)和贪心算法的问题。我们可以使用C来解决这个问题。 首先,我们需要创建一个优先队列来存储每个水龙头的结束时间。然后,我们将所有人的打水时间从小到大排序。接着,我们将每个人分配给最早结束的水…

深入解析Flowable:工作流与业务流程管理引擎

深入解析Flowable:工作流与业务流程管理引擎 引言 在数字化时代,企业对流程自动化的需求日益增长。有效的工作流和业务流程管理系统可以帮助组织提高生产力、优化资源分配以及增强决策支持。Flowable是一款开源的工作流和业务流程管理(BPM&a…

MeterSphere v3.0全新启航,让软件测试工作更简单、更高效

2024年7月1日,MeterSphere v3.0版本正式发布。MeterSphere v3.0是新一代的测试管理和接口测试工具,致力于让软件测试工作更简单、更高效,不再成为持续交付的瓶颈。 在团队协作方面,针对目前企业软件测试团队所面临的测试工具不统…

springboot项目requestId设置、统一responsebody封装以及切面

利用filter设置requestId import cn.hutool.core.lang.UUID; import lombok.extern.slf4j.Slf4j; import org.slf4j.MDC; import org.springframework.cloud.gateway.filter.GatewayFilterChain; import org.springframework.cloud.gateway.filter.GlobalFilter; import org.s…

绿联NAS进入SSH的方法

1. 进入【设备管理】,在调试功能中,开启远程调试功能,发送手机验证码,你将得到一个3天有效期的验证码,就是ssh登录密码。 2. 使用终端工具或ssh命令直接登录SSH。 端口是922,账号是:root&#…

界面组件DevExpress WPF v24.1 - 增强的可访问性 UI自动化

DevExpress WPF拥有120个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 DevExpress WPF控件日…

全网最详细的 gin框架请求数据绑定Bind 源码解析 -- 帮助你全面了解gin框架的请求数据绑定原理和方法

在gin框架中,我们可以将多种请求数据(json, form,uri,header等)直接绑定到我们定义的结构体,底层是通过反射方式获取我们定义在结构体上面的tag来实现请求数据到我们的结构体数据的绑定的。 在gin的底层有2大体系的数据…

华为HCIP Datacom H12-821 卷19

1.多选题 如图所示,RTA 的 GE0/0/0、GE0/0/1 接口分别连接部门 1 和 2,其网段分别为 10.1.2.0/24、 10.1.3.0/24 网段,为限制部门 1 和 2 之间的相互访问,在 RTA 上部署 traffic-filter,以下哪些部署方式是正 确? A、配置 ACL3000 拒绝源为 10.1.2.0/24 目的为 10.1.3.0…