模块化与工具：ES6 模块¶

在现代 JavaScript 开发中，模块化是一个非常重要的概念。它允许开发者将代码分割成多个独立的文件，每个文件负责特定的功能。ES6（ECMAScript 2015）引入了原生的模块系统，使得模块化开发变得更加简单和直观。本文将详细介绍如何使用 ES6 模块语法进行模块化开发。

1. 什么是 ES6 模块？¶

ES6 模块是 JavaScript 中用于组织和共享代码的一种方式。它允许你将代码分割成多个文件，每个文件可以导出（export）特定的功能或数据，然后在其他文件中导入（import）这些功能或数据。

1.1 模块化的好处¶

代码复用：可以将常用的功能封装在模块中，然后在多个地方复用。
命名空间管理：模块可以避免全局变量的污染，每个模块都有自己的作用域。
依赖管理：模块可以明确地声明依赖关系，使得代码结构更加清晰。

2. 基本语法¶

2.1 导出（Export）¶

在 ES6 模块中，你可以使用 export 关键字来导出变量、函数、类等。

// math.js
export const PI = 3.14159; // 导出一个常量

export function add(a, b) { // 导出一个函数
    return a + b;
}

export class Circle { // 导出一个类
    constructor(radius) {
        this.radius = radius;
    }

    area() {
        return PI * this.radius * this.radius;
    }
}

2.2 导入（Import）¶

你可以使用 import 关键字来导入其他模块中导出的内容。

// main.js
import { PI, add, Circle } from './math.js'; // 导入多个导出项

console.log(PI); // 输出: 3.14159
console.log(add(2, 3)); // 输出: 5

const circle = new Circle(5);
console.log(circle.area()); // 输出: 78.53975

2.3 默认导出（Default Export）¶

除了命名导出，ES6 模块还支持默认导出。每个模块只能有一个默认导出。

// math.js
export default function multiply(a, b) { // 默认导出一个函数
    return a * b;
}

// main.js
import multiply from './math.js'; // 导入默认导出

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

3. 代码示例¶

3.1 示例 1：导出和导入多个项¶

// utils.js
export function greet(name) {
    return `Hello, ${name}!`;
}

export function farewell(name) {
    return `Goodbye, ${name}!`;
}

// main.js
import { greet, farewell } from './utils.js';

console.log(greet('Alice')); // 输出: Hello, Alice!
console.log(farewell('Bob')); // 输出: Goodbye, Bob!

3.2 示例 2：默认导出和导入¶

// logger.js
export default function log(message) {
    console.log(`[LOG]: ${message}`);
}

// main.js
import log from './logger.js';

log('This is a log message.'); // 输出: [LOG]: This is a log message.

3.3 示例 3：混合使用命名导出和默认导出¶

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

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

export default function multiply(a, b) {
    return a * b;
}

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

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

4. 练习题¶

4.1 简单练习¶

创建一个模块 stringUtils.js，导出两个函数：toUpperCase 和 toLowerCase。然后在 main.js 中导入并使用这两个函数。

4.2 中等练习¶

创建一个模块 geometry.js，导出两个类：Circle 和 Rectangle。每个类都应该有计算面积的方法。然后在 main.js 中导入并使用这些类。

4.3 复杂练习¶

创建一个模块 math.js，导出多个数学函数（如 add, subtract, multiply, divide）和一个默认导出的 Calculator 类。Calculator 类应该能够使用这些函数进行计算。然后在 main.js 中导入并使用这些函数和类。

5. 总结¶

ES6 模块为 JavaScript 提供了强大的模块化支持，使得代码的组织和管理变得更加简单和高效。通过使用 export 和 import，你可以轻松地将代码分割成多个模块，并在需要时导入和使用它们。

关键点总结¶

导出：使用 export 关键字导出变量、函数、类等。
导入：使用 import 关键字导入其他模块中的导出项。
默认导出：每个模块只能有一个默认导出，使用 export default。
模块化的好处：代码复用、命名空间管理、依赖管理。

通过掌握 ES6 模块，你将能够编写更加模块化、可维护和可扩展的 JavaScript 代码。