学会使用ES6中的模块化

# 第一章：ES6模块化基础介绍

## 1.1 什么是ES6模块化？

在ES6之前，JavaScript并没有原生支持模块化的概念，开发者们往往使用一些工具或者模式来模拟模块化，比如立即执行函数表达式（IIFE）等。而ES6模块化则是指在ES6标准中新增加的一种模块化方案。它使得 JavaScript 代码可以被分割成独立的功能模块，每个模块都有自己的作用域，可以单独导入和导出。

## 1.2 ES6模块化的优势

ES6模块化相对于传统的模块化方式有诸多优势，包括：
- 易于维护和管理：模块化能够将复杂的代码分割成小的模块，有利于团队合作、代码维护和管理。
- 增强了代码的可读性：模块化代码更加清晰，易于理解。
- 便于重用：模块化代码可以被其他模块引用，提高了代码的可重用性。
- 作用域控制：模块化可以有效控制变量和方法的作用域，避免全局污染。

## 1.3 ES6模块化的基本语法

ES6模块的基本语法包括导出和导入两部分。导出使用 `export` 关键字，导入使用 `import` 关键字。

// 导出模块
// math.js
export function square(x) {
  return x * x;
}

export const pi = 3.14;

// 导入模块
// main.js
import { square, pi } from './math';

console.log(square(3)); // 输出：9
console.log(pi); // 输出：3.14

### 2. 第二章：导出和导入模块

#### 2.1 导出默认模块

在ES6模块化中，我们可以使用 `export default` 来导出一个默认模块。默认模块在导入时可以使用任意名称来进行命名。

示例代码：

// math.js
const add = (a, b) => a + b;
export default add;

// app.js
import sum from './math.js';
console.log(sum(3, 4)); // 输出结果为 7

**代码解释：**

- 在 `math.js` 中，我们使用 `export default` 导出了一个 `add` 函数作为默认模块。
- 在 `app.js` 中，使用 `import sum from './math.js'` 导入了默认模块，并且将其命名为 `sum`。然后就可以直接使用 `sum` 来调用 `math.js` 中的 `add` 函数。

**代码总结：**

通过 `export default` 导出的模块，在导入时可以使用任意名字来命名，非常灵活。

---

#### 2.2 导出命名模块

除了默认模块，我们还可以使用命名导出来导出模块中的特定部分，这样在导入时就需要使用相同的名称来引用。

示例代码：

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

// app.js
import { add, multiply } from './math.js';
console.log(add(3, 4)); // 输出结果为 7
console.log(multiply(3, 4)); // 输出结果为 12

**代码解释：**

- 在 `math.js` 中，我们使用 `export const` 分别导出了 `add` 和 `multiply` 两个函数作为命名模块。
- 在 `app.js` 中，使用 `{ add, multiply }` 的方式导入了 `math.js` 中导出的命名模块，并且可以直接使用这些导出的函数。

**代码总结：**

通过命名导出，可以将模块中的特定部分单独导出，更加灵活地进行模块导入和使用。

---

#### 2.3 导入模块的几种方式

在ES6模块化中，除了直接导入默认模块或者命名模块外，还有一些其他的导入方式，例如导入整个模块或者导入所有导出部分。

示例代码：

// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
export {
  add as addition,
  subtract as subtraction
};

// app.js
import * as mathUtils from './math.js';
console.log(ma