ES Module必知_esmodule举例

作者：秋刀鱼在做梦 | 2024-07-22 00:37:24

踩

esmodule举例

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

通过下面方式加载模块

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

默认延迟加载模块，执行时机，在文档解析之后，触发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>
1
2
3
4
5
6
7
8
9

index.js

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/862786