JavaScript 設計模式（四）：適配者模式

MingjunYang 發布于2019-08-23 18:18 / 481人閱讀

摘要：與其它模式的異同適配器模式不會改變原有接口，這一點與裝飾者模式和代理模式類似。代理模式適配器模式與代理模式最相似，同樣都是創建一個新對象包裝一次，實現對本體的調用。外觀模式外觀模式與適配器模式最大的區別，是定義了一個新的接口。

適配器模式：將一個類（對象）的接口（方法或屬性）轉化成客戶希望的另外一個接口（方法或屬性），使得原本由于接口不兼容而不能一起工作的那些類（對象）可以正常協作。簡單理解就是為兼容而生的 “轉換器”。

對于強迫癥患者，那么多形狀各異的接口，對應著不同數據線。如果可以有一個轉接口實現集合兼容，豈不美哉。沒錯，這樣一個適配器，你值得擁有。（各大廠商加把勁。。。）

生活小栗子：

港式插頭轉換器

筆記本電源適配器

Type-C 轉接口

模式特點

新包裝對象（適配器對象）實現對原對象接口的訪問（接口名可不同）

適配器對象不對請求數據做預處理，直接傳入原對象接口處理

適配器對象對外接口名統一，外部調用者可統一接口調用多對象方法

模式實現

實現方式：在不改變原有對象接口的基礎上，定義一個包裝對象，新對象轉接調用原有接口，使外部調用者可以正常使用。

第三方SDK的應用

// 適配器實現地圖SDK統一渲染
var googleMap = {
    show: function(){
        console.log("開始渲染谷歌地圖");
    }
};
var baiduMap = {
    display: function(){
        console.log("開始渲染百度地圖");
    }
};

// 外部實際調用的適配器對象
var baiduMapAdapter = {
    show: function() {
        return baiduMap.display();
    }
};

// 外部調用者
var renderMap = function(map) {
    map.show();   // 統一接口調用
}；

renderMap(googleMap);
renderMap(baiduMapAdapter);

ES6實現適配器

// 使用ES6改寫適配器實現地圖SDK統一渲染
class googleMap {
  show() {
    console.log("開始渲染谷歌地圖");
  }
}

class baiduMap {
  display() {
    console.log("開始渲染百度地圖");
  }
}

class baiduMapAdapter extends baiduMap {
  constructor() {
    super();
  }

  show() {
    this.display();
  }
}

// 外部調用者
function renderMap(map) {
  map.show();   // 統一接口調用
}

renderMap(new googleMap());
renderMap(new baiduMapAdapter());

jQuery中的應用

適配器模式非常適用于跨瀏覽器兼容，例如強大的 jQuery 封裝了事件處理的適配器，解決跨瀏覽器兼容性問題，極大簡化我們日常編程操作。

// $("selector").on 的實現
function on(target, event, callback) {
    if (target.addEventListener) {
        // 標準事件監聽
        target.addEventListener(event, callback);
    } else if (target.attachEvent) {
        // IE低版本事件監聽
        target.attachEvent(event, callback)
    } else {
        // 低版本瀏覽器事件監聽
        target[`on${event}`] = callback
    }
}

適用場景

跨瀏覽器兼容

整合第三方SDK

新老接口兼容

適配器模式的初衷是為了解決多對象（接口）兼容問題，如果存在多對象協同工作時，不方便直接修改原對象的基礎上，可考慮用適配器封裝，以便外部調用者統一使用。

與其它模式的異同

適配器模式不會改變原有接口，這一點與裝飾者模式和代理模式類似。

VS 代理模式

適配器模式與代理模式最相似，同樣都是創建一個新對象（包裝一次），實現對本體的調用。

兩者的區別：代理模式是為了管控原有對象（本體）的訪問，代理的初衷并不是為兼容，并主張代理與本體對外接口保持一致。

而適配器則是為兼容而生的 “轉換器”，并不預處理請求，直接將請求轉接給原接口，新接口與原接口名可能不同。

