「这是我参与2022首次更文挑战的第25天,活动详情查看:2022首次更文挑战」
ES6 增加模块规范。其集成了AMD 和CommonJs的两部分的功能。
模块使用
ES6 模块是以一整块 JavaScript 代码块存在的,嵌入到网页中或作为外部文件引入,通过带有 type=“module” 作为标识,如下所示:
// 方式1 嵌入的模块定义
<script type="module">
// 模块代码
</script>
// 方式2 引入外部的模块定义
<script type="module" src="...." ></script>
模块加载
<!-- 第二个执行 -->
<script type="module" src="moduleA.js"></script>
<!-- 第三个执行 -->
<script type="module" src="moduleB.js"></script>
<!-- 第一个执行 -->
<script></script>
<!-- 第四个执行 -->
<script type="module"> // 嵌入的模块定义代码不能使用 import 加载到其他模块
import './moduleA.js'
</script>
- 模块执行顺序都是按顺序依次加载的
- 如果存在依赖关系的,会在依赖模块先加载然后再加载其模块
- ES6 模块加载构成都是异步完成的
ES6 模块特性
与CommonJs 和AMD 一致特性:
- 模块代码只在加载后执行
- 模块只能加载一次,无论定义多少次都只加载一次。
- 模块是单例的
- 模块可以定义公共接口,其他模块可以基于这个公共接口观察和鸡哦阿虎
- 模块可以请求加载其他模块
- 支持循环依赖
新特性:
- ES6 模块默认在严格模式下执行。
- ES6 模块不共享全局命名空间。
- 模块顶级 this 的值是 undefined(常规脚本中是 window)。 模块中的 var 声明不会添加到 window 对象。
- ES6 模块是异步加载和执行的。
export 与 import
关键字 export,主要是控制模块使其对外可见。支持2种导出模式:命名导出和默认到处
let tname = "Tom";
let tage = 20;
let tfunc = function(){
return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass = class myClass {
static a = "yeah!";
}
export { tname, tage, tfunc, myClass }
export default 命令:
- 在一个文件或模块中,export、import 可以有多个,export default 仅有一个。
- export default 中的 default 是对应的导出接口变量。
- 通过 export 方式导出,在导入时要加{ },export default 则不需要。
- export default 向外暴露的成员,可以使用任意变量来接收。
关键字 import ,主要是引入模块,引入的模块都是最先执行的,且都是单例模式,即多次重复执行都只会执行一次。import 同一模块,声明不同接口引用,会声明对应变量,但只执行一次 import 。