模块化：import、export、default

模块化是现代 JavaScript 开发中的重要特性，它帮助开发者将代码拆分成小模块，增强代码的可维护性和可复用性。import 和 export 是 ES6 引入的模块化系统，允许我们在不同的文件之间共享代码。本文将详细介绍 import、export 和 default 的使用方法，并通过代码示例加深理解。

1. export 的使用

在 JavaScript 中，export 用于将模块中的变量、函数或类暴露给外部使用。export 语句有两种形式：命名导出和默认导出。

1.1 命名导出

命名导出允许你导出一个文件中的多个变量、函数或类。你可以在导入时使用相同的名字来引用它们。

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

详细中文注释：

• 在 utils.js 文件中，我们使用 export 导出了两个函数 add 和 subtract。
• export 是命名导出的一种方式，每个被导出的变量或函数都需要显式地使用 export 关键字。

1.2 导入命名导出的内容

当你需要在另一个文件中使用这些导出的变量或函数时，可以使用 import 导入。

// main.js
import { add, subtract } from './utils';

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

详细中文注释：

• 使用 import { add, subtract } from './utils'; 导入 utils.js 中导出的 add 和 subtract 函数。
• 导入时需要使用相同的名字，才能正确引用相应的函数。

2. default 导出的使用

default 是 ES6 中引入的另一种导出方式，它允许模块仅导出一个默认的变量、函数或类。通过 default 导出的模块在导入时不需要使用花括号。

2.1 默认导出

// math.js
const multiply = (a, b) => a * b;
export default multiply;

详细中文注释：

• 在 math.js 文件中，我们通过 export default 导出了一个默认的函数 multiply，这意味着这个文件只能有一个默认导出。

2.2 导入默认导出的内容

// main.js
import multiply from './math';

console.log(multiply(2, 3)); // 输出 6

详细中文注释：

• 在 main.js 文件中，我们直接导入 math.js 文件的默认导出函数 multiply。
• 由于这是默认导出，所以在导入时不需要使用花括号，直接用函数名 multiply 引用。

3. 命名导出与默认导出的结合使用

一个模块可以同时使用命名导出和默认导出，但必须区分它们的导入方式。

3.1 结合导出的方式

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export default function multiply(a, b) {
  return a * b;
}

详细中文注释：

• 在 utils.js 文件中，我们同时使用命名导出导出了 add 和 subtract 函数，并使用 default 导出了 multiply 函数。

3.2 结合导入的方式

// main.js
import multiply, { add, subtract } from './utils';

console.log(add(2, 3)); // 输出 5
console.log(subtract(5, 2)); // 输出 3
console.log(multiply(2, 3)); // 输出 6

详细中文注释：

• 在 main.js 文件中，我们同时导入了 add 和 subtract（命名导出），以及 multiply（默认导出）。
• 导入时，命名导出的函数使用花括号包裹，而默认导出的函数直接使用其名称。

4. import 的常见应用

import 语法是用于引入外部模块的方式，除了常规的命名导入和默认导入外，还可以使用别名来导入模块内容，增强代码的灵活性。

4.1 使用别名导入

如果导出的变量或函数名字过长，或者我们希望给其取一个更简洁的名字，可以使用 as 关键字来创建别名。

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add as addition, subtract as subtraction } from './utils';

console.log(addition(2, 3)); // 输出 5
console.log(subtraction(5, 2)); // 输出 3

详细中文注释：

• 使用 as 关键字，我们可以将 add 重命名为 addition，将 subtract 重命名为 subtraction，从而避免命名冲突或提升代码可读性。

5. 总结

通过 import 和 export，JavaScript 提供了强大的模块化机制，帮助开发者将代码拆分成独立的模块，提高代码的可维护性和可复用性。通过合理使用命名导出和默认导出，我们可以灵活地组织代码，并在需要时导入模块的功能。在实际开发中，掌握这些模块化技术能够帮助开发者更高效地开发和维护大型应用。