es6 - modules load 模块加载

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了es6 - modules load 模块加载脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

我们知道有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>>@H_406_70@

以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>

脚本宝典总结

以上是脚本宝典为你收集整理的es6 - modules load 模块加载全部内容,希望文章能够帮你解决es6 - modules load 模块加载所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。