8.2 import/export 语法详解

8.2 import/export 语法详解

ES Modules 是 JavaScript 的标准模块系统，通过 import 和 export 语法实现模块的导入和导出。本节将详细介绍 import 和 export 的各种用法及其应用场景。

8.2.1 export 语法

export 用于从模块中导出变量、函数、类等，供其他模块使用。

1. 命名导出（Named Exports）
可以导出多个命名变量、函数或类：

// math.js
export const pi = 3.14;

export function add(a, b) {
  return a + b;
}

export class Calculator {
  multiply(a, b) {
    return a * b;
  }
}

2. 默认导出（Default Export）
每个模块只能有一个默认导出：

// math.js
export default function add(a, b) {
  return a + b;
}

3. 混合导出
可以同时使用命名导出和默认导出：

// math.js
export const pi = 3.14;

export default function add(a, b) {
  return a + b;
}

8.2.2 import 语法

import 用于从其他模块中导入变量、函数、类等。

1. 导入命名导出
使用 {} 导入命名导出：

// main.js
import { pi, add } from "./math.js";

console.log(pi); // 输出 3.14
console.log(add(1, 2)); // 输出 3

2. 导入默认导出
不需要使用 {}，可以自定义导入名称：

// main.js
import add from "./math.js";

console.log(add(1, 2)); // 输出 3

3. 导入所有导出
使用 * as 导入所有导出，并将其绑定到一个对象：

// main.js
import * as math from "./math.js";

console.log(math.pi); // 输出 3.14
console.log(math.add(1, 2)); // 输出 3

4. 混合导入
可以同时导入命名导出和默认导出：

// main.js
import add, { pi } from "./math.js";

console.log(pi); // 输出 3.14
console.log(add(1, 2)); // 输出 3

8.2.3 动态导入

import() 是 ES2020 引入的动态导入语法，返回一个 Promise，可以在运行时按需加载模块。

1. 基本用法

// main.js
import("./math.js").then((math) => {
  console.log(math.add(1, 2)); // 输出 3
});

2. 结合 async/await

// main.js
async function loadMath() {
  const math = await import("./math.js");
  console.log(math.add(1, 2)); // 输出 3
}

loadMath();

8.2.4 示例代码

示例 1：命名导出与导入

// math.js
export const pi = 3.14;

export function add(a, b) {
  return a + b;
}

// main.js
import { pi, add } from "./math.js";

console.log(pi); // 输出 3.14
console.log(add(1, 2)); // 输出 3

示例 2：默认导出与导入

// math.js
export default function add(a, b) {
  return a + b;
}

// main.js
import add from "./math.js";

console.log(add(1, 2)); // 输出 3

示例 3：动态导入

// main.js
import("./math.js").then((math) => {
  console.log(math.add(1, 2)); // 输出 3
});

8.2.5 总结

• export：用于从模块中导出变量、函数、类等。
  • 命名导出：export const pi = 3.14;
  • 默认导出：export default function add() {}
• import：用于从其他模块中导入变量、函数、类等。
  • 导入命名导出：import { pi, add } from "./math.js";
  • 导入默认导出：import add from "./math.js";
  • 动态导入：import("./math.js").then((math) => {});

通过掌握 import 和 export 的语法，你可以更好地组织和管理 JavaScript 代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. 命名导出和默认导出的主要区别是什么？
2. 如何在同一个模块中同时使用命名导出和默认导出？
3. 动态导入的主要用途是什么？