首页手记 JavaScript 设计模式（四）：适配者模式

JavaScript 设计模式（四）：适配者模式

标签：

JavaScript 设计模式

适配器模式：将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），使得原本由于接口不兼容而不能一起工作的那些类（对象）可以正常协作。简单理解就是为兼容而生的 “转换器”。

对于强迫症患者，那么多形状各异的接口，对应着不同数据线。如果可以有一个转接口实现集合兼容，岂不美哉。没错，这样一个适配器，你值得拥有。（各大厂商加把劲。。。）

生活小栗子：

港式插头转换器
笔记本电源适配器
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
    }
}