ES Module必知

最新推荐文章于 2023-10-29 14:49:04 发布

前端三疯

最新推荐文章于 2023-10-29 14:49:04 发布

阅读量535

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/sanfeng_hu/article/details/118447176

版权

JS 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

ES Module 是模块化的一种方式，除IE 外，其他主流浏览器都支持

通过下面方式加载模块

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

默认延迟加载模块，执行时机，在文档解析之后，触发DOMContentLoaded事件前执行。

对于浏览器加载的时序，我们新建一个index.html 和 index.js 例子来说明：
index.html

<body>
    <div id="foo">hello world</div>
    <script>
        document.addEventListener('DOMContentLoaded',function(){
            console.log('this is DOMContentLoaded!');
        });
    </script>
    <script type="module" src="./index.js"></script>
</body>

index.js

let el = document.getElementById('foo')
console.log(el.innerHTML)

程序打印次序：
hello world
this is DOMContentLoaded!
首先打印hello world 说明dom已经渲染过，后打印this is DOMContentLoaded! ，说明模块的代码先于DOMContentLoaded事件。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端三疯

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES Module必知

ES Module 是模块化的一种方式，除IE 外，其他主流浏览器都支持通过下面方式加载模块<script type="module" src="..."></script>默认延迟加载模块，执行时机，在文档解析之后，触发DOMContentLoaded事件前执行。对于浏览器加载的时序，我们新建一个index.html 和 index.js 例子来说明：index.html<body> <div id="foo">hello world&
复制链接

扫一扫