我们知道有3种方式在浏览器里加载js代码:
1:<script>...</script>之间嵌入js代码**
2:<script src='xx.js'></script> 通过src引入外部js文件**
3:加载js代码如workers(例如 web worker或者service worker)
因为js module和纯粹的js脚本代码有不同之处(例如js module里的变量只在本module里面可见,不会加到global,所以也不会挂在到window上),为了能加载js module代码,上面提到的3种机制都会有相应的改变。接下来就具体来看一下,浏览器加载module代码的机制:
1: js module的加载依然有上面提到的三种方式
我们先来说前2种,也是我们最熟悉的通过<script>标签的方式:
<script src="./index.js" type="module"></script>
<script type="module">
console.log('in html')
</script>>
以module的方式加载,需要把<script>标签的type设置为‘module’,当没有设置type值的时候,默认是"text/javascript"。
2:defer和async
我们知道<script>标签还有defer和async这2个布尔型的属性,他们可以决定js代码的执行顺序,也会有document的解析产生影响,现在我们来看一下他们会对我们的模块加载产生怎样的影响:
defer
我们先来复习一下defer的特性:
1:带defer的js代码不会阻碍页面解析,js代码的下载和页面的解析是同步进行的,js代码的执行要等页面解析完成之后再开始。
2:加载多个带defer的js文件,会按照顺序执行。例如下面的一段代码,a.js执行完之后才会下载b.js和执行b.js.
<script src="./static/js/a.js" defer></script>
<script src="./static/js/b.js" defer></script>
3: defer只对带src的从外部加载js文件的<script>有效,对于内嵌js代码的<script>...</script>是不起作用的。
<script type='module'> 用module方式加载的js,默认带有defer的属性,即具备defer的特效,上面提到的前2点都一样,只是第三点不同:即使内嵌js代码的module,也具备defer的属性。例如:
<!--第一执行index.js-->
<script src="./index.js" type="module"></script>
<!--第二执行内嵌module-->
<script type="module">
console.log('in html')
</script>
<!--第三执行main.js-->
<script src="./main.js" type="module"></script>
async
先来复习一下async的特性:
1: 带有async的<script>的js文件下载不会阻塞页面解析,但是js文件一旦下载完,就会立即执行,假如这时候页面解析还没有完成,这就会阻塞页面解析。
2:多个带有async的<script>的js文件的执行顺序是无法确定的。
那如果type='module'又同时带有async的<script>文件的执行特性是怎样的呢?因为前面我们说了type='module'相当于默认带有defer,但是我们知道defer和async是不同的。结论就是带有async的模块加载按照async的特性执行,例如:
<script src="./index.js" type="module" async></script>
<script src="./main.js" type="module" async></script>
到底是先执行index.js还是main.js,这里是不能确定的。
3:加载module的时候文件路径
与加载常规的js代码不同的是,模块加载对文件路径有要求,下面4种是合法的:
1:以 / 开头的根目录
2:以 ./ 开头的当前路径
3:以 ../开头的父路径
4:一个URL路径
比如:
<!--以下为合法的文件路径-->
<script src="/module1.js" type="module"></script>
<script src="./module2.js" type="module"></script>
<script src="../module/module3.js" type="module"></script>
<script src="https://www.xxxx.com/module/module4.js" type="module"></script>
<!--以下为不合法的文件路径-->
<script src="module5.js" type="module"></script>
<script src="module/module5.js" type="module"></script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。