模块

脚本逻辑越写越多，文件过大。需把代码拆分，按需加载。

什么是模块

一个模块就是一个文件。一个脚本就是一个模块。

使用指令export import ，模块之间可以相互调用。

export 标记了可以从当前模块外部访问的变量和函数。
import 导入模块

eg: 我们有一个 sayHi.js 文件导出了一个函数

// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

然后另一个文件可能导入并使用了这个函数

// 📁 main.js
import { sayHi } from './sayHi.js';

alert(sayHi); // function...
sayHi('John'); // Hello, John!

注意：模块只通过 HTTP(s) 工作，而非本地

模块的核心功能

始终使用 “use strict”

模块级作用域

一个模块中的顶级作用域变量和函数在其他脚本中是不可见的。

模块应该exprot出去想要被外部访问的内容，并import它们所需要的内容。

模块代码仅在第一次导入时被解析

即，只执行一次。

规则：顶层模块代码应该用于初始化，创建模块特定的内部数据结构。如果我们需要多次调用某些东西，我们应该将其以函数的形式导出。

经典的使用模式： 1、模块导出一些配置方法，例如一个配置对象。 2、在第一次导入时，对其进行初始化，写入其属性。可以在应用顶级脚本中进行此操作。 3、进一步地导入使用模块。

// 📁 admin.js
export let config = { };

export function sayHi() {
  alert(`Ready to serve, ${config.user}!`);
}

// admin.js 导出了 config 对象（最初是空的，但也可能有默认属性）。

// 📁 init.js
import { config } from './admin.js';
config.user = "Pete";

// 📁 another.js
import { sayHi } from './admin.js';

sayHi(); // Ready to serve, Pete!

在一个模块中，“this”是`undefined`

在一个模块中，顶级this是undefined

将其与非模块脚本进行比较会发现，非模块脚本的顶级 this 是全局对象

总结

一个模块就是一个文件。
模块具有自己的本地顶级作用域，并可以通过export/import交换功能。
模块使用使用 use strict
模块代码只执行一次。导出仅创建一次，然后会在导入之间共享。

模块

模块