ES Module（ECMAScript Module）是 JavaScript 中用于处理模块的标准规范，旨在提供一种原生的、静态的模块系统，适用于浏览器和服务器端（如 Node.js）开发。
一、导入模块
1. 使用 `import` 关键字导入模块
通过 `import` 关键字，可以从其他模块中导入函数、对象、类、变量等。导入语句通常位于文件的顶部，在代码的最外层作用域。
// 从 './math.js' 导入 add 函数
import { add } from "./math.js";
console.log(add(5, 3));2. 导入整个模块
也可以导入整个模块，将其作为一个对象使用。
// 导入整个 math 模块
import * as math from "./math.js";
console.log(math.add(5, 3));
console.log(math.subtract(5, 3));3. 导入默认导出
如果一个模块有默认导出，可以使用 `import` 语句导入默认导出。
// 导入 math 模块的默认导出
import math from "./math.js";
console.log(math(5, 3));二、导出模块
1. 使用 `export` 关键字导出模块内容
在模块中，可以使用 `export` 关键字导出函数、对象、类、变量等。
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}2. 默认导出
一个模块可以有一个默认导出，使用 `export default` 关键字。
// math.js
function add(a, b) {
return a + b;
}
export default add;三、动态导入（Dynamic Import）
1. 使用 `import()` 函数进行动态导入
`import()` 函数返回一个 Promise，允许在运行时动态导入模块，适用于按需加载模块，提高性能和资源利用率。
// 动态导入 math 模块
import("./math.js")
.then((math) => {
console.log(math.add(5, 3));
})
.catch((error) => {
console.error("Failed to import module:", error);
});四、浏览器支持
在 HTML 文件中，使用 `<script type="module">` 来启用 ES Module 支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ES Modules Example</title>
</head>
<body>
<script type="module">
import { add } from "./math.js";
console.log(add(5, 3));
</script>
</body>
</html>五、Node.js 支持
在 Node.js 中，从版本 13.2.0 开始，支持 ES Module，但需要使用 `.mjs` 文件扩展名或在 `package.json` 中设置 `"type": "module"` 来启用 ES Module 模式。
// package.json
{
"type": "module"
}// math.mjs
export function add(a, b) {
return a + b;
}六、代码解释
1. 在导入模块时，`import` 关键字会告诉 JavaScript 引擎从指定的文件或模块中获取所需的资源。通过花括号 `{}` 可以精确导入所需的部分，如 `{ add }` 仅导入 `add` 函数；使用 `* as math` 会将整个模块作为 `math` 对象导入；`import math from './math.js'` 则导入默认导出。
2. 在导出模块时，`export` 关键字将模块内的函数、对象等暴露给其他模块，而 `export default` 用于导出一个默认值。
3. `import()` 函数允许在运行时根据条件或需要动态加载模块，提高了性能和灵活性。