适配器模式

适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后，原本由于接口不兼容而不能工作的两个软件实体可以一起工作。

1. 地图例子

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 ); // 输出：开始渲染百度地图

这段程序得以顺利运行的关键是 googleMap 和 baiduMap 提供了一致的 show 方法，但第三方的接口方法并不在我们自己的控制范围之内，假如 baiduMap 提供的显示地图的方法不叫 show 而叫display?此时我们可以通过增加 baiduMapAdapter 来解决问题：

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

2. 城市例子

假设我们正在编写一个渲染广东省地图的页面。目前从第三方资源里获得了广东省的所有城市以及它们所对应的 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 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适配器转换之后的新函数来代替。