前端 JS 经典:浏览器中 ESModule 的工作原理

前言:在开发中,我们经常写出如下代码。这就是 ES 模块化。那浏览器是如何运行的,它的运作机制到底是怎么样的呢。

在 index.html 导入 main.js

<script src="./main.js" type="module"></script>

在 main.js 中导入 bar.js

import bar from "./bar.js";

在 bar.js 中导入 foo.js 然后动态导入 async.js

import foo from "./foo.js";import("./async.js").then((e) => {});

首先浏览器使用 ESModule 导入了 main.js,在这 main.js 里面又间接或直接导入了其他的 js。形成了模块化的依赖。

在浏览器导入 main.js 时,会做第一件事,模块化的解析,这不是 js 运行哦!那怎么来做解析呢,首先把这个 url 地址补全,因为现在是相对路径,然后去下载相应模块,拿到这个模块里面的代码,然后继续解析这个模块里面的代码,会拿到这个模块里所有的顶级静态导入语句。那什么是顶级静态导入语句勒,顶级是写在最上面的导入,静态就是,不是写在判断或循环里面的导入。比如 import bar from "./bar.js" 这种。

解析结束后,就会进行下一个阶段,模块的执行。怎么执行呢,回到入口文件,先执行第一行,如果是 import,就会进入到 from 导入的 js 里,又去执行 js 里面的代码,一直循环。执行结束后,会导出一个东西,导出后,浏览器会在内部生成一个映射表,为什么要做映射呢,是为了缓存,将来还有别的模块使用映射表里的模块,就直接从这个表格获取东西交给他了。

然后遇到动态导入语句,动态导入语句是在执行的时候导入,然后解析,得到完整的 url 地址,然后去下载这个 js。继续解析。

这就是浏览器 ESModule 的运行机制。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

广西教育杂志社与广西教育编辑部

【广西教育】期刊咨询电话&#xff1a;18366155179 咨询电话&#xff1a;18366155179编辑部----论文投稿---【广西教育】杂志编辑部--期刊发表---【广西教育】编辑期刊出刊--【广西教育】在线咨询---编辑QQ&#xff1a;1529962369 【广西教育】----在线投稿QQ&#xff1a;26480…

【文献阅读】移动边缘计算中基于CNN模型分割的计算适配和负载均衡研究_黄煜

论文原链接&#xff1a;移动边缘计算中基于CNN模型分割的计算适配和负载均衡研究 缩写词 MEC&#xff1a;移动边缘计算&#xff1b; CNN&#xff1a;卷积神经网络&#xff1b; QoE&#xff1a;体验质量&#xff1b; LB&#xff1a;负载均衡&#xff1b; ITM&#xff1a;反变换…

DM8启动报错:全局参数非法

问题描述 开发让把数据库启动下&#xff0c;启动后输入如下报错&#xff1a; 字面意思的报错就是参数非法&#xff0c;推测是有人改参数没改对&#xff0c;可是和开发沟通没人改参数。 --查看进程 [roottopnet31 ~]# ps -ef | grep dmserver dmdba 34732 1 1 5月27 …

K8s service 进阶

文章目录 K8s service 进阶Service 工作逻辑Service 具体实现Service 资源类型ClusterIPNodePortLoadBalancerExternalName Service 与 EndpointEndpoint 与 容器探针自定义Endpoint Service 相关字段sessionAffinityexternalTrafficPolicyinternalTrafficPolicypublishNotRead…

异构图上的连接预测二

异构图上的连接预测二 对整个大图进行transform处理获取批次子图定义GNN网络定义分类器&#xff1a;整合模型。开始训练&#xff1a; 对整个大图进行transform处理 详细描述过程都在代码中体现。 transform T.RandomLinkSplit(num_val0.1, # 10%的 边 作为验证集&#xff0c…

Python怎么实现动态的方法调用?比如Ruby就有元编程

在Python中&#xff0c;你可以使用getattr函数来实现动态的方法调用&#xff0c;这与Ruby中的元编程类似。getattr函数用于获取对象&#xff08;如模块、类、实例等&#xff09;的属性&#xff0c;如果属性是一个方法&#xff0c;那么你可以像调用普通方法一样调用它。 以下是一…

cfa三级大神复习经验分享系列(三)

怎么才能通过考试&#xff1f;   很简单----努力&#xff01; 第一&#xff1a;要熟   书看得再多&#xff0c;知识点掌握得再全面&#xff0c;最终是在考试中体现出来。光看书不行&#xff1b;只是看懂了不行&#xff1b;看懂了&#xff0c;记不住不行&#xff1b;记住了…

Chisel入门——在windows下vscode搭建|部署Scala2.13.3开发环境|用Chisel点亮FPGA小灯

文章目录 前言一、vscode搭建scala开发环境1.1 安装Scala官方插件Scala Syntax1.2 创建hello_world.scala文件1.3 确认java的版本(博主使用的是1.8)1.4 下载Scala Windows版本的二进制文件1.5 配置环境变量1.6 交互模式测试一下1.7 vscode运行scala 二、windows安装sbt2.1 下载…

