设计模式 -- 适配器模式 · 前端知识 -- 学习整理

>[success] # 适配器模式 ~~~ 1.适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后，原本由于接口不兼容而不能工作的两个软件实体可以一起工作。 2.如果现有的接口已经能够正常工作，那我们就永远不会用上适配器模式。适配器模式是一种 “亡羊补牢”的模式，没有人会在程序的设计之初就使用它 ~~~ >[danger] ##### 更换两个同一个功能的插件恰好他们的实现方法名一样 ~~~ 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 ); // 输出：开始渲染百度地图 ~~~ >[danger] ##### 如果实现方法名不一样 -- 使用适配器 ~~~ 1.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 ); // 输出：开始渲染百度地图 ~~~ >[danger] ##### 换了差价数据格式不一样 -- 适配器 ~~~ 1.目前从第三方资源里获得了广东省的所有城市以及它们所对应的 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 ); ~~~ ~~~ 1.现在换了一个api格式不一样了 ~~~ ~~~ 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 ) ); ~~~