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

2022-06-27 12:00:48 阅读：226 来源： 互联网

标签：const show 适配器 renderMap 接口模式设计模式前端

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

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

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

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

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

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

模式是为了控制对对象的访问，通常也只包装一次
外观模式的作用倒是和适配器比较相似，有人把外观模式看成一组对象的适配器，但外

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

适配器模式的例子：

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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