JavaScript 模块：现代 Web 开发的基石

你好，未来的 JavaScript 巫师们！今天，我们将深入探索 JavaScript 模块这个迷人的世界。作为你友好的计算机老师，我很兴奋能引导你们进行这次旅行。所以，拿起你的虚拟魔杖（键盘），让我们一起施展一些模块魔法！

JavaScript - Modules

什么是模块？

想象你正在建造一座巨大的乐高城堡。一次性构建它是不是很困难？难道不是创建更小、更易于管理的部分，然后将它们组合起来更容易吗？这正是 JavaScript 中的模块所做的！

模块是一个自包含的代码片段，执行特定的功能。它就像是你主程序中的一个小程序。模块帮助我们组织代码，使其更具可维护性，并允许我们在应用程序的不同部分重用功能。

让我们从一个简单的例子开始：

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

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

在这个例子中，我们创建了一个名为 mathModule.js 的模块。它包含两个函数：add 和 subtract。export 关键字使得这些函数可以在我们程序的其他部分使用。

现在，让我们看看如何使用这个模块：

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

console.log(add(5, 3));      // 输出: 8
console.log(subtract(10, 4)); // 输出: 6

在这里，我们正在从我们的 mathModule.js 文件中导入 add 和 subtract 函数。然后，我们可以像它们定义在 main.js 文件中一样使用这些函数。

从单个模块导出多个对象

现在我们已经掌握了基础知识，让我们看看如何从单个模块导出多个对象。这就像在你的 JavaScript 工具箱中打包多种工具！

// toolbox.js
export const hammer = {
use: () => console.log("砰！砰！"),
weight: 2
};

export function screwdriver() {
console.log("拧！拧！");
}

export class Saw {
cut() {
console.log("嗖嗖！嗖嗖！");
}
}

在这个 toolbox.js 模块中，我们正在导出一个对象（hammer）、一个函数（screwdriver）和一个类（Saw）。让我们使用它们：

// workshop.js
import { hammer, screwdriver, Saw } from './toolbox.js';

hammer.use();  // 输出: 砰！砰！
console.log(hammer.weight);  // 输出: 2

screwdriver();  // 输出: 拧！拧！

const mySaw = new Saw();
mySaw.cut();  // 输出: 嗖嗖！嗖嗖！

看看我们如何导入并使用不同类型的导出？这就像拥有一个适用于所有 JavaScript 工具的通用适配器！

默认导出

有时，你可能有这样一个模块，它的主要功能是做一件事。在这种情况下，你可以使用默认导出。这就像在你的 JavaScript 团队中拥有一个明星球员！

// superHero.js
export default class SuperHero {
constructor(name) {
this.name = name;
}

fly() {
console.log(`${this.name} 正在飞行！`);
}
}

export function sidekick() {
console.log("我在这里帮忙！");
}

在这个模块中，我们有一个默认导出（SuperHero 类）和一个命名导出（sidekick 函数）。让我们使用它们：

// comicBook.js
import Hero, { sidekick } from './superHero.js';

const batman = new Hero("Batman");
batman.fly();  // 输出: Batman 正在飞行！

sidekick();  // 输出: 我在这里帮忙！

注意我们是如何导入默认导出（Hero）而不使用花括号的？这就是默认导出得到的特殊待遇！

重命名导入和导出

有时，你可能想要为导入的函数或变量使用不同的名称。JavaScript 提供了重命名功能，让你可以这样做。这就像给你的导入工具起昵称！

// colors.js
export const red = "#FF0000";
export const blue = "#0000FF";
export const green = "#00FF00";

现在，让我们导入并重命名：

// palette.js
import { red as crimson, blue as navy, green } from './colors.js';

console.log(crimson);  // 输出: #FF0000
console.log(navy);     // 输出: #0000FF
console.log(green);    // 输出: #00FF00

你也可以在导出时重命名：

// shapes.js
const circle = (radius) => Math.PI * radius * radius;
const square = (side) => side * side;

export { circle as round, square };

然后像这样导入：

// geometry.js
import { round, square } from './shapes.js';

console.log(round(5));   // 输出: 78.53981633974483
console.log(square(4));  // 输出: 16

方法表格

以下是总结我们所涵盖方法的便捷表格：

方法	描述	示例
`export`	使得函数、对象或值在其他模块中可用	`export function add(a, b) { return a + b; }`
`import`	允许你使用其他模块中的函数、对象或值	`import { add } from './mathModule.js';`
`export default`	将单个值导出为模块的主导出	`export default class SuperHero { ... }`
`import as`	重命名导入的值	`import { red as crimson } from './colors.js';`
`export as`	重命名导出的值	`export { circle as round };`

就这样，伙计们！你们刚刚通过模块提升了你们的 JavaScript 技能。记住，熟能生巧，所以不要害怕尝试这些概念。在你意识到之前，你将能够像专业人士一样构建模块化的 JavaScript 应用程序！

快乐编码，愿模块与你同在！??‍??‍?

Credits: Image by storyset