“代理模式“（嚴父）：學校繳費要一千塊，這么多？
"適配器模式” (慈母）：學校繳費要一千塊，給給給。

裝飾者模式及外觀模式，會在之后的篇章整理，這里稍作了解。

VS 裝飾者模式

裝飾者模式的作用是為對象添加功能，可添加多次，形成裝飾鏈。而適配器只會對原有對象包裝一次。

VS 外觀模式

外觀模式與適配器模式最大的區別，是定義了一個新的接口。

優缺點

優點：兼容性，保證外部可統一接口調用

缺點：額外對象的創建，非直接調用，存在一定的開銷（且不像代理模式在某些功能點上可實現性能優化）。

參考文章

《JavaScript 設計模式與開發實踐》

《JavaScript 設計模式系統講解與應用》

《適配器在JavaScript中的體現》

本文首發Github，期待Star！
https://github.com/ZengLingYong/blog

作者：以樂之名
本文原創，有不當的地方歡迎指出。轉載請指明出處。

云服務器 GPU云服務器建造者設計模式策略者模式裝飾者模式建造者模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105016.html

Javascript之適配者模式

摘要：適配者模式適配者模式主要用于解決兩個接口之間不匹配的問題。新接口希望是下面的形式這時候就可以采用適配者模式適配者模式適配者模式: 主要用于解決兩個接口之間不匹配的問題。demo const zhejiangCityOld = (function(){ return [ { name:hangzhou, id: 11, ...

zhangrxiang 2019-08-26 10:49 評論0 收藏0
“大話”設計模式

摘要：抽象工廠模式是為了處理對象具有等級結構以及對象族的問題。單例設計模式單例模式確保某一個類只有一個實例，而且自行實例化并向整個系統提供這個實例，這個類成為單例類。導語：設計模式是無數碼農前人在實際的生產項目中經過不斷的踩坑、爬坑、修坑的經歷總結出來的經驗教訓，經過抽象之后表達成的概念。能夠幫助后來的設計者避免重復同樣的錯誤或者彎路。我也抽空整理了一下設計模式，用自己的話總結了一下，自認...

coordinate35 2019-08-15 15:14 評論0 收藏0
設計模式學習筆記：適配器模式

摘要：二適配器模式概念適配器模式是一種結構型模式，它的思想是將一個接口轉化為另一個接口。適配器模式包含四個角色對象定義所需要的方法請求者負責使用對象定義的方法來做具體的處理被適配者以持有方法的角色適配器使用被適配者的方法來滿足對象的需要。一、結構型設計模式 1、概念結構型設計模式描述如何將類或者對象結合在一起形成更為復雜，功能更為強大的結構。 2、分類（1）類結構模型：這種結構模型關心類的...

CompileYouth 2019-08-16 18:30 評論0 收藏0
JS 適配器模式

摘要：另外，適配器模式和其它幾個模式可能容易讓人迷惑，這里說一下大概的區別適配器和橋接模式雖然類似，但橋接的出發點不同，橋接的目的是將接口部分和實現部分分離，從而對他們可以更為容易也相對獨立的加以改變。 1. 簡介適配器模式（Adapter）是將一個類（對象）的接口（方法或屬性）轉化成客戶希望的另外一個接口（方法或屬性），適配器模式使得原本由于接口不兼容而不能一起工作的那些類（對象）可以一...

Jeffrrey 2019-08-22 11:18 評論0 收藏0
JavaScript 中常見設計模式整理

摘要：開發中，我們或多或少地接觸了設計模式，但是很多時候不知道自己使用了哪種設計模式或者說該使用何種設計模式。本文意在梳理常見設計模式的特點，從而對它們有比較清晰的認知。 showImg(https://segmentfault.com/img/remote/1460000014919705?w=640&h=280); 開發中，我們或多或少地接觸了設計模式，但是很多時候不知道自己使用了哪種設...

Nosee 2019-08-22 17:21 評論0 收藏0