JavaScript 模組和類別

第 9 天：JavaScript 模組和類別

日期：2024 年 12 月 16 日

歡迎來到第九天！今天，我們探討 JavaScript 中的模組 和 類別，這兩個概念可以顯著增強程式碼組織、可重複使用性和可讀性。理解這些主題將提高您的 JavaScript 技能，使您能夠像專業開發人員一樣建立您的專案。

---

1. JavaScript 模組

模組可讓您將程式碼分割成更小的、可重複使用的部分。您可以將功能組織到多個文件中，而不是使用一個大文件，從而使您的程式碼庫更易於管理和維護。

為什麼要使用模組？

1. 關注點分離：每個模組處理特定的職責。
2. 可重複使用性：一個模組中的程式碼可以在另一個模組中重複使用。
3. 可維護性：更容易除錯和更新。

---

在模組中匯出和匯入

從模組匯出

您可以使用匯出從模組中匯出變數、函數或類別。

命名導出

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

預設導出

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

導入模組

使用 import 關鍵字從另一個模組引入功能。

範例：導入命名導出

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

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

範例：匯入預設匯出

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

---

動態導入

使用 import() 在運行時動態導入載入模組。

範例：延遲載入

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

---

2. JavaScript 類別

JavaScript 中的類別提供了建立物件並封裝相關資料和方法的藍圖。它們是 ES6 的一部分，是 JavaScript 中物件導向程式設計的基礎。

定義類別

類別是使用 class 關鍵字定義的。

範例：基礎課程

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

const person1 = new Person("John", 30);
console.log(person1.greet()); // Output: Hello, my name is John and I am 30 years old.

---

類別繼承

繼承允許一個類別使用extends關鍵字從另一個類別派生屬性和方法。

範例：繼承

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.

---

靜態方法

靜態方法屬於類別本身，而非實例。

範例：靜態方法

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

---

私有欄位與方法

私有欄位和方法只能在類別內訪問，並用 # 前綴表示。

範例：私人領域

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

---

類別與物件文字

雖然物件字面量對於簡單的資料結構來說是快速而直接的，但類別提供：

• 用於建立多個相似物件的清晰藍圖。
• 支援繼承和封裝。

---

3.組合模組和類別

模組和類別在現代 JavaScript 應用程式中完美地互補。您可以在一個模組中定義一個類別並在另一個模組中使用它。

範例：組合模組和類別

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

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

---

4.現實世界範例：購物車

這是一個結合模組和類別的實際範例。

檔：cart.js

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

檔案：main.js

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

---

要點

1. 模組：幫助組織程式碼並提高可重複使用性。
2. 類別：提供一種處理物件的結構化方式，提供繼承和封裝等功能。
3. 組合使用：一起使用模組和類別來建立可擴展和可維護的應用程式。

---

練習任務

1. 建立一個導出基本算術運算函數的模組。
2. 為圖書館系統編寫一個類，其中包含添加和列出書籍的方法。
3. 組合模組和類別來模擬基本的電子商務購物車。

---

下一步是什麼？

明天，第 10 天，我們將深入研究 事件循環和非同步程式設計，您將了解 JavaScript 如何處理並發、回呼、promise 和事件循環。請繼續關注！

以上是JavaScript 模組和類別的詳細內容。更多資訊請關注PHP中文網其他相關文章！