適配器模式是設(shè)計模式行為型模式中的一種模式；

定義：

適配器用來解決兩個已有接口之間不匹配的問題，它并不需要考慮接口是如何實現(xiàn)，也不用考慮將來該如何修改；適配器不需要修改已有接口，就可以使他們協(xié)同工作；

白話解釋：

你買了某種電器產(chǎn)品，準備帶回家好好感受該款產(chǎn)品的魅力；結(jié)果帶回家之后準備通電使用的時候，發(fā)現(xiàn)該產(chǎn)品僅支持兩孔插座，而你家里的電源插座都是三孔插座；這個時候你總不能又跑去電器專賣店退貨吧；突然靈機一動，你想起來了家里還有多功能電源插座，而多功能電源插座恰好就是三孔，于是你拿出你的多功能電源插座插上電源插座，再拿你電器產(chǎn)品的電源插座插在多功能插座上面的兩孔插座上，開始享受美滋滋的生活；這里的多功能插座就是一個適配器；

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 ); // 開始渲染百度地圖

當然上面的代碼是能夠正常運行的，這得益于這兩個對象中的參數(shù)名都是一樣的，所以才能夠正常的運行和顯示；

var googleMap = { show: function(){console.log( ’開始渲染谷歌地圖’ ); }};var baiduMap = { display: function(){console.log( ’開始渲染百度地圖’ ); }};

突然有一天如果baiduMap的方法名改變了呢？那么我們再跟上面一樣運行肯定是會報錯的，因為baiduMap對象中已經(jīng)沒有了show()這個方法了；

使用適配器模式來修改：

var googleMap = { show: function(){console.log( ’開始渲染谷歌地圖’ ); }};var baiduMap = { display: function(){console.log( ’開始渲染百度地圖’ ); }};var baiduMapAdapter = { show: function(){return baiduMap.display(); }};renderMap( googleMap ); // 開始渲染谷歌地圖renderMap( baiduMapAdapter ); // 開始渲染百度地圖

在這段代碼中適配器做的事情其實很簡單，就是創(chuàng)建了一個對象，添加了一個同名的show()方法，然后在適配器里面調(diào)用了baiduMap.display()方法，這樣我們只需要在調(diào)用baiduMap的時候調(diào)用我們的適配器即可達到預期效果；

我們作為前端開發(fā)人員，對頁面上期待得到的數(shù)據(jù)和數(shù)據(jù)格式肯定是比較了解的，但是在前后端分離的開發(fā)模式中有的時候會遇到這種尷尬的處境：

我們都知道很多UI組件或者工具庫會按指定的數(shù)據(jù)格式進行渲染，但是這個時候后端是不知道的；所以可能接口出來的數(shù)據(jù)我們是不能直接正常的在頁面上渲染的，而此時老板催促我們趕緊上線，而后端堅持認為數(shù)據(jù)格式?jīng)]問題，堅決不修改；這個時候我們可以通過適配器模式來前端格式化數(shù)據(jù)；

后端返回的json數(shù)據(jù)格式：

[ { 'day': '周一', 'uv': 6300 }, { 'day': '周二', 'uv': 7100 }, { 'day': '周三', 'uv': 4300 }, { 'day': '周四', 'uv': 3300 }, { 'day': '周五', 'uv': 8300 }, { 'day': '周六', 'uv': 9300 }, { 'day': '周日', 'uv': 11300 }]

Echarts圖表圖形需要的數(shù)據(jù)格式：

['周二', '周二', '周三'， '周四'， '周五'， '周六'， '周日'] //x軸的數(shù)據(jù)[6300. 7100, 4300, 3300, 8300, 9300, 11300] //坐標點的數(shù)據(jù)

雖然心里苦，但還是要解決問題！使用適配器來解決：

//x軸適配器function echartXAxisAdapter(res) { return res.map(item => item.day);}//坐標點適配器function echartDataAdapter(res) { return res.map(item => item.uv);}

創(chuàng)建兩個函數(shù)分別對數(shù)據(jù)按照echarts所需要的數(shù)據(jù)格式進行格式化處理即可解決問題；這兩個方法其實就是一個適配器，把指定的數(shù)據(jù)丟進去即可按照指定規(guī)則輸出我們期待得到的數(shù)據(jù)格式；

個人認為適配器模式其實是一種亡羊補牢式的設(shè)計模式，如果在項目開發(fā)的開始階段我們就知道我們期待的數(shù)據(jù)格式或者方法名等，我們就可能永遠都用不到適配器模式；但是項目的迭代往往是不可預期的，當項目迭代之后數(shù)據(jù)格式或者方法名發(fā)生變化之后，我們通常可以使用適配器模式來進行適配解決；當然了，最好的解決辦法就是項目開發(fā)過程中前后端協(xié)商討論數(shù)據(jù)格式、文件名等代碼規(guī)范，這樣是對項目的開發(fā)效率是會有很大的提升的；

以上就是JavaScript設(shè)計模式學習之適配器模式的詳細內(nèi)容，更多關(guān)于JavaScript設(shè)計模式的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！