JavaScript Import/Export：告别混乱，拥抱模块化！

什么是模块化？

模块化是将代码分割成独立的、可重用的部分（模块），每个模块负责特定的功能。这样做的好处包括：

• 提高可读性：将复杂的代码分解为小块，使其更易于理解。
• 增强可维护性：修改一个模块不会影响其他模块，降低了出错的概率。
• 促进重用性：可以在不同项目中重用相同的模块，减少重复代码。

Export：导出模块

在JavaScript中，使用export关键字可以将模块中的变量、函数或类导出，以便在其他模块中使用。export有两种主要形式：命名导出和默认导出。

1. 命名导出

命名导出允许你导出多个变量或函数。示例如下：

// math.js
export const PI = 3.14;
export function add(x, y) {
    return x + y;
}

在上面的代码中，我们导出了一个常量PI和一个函数add。在其他模块中，可以通过相同的名称导入这些导出：

// app.js
import { PI, add } from './math.js';

console.log(PI); // 3.14
console.log(add(2, 3)); // 5

2. 默认导出

默认导出允许你导出一个单一的值或对象。示例如下：

// calculator.js
export default function multiply(x, y) {
    return x * y;
}

在其他模块中，你可以使用任意名称导入默认导出：

// app.js
import multiply from './calculator.js';

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

Import：导入模块

使用import关键字可以引入其他模块的导出。根据导出的类型，import的语法也有所不同。

1. 导入命名导出

import { PI, add } from './math.js';

2. 导入默认导出

import multiply from './calculator.js';

3. 导入所有导出

如果你想导入一个模块的所有导出，可以使用* as语法：

import * as math from './math.js';

console.log(math.PI); // 3.14
console.log(math.add(2, 3)); // 5

注意事项：

• 文件扩展名： 在 import 语句中，通常需要指定文件的扩展名（例如 .js）。
• 模块解析： JavaScript 运行时环境需要能够找到并加载模块。这通常涉及到模块解析算法，它会根据配置的规则查找模块文件。
• ES Modules vs. CommonJS： import 和 export 是 ES Modules 的语法。CommonJS 使用 require() 和 module.exports。 现代 JavaScript 开发更倾向于使用 ES Modules。