admin管理员组

文章数量:1625094

前言：在开发中，我们经常写出如下代码。这就是 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 的运行机制。

本文标签： 工作原理器中经典jsESModule

版权声明：本文标题：前端 JS 经典：浏览器中 ESModule 的工作原理 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1728912675a1179306.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。