JavaScript 设计模式之适配器模式

833 阅读5分钟

这是我参与8月更文挑战的第14天,活动详情查看:8月更文挑战

适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后,原本由于接口不兼容而不能工作的两个软件实体可以一起工作。适配器的别名是包装器(wrapper),是一个相对简单的模式。

现实中的适配器

1. 港式插头转换器

港式的电器插头比大陆的电器插头体积要大一些。如果从香港买了一个 Mac book,我们会发现充电器无法插在家里的插座上,为此而改造家里的插座显然不方便,所以我们需要一个适配器。

2. 电源适配器

Mac book 电池支持的电压是 20V,我们日常生活中的交流电压一般是 220V。除了我们了解的 220V 交流电压,日本和韩国的交流电压大多是 100V,而英国和澳大利亚的是 240V。笔记本电脑的电源适配器就承担了转换电压的作用,电源适配器使笔记本电脑在 100V~240V 的电压之内都能正常工作,这也是它为什么被称为电源“适配器”的原因。

3. USB 转接口

在以前的电脑上,PS2 接口是连接鼠标、键盘等其他外部设备的标准接口。但随着技术的发展,越来越多的电脑开始放弃了 PS2 接口,转而仅支持 USB 接口。所以那些过去生产出来的只拥有 PS2 接口的鼠标、键盘、游戏手柄等,需要一个 USB 转接口才能继续正常工作,这是 PS2-USB 适配器诞生的原因。

还有USB转TypeC等等的转接口,都可以称之为适配器。

适配器模式的应用

XML-JSON 的适配器。

googleMap 和 baiduMap 的例子

当我们向 googleMapbaiduMap 都发出“显示”请求时,googleMapbaiduMap 分别以各自的方式在页面中展现了地图。

var googleMap = {
  show: function() {
    console.log('开始渲染谷歌地图')
  }
}
var baiduMap = {
  show: function() {
    console.log('开始渲染百度地图')
  }
}
var renderMap = function(map) {
  if (map.show instanceof Function) {
    map.show()
  }
}
renderMap(googleMap) // 输出:开始渲染谷歌地图
renderMap(baiduMap) // 输出:开始渲染百度地图

这段程序得以顺利运行的关键是 googleMapbaiduMap 提供了一致的 show 方法,但第三方的接口方法并不在我们自己的控制范围之内,假如 baiduMap 提供的显示地图的方法不叫 show 而叫 display 呢?

baiduMap 这个对象来源于第三方,正常情况下我们都不应该去改动它。此时我们可以通过增加 baiduMapAdapter 来解决问题:

var googleMap = {
  show: function() {
    console.log('开始渲染谷歌地图')
  }
}
var baiduMap = {
  display: function() {
    console.log('开始渲染百度地图')
  }
}
var baiduMapAdapter = {
  show: function() {
    return baiduMap.display()
  }
}
var renderMap = function(map) {
  if (map.show instanceof Function) {
    map.show()
  }
}
renderMap(googleMap) // 输出:开始渲染谷歌地图
renderMap(baiduMap) // 输出:开始渲染百度地图

渲染某省市地图

我们正在编写一个渲染广东省地图的页面。目前从第三方资源里获得了广东省的所有城市以及它们所对应的 ID,并且成功地渲染到页面中。

var getGuangdongCity = function() {
  var guangdongCity = [
    {
      name: 'shenzhen'
    },
    {
      name: 'guangzhou',
      id: 12
    }
  ]
  return guangdongCity
}
var render = function(fn) {
  console.log('开始渲染广东省地图')
  document.write(JSON.stringify(fn()))
}
render(getGuangdongCity)

利用这些数据,我们编写完成了整个页面,并且在线上稳定地运行了一段时间。但后来发现这些数据不太可靠,里面还缺少很多城市。于是我们又在网上找到了另外一些数据资源,这次的数据更加全面,但遗憾的是,数据结构和正运行在项目中的并不一致。新的数据结构如下:

var guangdongCity = { shenzhen: 11, guangzhou: 12, zhuhai: 13 }

更轻便的解决方式就是新增一个数据格式转换的适配器:

var getGuangdongCity = function() {
  var guangdongCity = [
    {
      name: 'shenzhen',
      id: 11
    },
    {
      name: 'guangzhou',
      id: 12
    }
  ]
  return guangdongCity
}
var render = function(fn) {
  console.log('开始渲染广东省地图')
  document.write(JSON.stringify(fn()))
}
var addressAdapter = function(oldAddressfn) {
  var address = {},
    oldAddress = oldAddressfn()
  for (var i = 0, c; (c = oldAddress[i++]); ) {
    address[c.name] = c.id
  }
  return function() {
    return address
  }
}
render(addressAdapter(getGuangdongCity))

那么接下来需要做的,就是把代码中调用 getGuangdongCity 的地方,用经过 addressAdapter 适配器转换之后的新函数来代替。

适配器模式跟其他模式的区别

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

  • 适配器模式主要用来解决两个已有接口之间不匹配的问题,它不考虑这些接口是怎样实现的,也不考虑它们将来可能会如何演化。适配器模式不需要改变已有的接口,就能够使它们协同作用。
  • 装饰者模式和代理模式也不会改变原有对象的接口,但装饰者模式的作用是为了给对象增加功能。装饰者模式常常形成一条长的装饰链,而适配器模式通常只包装一次。代理模式是为了控制对对象的访问,通常也只包装一次。

最后说一句

如果这篇文章对您有所帮助,或者有所启发的话,帮忙点赞关注一下,您的支持是我坚持写作最大的动力,多谢支持。

同系列文章

  1. JavaScript 设计模式之单例模式
  2. JavaScript 设计模式之策略模式
  3. JavaScript 设计模式之代理模式
  4. JavaScript 设计模式之迭代器模式
  5. JavaScript 设计模式之发布-订阅模式
  6. JavaScript 设计模式之命令模式
  7. JavaScript 设计模式之组合模式
  8. JavaScript 设计模式之模板方法模式
  9. JavaScript 设计模式之享元模式
  10. JavaScript 设计模式之职责链模式
  11. JavaScript 设计模式之中介者模式
  12. JavaScript 设计模式之装饰者模式
  13. JavaScript 设计模式之状态模式
  14. JavaScript 设计模式之适配器模式