橋接模式通過將物件的抽象部分與實現部分分離，使系統更具彈性。

生活範例

隨著行動支付方式日益多樣化，想像一間行動支付整合商的服務，支援像 Apple Pay、LINE Pay 等主流支付手段，並能透過網頁或 POS 機等多種平台進行支付。支付平台就像橋接模式中的抽象部分，而行動支付方式則是具體的實作部分。客戶端可以靈活地組合不同的支付平台和支付方式，以滿足各種使用情境，而不需要針對每一種需求重新開發新系統。

舉個例子

想像一個具備 AI 功能的文字編輯器，使用者可以通過對話面板或輸入框和 AI 進行互動，並選擇 ChatGPT 或 Claude 作為語言模型。我們可以使用橋接模式來分離使用者介面與 AI 模型，使兩者能夠獨立變更，進而提升系統的靈活性。

AIIntegrationTool 是使用者介面的基礎類別，定義了語言模型的互動方法，並持有語言模型的具體實現。

abstract class AIIntegrationTool {
  protected model: AIModel;

  constructor(model: AIModel) {
    this.model = model;
  }

  abstract sendMessage(input: string): void;
}

ChatPanel 和 ChatInputBox 分別代表兩種不同的對話工具（如對話面板和輸入框），它們都可以與不同的 AI 模型結合。

class ChatPanel extends AIIntegrationTool {
  sendMessage(input: string) {
    console.log("Sending message from ChatPanel: ", input);
    this.model.processMessage(input);
  }
}

class ChatInputBox extends AIIntegrationTool {
  sendMessage(input: string) {
    console.log("Sending message from ChatInputBox: ", input);
    this.model.processMessage(input);
  }
}

AIModel 是語言模型的共通介面，定義了處理使用者訊息的方法。

abstract class AIModel {
  abstract processMessage(input: string): void;
}

ChatGPTModel 和 ClaudeModel 是不同的 AI 模型實現，它們可以被各種對話工具使用。

class ChatGPTModel extends AIModel {
  processMessage(input: string) {
    console.log("ChatGPT processing message: ", input);
  }
}

class ClaudeModel extends AIModel {
  processMessage(input: string) {
    console.log("Claude processing message: ", input);
  }
}

最後，定義對話選單和輸入框，分別指派不同的語言模型，並發送訊息來觀察結果。

class AIIntegrationTestDrive {
  static main() {
    const chatGPTPanel = new ChatPanel(new ChatGPTModel());
    const claudeChatInputBox = new ChatInputBox(new ClaudeModel());

    chatGPTPanel.sendMessage("Hello, how are you?");
    claudeChatInputBox.sendMessage("Hello, how are you?");
  }
}

AIIntegrationTestDrive.main();

執行結果：

Sending message from ChatPanel:  Hello, how are you?
ChatGPT processing message:  Hello, how are you?
Sending message from ChatInputBox:  Hello, how are you?
Claude processing message:  Hello, how are you?

定義

• 抽象部分（Abstraction）： 定義客戶端的操作介面，並維護對實現部分的引用
• 精確抽象（RefinedAbstraction）： 擴展抽象部分，根據特定需求提供更具體的操作行為
• 實現部分（Implementor）： 定義抽象部分所需的底層操作
• 具體實現（ConcreteImplementor）： 實現底層操作的具體行為

橋接模式透過分離關注點來提升系統的靈活性。它將物件分為抽象部分和實現部分：抽象部分負責提供客戶端的操作介面，而實現部分負責處理底層功能的具體實作。抽象部分與實現部分可以獨立變化並自由組合，開發者能夠組合不同的抽象與實現來滿足各種需求，而不需要為每個需求建立新的類別，從而減少系統中的類別數量，提升程式的靈活性和維護性。

總結

• 通過將物件的抽象與實現分離來提升系統的靈活性
• 可以自由組合抽象與實現以滿足多樣化的需求
• 減少系統中的類別數量，避免繼承導致的類別爆炸問題

完整範例

https://github.com/chengen0612/design-patterns-typescript/blob/main/patterns/structural/bridge.ts