es6 - modules load 模块加载

栏目: JavaScript · 发布时间: 4年前

内容简介:我们知道有3种方式在浏览器里加载js代码:1:<script>...</script>之间嵌入js代码**2:<script src='xx.js'></script> 通过src引入外部js文件**

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据结构与算法分析(Java版)(英文原版)

数据结构与算法分析(Java版)(英文原版)

(美)Clifford A.Shaffer / 电子工业出版社 / 2002-5 / 39.00元

《数据结构与算法分析(C++版)(第2版)》采用程序员最爱用的面向对象C++语言来描述数据结构和算法,并把数据结构原理和算法分析技术有机地结合在一起,系统介绍了各种类型的数据结构和排序、检索的各种方法。作者非常注意对每一种数据结构的不同存储方法及有关算法进行分析比较。书中还引入了一些比较高级的数据结构与先进的算法分析技术,并介绍了可计算性理论的一般知识。本版的重要改进在于引入了参数化的模板,从而提......一起来看看 《数据结构与算法分析(Java版)(英文原版)》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具