利用 JavaScript 進行函數式編程

設計模式是針對軟體設計中常見挑戰的既定解決方案。透過利用它們，開發人員可以增強程式碼的可讀性、可擴展性和可維護性。本文探討了 TypeScript（一種日益流行的 JavaScript 超集）如何透過其型別安全性和現代功能來改進這些模式。無論您是在開發大型應用程式還是業餘項目，掌握 TypeScript 中的設計模式都將提升您的開發技能。

什麼是設計模式？

設計模式是針對軟體設計中常見挑戰的可重複使用的通用解決方案。它們不是實際的程式碼，而是用來解決這些問題的模板。這些模式源自《四人幫》(GoF) 一書，分為三大類：

1. 建立模式：專注於物件建立的機制。
2. 結構模式：強調物件的組成與組織。
3. 行為模式：專注於物件之間的互動和通訊。

為什麼在 TypeScript 中使用設計模式？

TypeScript 的功能讓設計模式的實現更加健壯：

1。靜態類型： 在編譯時捕捉錯誤，減少執行時間錯誤。
2.介面和泛型： 允許更精確和靈活的實作。
3.枚舉和聯合類型： 簡化某些模式，例如狀態管理。
4.增強的工具：借助 IDE 支持，TypeScript 提高了工作效率。

TypeScript 中的一些關鍵設計模式

1. 單例模式

確保一個類別只有一個實例並提供對其的全域存取點。

TypeScript 中的實作：

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

使用案例：管理設定設定或資料庫連線。

2.工廠模式

提供用於建立物件的接口，而無需指定其確切的類別。

實作：

interface Button {
  render(): void;
}

class WindowsButton implements Button {
  render() {
    console.log("Rendering Windows button");
  }
}

class MacButton implements Button {
  render() {
    console.log("Rendering Mac button");
  }
}

class ButtonFactory {
  static createButton(os: string): Button {
    if (os === "Windows") return new WindowsButton();
    if (os === "Mac") return new MacButton();
    throw new Error("Unknown OS");
  }
}

const button = ButtonFactory.createButton("Mac");
button.render(); // Output: Rendering Mac button

使用案例：跨平台應用程式的 UI 框架。

3.觀察者模式

定義一對多關係，其中一個物件的變更會通知其所有依賴項。

實作：

class Subject {
  private observers: Array<() => void> = [];

  addObserver(observer: () => void) {
    this.observers.push(observer);
  }

  notifyObservers() {
    this.observers.forEach(observer => observer());
  }
}

const subject = new Subject();
subject.addObserver(() => console.log("Observer 1 notified!"));
subject.addObserver(() => console.log("Observer 2 notified!"));
subject.notifyObservers();

用例： Angular 或 React 等前端框架中的反應性。

4. 策略模式

定義一系列演算法，封裝每個演算法，並使它們可以互換。

實作：

interface PaymentStrategy {
  pay(amount: number): void;
}

class CreditCardPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using Credit Card`);
  }
}

class PayPalPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using PayPal`);
  }
}

class PaymentContext {
  constructor(private strategy: PaymentStrategy) {}

  executePayment(amount: number) {
    this.strategy.pay(amount);
  }
}

const payment = new PaymentContext(new PayPalPayment());
payment.executePayment(100); // Paid 100 using PayPal

用例：電子商務平台中的支付系統。

5. 裝飾器模式

動態地為物件新增功能。

實作：

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

用例：為購物車中的產品添加功能。

設計模式表

Pattern	Category	Use Case	Benefit
Singleton	Creational	Managing global state like configurations	Guarantees single instance
Factory	Creational	UI components or APIs	Decouples creation logic
Observer	Behavioral	Event systems in frameworks	Simplifies communication
Strategy	Behavioral	Algorithm selection in runtime	Enhances flexibility
Decorator	Structural	Extending class functionality	Adds dynamic capabilities

圖案

類別

用例

好處
標題> 單例 創意 管理全域狀態（如設定） 保證單實例 工廠 創意 UI 組件或 API 解耦創建邏輯 觀察者 行為 框架中的事件系統 簡化溝通 策略 行為 運行時的演算法選擇 增強靈活性 裝飾器 結構 擴充類別功能 新增動態功能 表> 實施設計模式的最佳實踐
1。理解問題：
不要用不必要的模式使事情複雜化。 2.組合模式： 考慮使用諸如 Singleton 與 Factory 之類的組合。

3.利用 TypeScript 功能：

利用介面、泛型和枚舉來簡化實作。
• 4.編寫測試： 確保模式能如預期運作。 其他資源
• হাতে কলমে জাভাস্ক্রিপ্ট 作者：Junayed Ahmed
作者：

Junayed Ahmed

---

重構模式

作者：

---

Joshua Kerievsky

下一篇文章見，小伙子！ ？

我的個人網站：https://shafayet.zya.me 有點風，不是嗎？ ？ ？

以上是利用 JavaScript 進行函數式編程的詳細內容。更多資訊請關注PHP中文網其他相關文章！