JS 模块模式二-ES6 模块

99 阅读2分钟

「这是我参与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 。