前端設計模式——適配器模式

適配器模式（Adapter Pattern）：將一個類的介面轉化為客戶端所期望的介面，使得原本不相容的類可以一起工作。在前端開發中，可以使用適配器模式來處理不同瀏覽器之間的相容性問題。

適配器模式通常包含三個角色：客戶端、目標對象和適配器對象。客戶端調用適配器對象的介面，適配器對象再調用目標對象的介面，將目標對象的介面轉換為客戶端需要的介面，從而實現相容性。

另外，適配器模式也可以用於將不同的第三方組件或插件進行整合和相容。例如，當一個網站需要使用不同的圖表庫來繪製圖表時，可以使用適配器模式將這些圖表庫進行封裝，從而實現統一的調用介面，方便使用和維護。

下麵是一個簡單的例子，演示如何使用適配器模式將不同的 API 介面進行統一封裝：

// 目標介面
class Target {
  request() {
    return 'Target: 請求完成！';
  }
}

// 需要適配的對象
class Adaptee {
  specificRequest() {
    return 'Adaptee: 請求完成！';
  }
}

// 適配器對象
class Adapter extends Target {
  constructor(adaptee) {
    super();
    this.adaptee = adaptee;
  }

  request() {
    const result = this.adaptee.specificRequest();
    return `Adapter: ${result}`;
  }
}

// 使用適配器模式
const adaptee = new Adaptee();
const adapter = new Adapter(adaptee);
console.log(adapter.request()); // 輸出：Adapter: Adaptee: 請求完成！

在上面的代碼中，我們定義了一個目標介面 `Target` 和一個需要適配的對象 `Adaptee`，它們之間的介面不相容。然後我們使用適配器模式，將 `Adaptee` 對象適配為 `Target` 介面，從而實現了相容性。

適配器對象 `Adapter` 繼承了目標介面 `Target`，併在其內部使用了需要適配的對象 `Adaptee`。在 `Adapter` 的 `request` 方法中，我們調用了 `Adaptee` 的 `specificRequest` 方法，將其返回值包裝為符合 `Target` 介面的形式。

通過適配器模式，我們可以將不同介面的對象進行統一封裝，從而方便我們使用和維護代碼。