适配器模式
适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后，原本由于接口不兼容而不能工作的两个软件实体可以一起工作。
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适配器转换之后的新函数来代替。
作者：abean
链接：https://juejin.cn/post/7020581203623280647