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

時間 2019-11-05

標籤 javascript 設計模式適配欄目 JavaScript 简体版

原文原文鏈接

適配器模式：將一個類（對象）的接口（方法或屬性）轉化成客戶但願的另一個接口（方法或屬性），使得本來因爲接口不兼容而不能一塊兒工做的那些類（對象）能夠正常協做。簡單理解就是爲兼容而生的「轉換器」。javascript

對於強迫症患者，那麼多形狀各異的接口，對應着不一樣數據線。若是能夠有一個轉接口實現集合兼容，豈不美哉。沒錯，這樣一個適配器，你值得擁有。（各大廠商加把勁。。。）html

生活小栗子：java

港式插頭轉換器
筆記本電源適配器
Type-C 轉接口

模式特色

新包裝對象（適配器對象）實現對原對象接口的訪問（接口名可不一樣）
適配器對象不對請求數據作預處理，直接傳入原對象接口處理
適配器對象對外接口名統一，外部調用者可統一接口調用多對象方法

模式實現

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

第三方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 封裝了事件處理的適配器，解決跨瀏覽器兼容性問題，極大簡化咱們平常編程操做。github

// $('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
    }
}
複製代碼