>[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 ) ); ~~~