JS适配器模式

适配器模式

适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后，原本由于接口不兼容而不能工作的两个软件实体可以一起工作。当我们试图调用模块或者对象的某个接口时，却发现这个接口的格式并不符合目前的需求, 则可以用适配器模式。

例如 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(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 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适配器转换之后的新函数来代替。