JavaScript 模块：現代網頁開發的基石

你好，未來的 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.fly();  // 輸出: 蝙蝠俠正在飛行！

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