【学习笔记javascript设计模式与开发实践（适配器模式）----17】

最新推荐文章于 2022-09-08 12:44:55 发布

转载最新推荐文章于 2022-09-08 12:44:55 发布 · 652 阅读

JS学习专栏收录该内容

148 篇文章

订阅专栏

本文深入探讨适配器模式如何解决软件接口不兼容问题，通过港式插头转换器、电源适配器、USB转接口等现实案例，展示适配器模式在不同场景下的应用。同时，通过代码实例详细说明如何利用适配器模式解决接口不匹配问题，包括第三方模块的兼容性调整和数据格式转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第17章适配器模式

适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后，原本由于接口不兼容而不能工作的两个软件实体可以一起工作。适配器的别名是包装器，这是一个相对简单的模式，在程序开发中有许多这样的场景；当我们试图调用模块或者对象的某个接口时，却发现这个接口的格式并不符合目前的需求。这时候有两种解决办法，第一种是修改原来的接口实现，但如果原来的模块很复杂，或者我们拿到地模块是一段别人编写的经过压缩的代码，修改原接口不太现实。第二种办法是创建一个适配器，将原接口转换为客户希望的另一个接口，客户只需要和适配器打交道。

17.1 现实中的适配器

适配器在现实生活的应用非常广泛，接下来我们看几个现实生活中的适配器模式。

1. 港式插头转换器

2. 电源适配器

3. USB转接口

17.2 适配器模式的应用

如果现有接口已经能够正常工作，那我们就永远不会用上适配器模式。适配器模式是一种“亡羊补牢”的模式，没有人会在程序设计之初就使用它。因为没有人可以完全预料到未来的事情，也许现在好好工作的接口，使它继续保持生命力。比JSON格式流行之前，很多cgi返回的都是XML格式的数据，如果今天仍然想继续使用这些接口，显然我们可以创建一个XMLàJSON的适配器

下面我这个实例可以帮且我们深刻了解适配器。

回忆我们第1章提到的地图显示百度地图，google地图

var googleMap= {
   show:function(){
       console.log('开始渲染谷歌地图');
   }
}
var baiduMap= {
   show:function(){
       console.log('开始渲染百度地图');
   }
}

var renderMap = function(map){
   if(map.showinstanceofFunction){
       map.show();
   }
}

这段程序能顺利运行的关键是googleMap和baiduMap提供了一致的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();
  }
}
renderMap(googleMap);
renderMap(baiduMapAdapter);

再来看看另外一个例子。假设我们正在编写一个渲染广东省地图的页面。目前从第三方资源里获得了广东省所有城市以及它们所对就的ID,并且成功地渲染到页面中：

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))
}
 
render(getGuangdongCity);

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

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

除了大动干戈地改写渲染页面的前端代码之外，另外一种更轻便的解决方式就是新增数据格式转换的适配器：

var getGuangdongCity = function(){
varguangdongCity = [
   {
     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(vari=0,c;c=oldAddress[i++];){
      address[c.name] = c.id;
  }
  return function(){
   return address;
  }
}
render(addressAdapter(getGuangdongCity));

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