前端设计模式（四）：适配器模式

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

​ 适配器模式是一对相对简单的模式，有一些模式跟适配器模式的结构非常相似，比如装饰者模式、代理模式和外观模式。这几种模式都属于“包装模式”，都是由一个对象来包装另一个对象。区别它们的关键仍然是模式的意图：

• 适配器模式主要用来解决两个已有接口之间不匹配的问题，它不考虑这些接口是怎样实

  现的，也不考虑它们将来可能会如何演化。适配器模式不需要改变已有的接口，就能够

  使它们协同作用

• 装饰者模式和代理模式也不会改变原有对象的接口，但装饰者模式的作用是为了给对象

  增加功能。装饰者模式常常形成一条长的装饰链，而适配器模式通常只包装一次。代理

  模式是为了控制对对象的访问，通常也只包装一次

• 外观模式的作用倒是和适配器比较相似，有人把外观模式看成一组对象的适配器，但外

  观模式最显著的特点是定义了一个新的接口

适配器模式的例子：

const googleMap = {
  show: () => {
    console.log('谷歌地图展示方法')
  }
}

const gaodeMap = {
  show: () => {
    console.log('高德地图展示方法')
  }
}

// 我们写了一个通用的加载Map的方法
const renderMap = (map) => {
  if(map.show && map.show instanceof Function) {
    map.show();
  }
}

// OK,加载高德和谷歌都没问题
renderMap(googleMap);
renderMap(gaodeMap);

// 但是假如来了个百度地图，里面提供的是display方法
const baiduMap = {
  display: () => {
    console.log('百度地图展示方法')
  }
}

// 由于我们无法知道第三方SDK给我们提供什么方法名，所以我们应该套一层方法去转换，这就是适配器

const baiduMapAdapter = {
  show: () => {
    return baiduMap.display()
  }
}

// 正常调用
renderMap(baiduMapAdapter)

标签：const,show,适配器,renderMap,接口,模式,设计模式,前端
来源： https://www.cnblogs.com/suanyunyan/p/16415663.html