全屏后 element-ui 组件不显示

文章目录 问题分析ElementUI 解决方案ElementPlus 解决方案 注意 问题 上篇我们说到如何 将 DIV 全屏展示 在使用将页面中指定的 DIV 全屏展示后&#xff0c;出现全屏后 element-ui 组件不显示&#xff0c;全屏后展示的提示信息是没有的&#xff0c;如下如所示&#xff1a; 全…

【linux自动化实践】linux shell 脚本 替换某文本

在Linux shell脚本中&#xff0c;可以使用sed命令来替换文本。以下是一个基本的例子&#xff0c;它将在文件example.txt中查找文本old_text并将其替换为new_text sed -i s/old_text/new_text/g example.txt解释&#xff1a; sed: 是stream editor的缩写&#xff0c;用于处理文…

Docker 入门版

目录 1. 关于Docker 2. Dockr run命令中常见参数解读 3. Docker常见命令 4. Docker 数据卷 5. Docker本地目录挂载 6. 自定义镜像 Dockerfile 语法 自定义镜像模板 Demo 7. Docker网络 1. 关于Docker 在docker里面下载东西&#xff0c;就是相当于绿色面安装板&#x…

Android ViewPager2 + FragmentStateAdapter 的使用以及问题

场景介绍&#xff1a;在Android业务功能开发的过程中&#xff0c;需要使用到嵌套ViewPage2实现页面切换&#xff0c;这种场景在我们的开发过程中并不少见&#xff0c;大致结构为一个activity包含一个viewPage2&#xff0c;这个viewPage2中存在一个fragment A&#xff0c;fragme…

视频智能分析平台LntonAIServer视频监控管理平台裸土检测算法的重要性与应用

随着科技的飞速发展&#xff0c;人工智能技术在各个领域的应用越来越广泛。其中&#xff0c;LntonAIServer裸土检测算法作为一种先进的技术手段&#xff0c;已经在农业、环境保护等领域取得了显著的成果。本文将探讨LntonAIServer裸土检测算法的重要性及其在实际应用中的优势。…

go语言中的一个优雅的冥等补偿算法 backoff - 业务逻辑重试示例

今天给大家介绍一个go语言里面的冥等补偿算法库 backoff&#xff0c; 他可以用来对我们需要冥等补偿的业务逻辑进行重试&#xff0c;我们可以设定一个最大间隔时间&#xff0c; 停止时间等重试规则&#xff0c;废话不多说直接三示例&#xff1a; 业务逻辑重试示例 exp : backo…

使用js实用工具库lodash做对象的深拷贝

const lodash require(lodash)let obj {user: {name: xutongbao}}let objCopy lodash.cloneDeep(obj)objCopy.user.name xuconsole.log(obj)console.log(objCopy)https://www.lodashjs.com/ 人工智能学习网站 https://chat.xutongbao.top 参考链接&#xff1a; https://…

企业服务总线(Enterprise Service Bus,ESB)简介

企业服务总线 企业服务总线&#xff08;Enterprise Service Bus&#xff0c;ESB&#xff09;是一种在分布式系统之间实现服务集成和交互的中间件平台。它提供了一个灵活的基础设施&#xff0c;用于连接、路由和中介不同服务之间的消息&#xff0c;从而实现服务的解耦、复用和灵…

基于ssm的微信小程序的居民健康监测系统

采用技术 基于ssm的微信小程序的居民健康监测系统的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringMVCMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 后端页面 用户信息管理 健康科普管理 公告管理 论坛…

【MATLAB源码-第216期】基于matlab的北方苍鹰优化算法(NGO)机器人栅格路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 北方苍鹰优化算法&#xff08;Northern Goshawk Optimization&#xff0c;简称NGO&#xff09;是一种新兴的智能优化算法&#xff0c;灵感来源于北方苍鹰的捕猎行为。北方苍鹰是一种敏捷且高效的猛禽&#xff0c;广泛分布于北…

基于 React + Nest 全栈开发的后台系统

Xmw Admin 基于 React Nest 全栈开发的后台系统 &#x1fab4; 项目简介 &#x1f3af; 前端技术栈&#xff1a; React、Ant Design、Umi、TypeScript&#x1f3af; 后端技术栈&#xff1a; Nest.js、Sequelize、Redis、Mysql&#x1f61d; 线上预览&#xff1a; https://r…

【Game】Powerful

文章目录 【小伙伴】隐藏小伙伴 【百趣集】【人物属性点】【宠物打造】【奇遇】【钓鱼】 【小伙伴】 刷新位置 小伙伴等级详情 克制关系 隐藏小伙伴 1、仙缘小伙伴&#xff08;6种&#xff09; 遇到仙缘驭宠师然后进入战斗抓取 107、七彩仙凤 108、小青兔 109、小布 110、黑腹蛛…