ES6模块化详解：导入与导出方式

在现代 JavaScript 开发中，模块化是代码管理和组织的重要工具。ES6（ECMAScript 2015）引入了模块化的概念，通过 import 和 export 来组织代码，使得模块的管理变得更加清晰和简洁。本文将详细介绍 ES6 中的各种模块导入导出方式，包括 *导入、命名导入、默认导入、命名 + 默认导入、动态导入，分别导出、统一导出和默认导出。

1. 模块化基础

在 ES6 之前，JavaScript 没有原生的模块化机制。我们通常通过 require() 和 module.exports（在 Node.js 中）来实现模块化。ES6 引入了模块化规范，使得在浏览器和 Node.js 中都能够使用统一的模块化机制。

1.1 export 和 import

• export 用于将模块中的功能暴露出去。
• import 用于从其他模块中导入功能。

1.2 模块化的优势

• 代码重用：可以将功能拆分成多个文件，并在其他地方使用。
• 更好的依赖管理：模块可以显式地声明其依赖，避免了全局变量污染。
• 易于维护：模块化的代码更易于理解、调试和维护。

2. import 和 export 的基本用法

2.1 默认导出与命名导出

2.1.1 默认导出 (Default Export)

默认导出允许你导出一个模块的主要功能，其他模块可以直接导入这个功能，而不需要花括号。

示例：

math.js（模块文件）：

// 默认导出
export default function add(a, b) {return a + b;
}

导入方式：

// 导入默认导出的函数
import add from './math';console.log(add(2, 3)); // 输出: 5

2.1.2 命名导出 (Named Export)

命名导出允许你导出一个模块中的多个功能，并且导入时需要使用相同的名称。

示例：

math.js（模块文件）：

// 命名导出
export function add(a, b) {return a + b;
}export function subtract(a, b) {return a - b;
}

导入方式：

// 导入命名导出的函数
import { add, subtract } from './math';console.log(add(2, 3)); // 输出: 5
console.log(subtract(5, 3)); // 输出: 2

3. import 的多种方式

ES6 允许使用不同的方式来导入模块的功能。

3.1 * 导入

* 导入会将模块中所有的命名导出作为一个对象导入，可以通过该对象来访问所有导出的功能。

示例：

math.js（模块文件）：

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

导入方式：

import * as math from './math';console.log(math.add(2, 3)); // 输出: 5
console.log(math.subtract(5, 3)); // 输出: 2

3.2 命名导入

命名导入允许从模块中导入一个或多个具名功能。导入时需要使用花括号包围需要的功能。

示例：

math.js（模块文件）：

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

导入方式：

import { add } from './math';console.log(add(2, 3)); // 输出: 5

3.3 默认导入

默认导入用来导入模块的默认导出，它不需要使用花括号。

示例：

math.js（模块文件）：

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

导入方式：

import add from './math';console.log(add(2, 3)); // 输出: 5

3.4 命名导入 + 默认导入

如果一个模块同时使用了默认导出和命名导出，可以结合使用默认导入和命名导入。

示例：

math.js（模块文件）：

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

导入方式：

import add, { subtract } from './math';console.log(add(2, 3)); // 输出: 5
console.log(subtract(5, 3)); // 输出: 2

4. 导出的方式

4.1 统一导出

统一导出允许你将多个功能一起导出。这通常在模块的最后使用。

示例：

math.js（模块文件）：

function add(a, b) {return a + b;
}function subtract(a, b) {return a - b;
}// 统一导出
export { add, subtract };

导入方式：

import { add, subtract } from './math';console.log(add(2, 3)); // 输出: 5
console.log(subtract(5, 3)); // 输出: 2

4.2 分别导出

分别导出允许你在多个位置导出模块的功能。

示例：

math.js（模块文件）：

// 分别导出
export function add(a, b) {return a + b;
}export function subtract(a, b) {return a - b;
}

导入方式：

import { add, subtract } from './math';console.log(add(2, 3)); // 输出: 5
console.log(subtract(5, 3)); // 输出: 2

4.3 默认导出

默认导出是模块的主要导出，通常一个模块只会有一个默认导出。

示例：

math.js（模块文件）：

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

导入方式：

import add from './math';console.log(add(2, 3)); // 输出: 5

5. 动态导入

动态导入允许按需加载模块。它返回一个 Promise，可以在需要时动态加载模块。这对于按需加载和代码拆分非常有用。

示例：

// 动态导入模块
import('./math').then(math => {console.log(math.add(2, 3)); // 输出: 5
});

动态导入常用于大型应用，尤其是在涉及到懒加载时。

6. 总结

• 默认导出：每个模块只能有一个默认导出，适用于模块的主要功能。
• 命名（分别）导出：模块可以有多个命名导出，适用于多个功能的导出。
• * 导入：将模块中的所有命名导出作为对象导入。
• 命名导入 + 默认导入：可以结合命名导入和默认导入，导入模块中的多个功能。
• 动态导入：用于按需加载模块，返回一个 Promise。
• 分别导出与统一导出：分别导出每个功能或统一导出多个功能。