摘要:與其它模式的異同適配器模式不會改變原有接口,這一點與裝飾者模式和代理模式類似。代理模式適配器模式與代理模式最相似,同樣都是創(chuàng)建一個新對象包裝一次,實現(xiàn)對本體的調(diào)用。外觀模式外觀模式與適配器模式最大的區(qū)別,是定義了一個新的接口。
適配器模式:將一個類(對象)的接口(方法或?qū)傩裕┺D(zhuǎn)化成客戶希望的另外一個接口(方法或?qū)傩裕?,使得原本由于接口不兼容而不能一起工作的那些類(對象)可以正常協(xié)作。簡單理解就是為兼容而生的 “轉(zhuǎn)換器”。
對于強(qiáng)迫癥患者,那么多形狀各異的接口,對應(yīng)著不同數(shù)據(jù)線。如果可以有一個轉(zhuǎn)接口實現(xiàn)集合兼容,豈不美哉。沒錯,這樣一個適配器,你值得擁有。(各大廠商加把勁。。。)
生活小栗子:
港式插頭轉(zhuǎn)換器
筆記本電源適配器
Type-C 轉(zhuǎn)接口
模式特點新包裝對象(適配器對象)實現(xiàn)對原對象接口的訪問(接口名可不同)
適配器對象不對請求數(shù)據(jù)做預(yù)處理,直接傳入原對象接口處理
適配器對象對外接口名統(tǒng)一,外部調(diào)用者可統(tǒng)一接口調(diào)用多對象方法
模式實現(xiàn)實現(xiàn)方式:在不改變原有對象接口的基礎(chǔ)上,定義一個包裝對象,新對象轉(zhuǎn)接調(diào)用原有接口,使外部調(diào)用者可以正常使用。第三方SDK的應(yīng)用
// 適配器實現(xiàn)地圖SDK統(tǒng)一渲染 var googleMap = { show: function(){ console.log("開始渲染谷歌地圖"); } }; var baiduMap = { display: function(){ console.log("開始渲染百度地圖"); } }; // 外部實際調(diào)用的適配器對象 var baiduMapAdapter = { show: function() { return baiduMap.display(); } }; // 外部調(diào)用者 var renderMap = function(map) { map.show(); // 統(tǒng)一接口調(diào)用 }; renderMap(googleMap); renderMap(baiduMapAdapter);ES6實現(xiàn)適配器
// 使用ES6改寫適配器實現(xiàn)地圖SDK統(tǒng)一渲染 class googleMap { show() { console.log("開始渲染谷歌地圖"); } } class baiduMap { display() { console.log("開始渲染百度地圖"); } } class baiduMapAdapter extends baiduMap { constructor() { super(); } show() { this.display(); } } // 外部調(diào)用者 function renderMap(map) { map.show(); // 統(tǒng)一接口調(diào)用 } renderMap(new googleMap()); renderMap(new baiduMapAdapter());jQuery中的應(yīng)用
適配器模式非常適用于跨瀏覽器兼容,例如強(qiáng)大的 jQuery 封裝了事件處理的適配器,解決跨瀏覽器兼容性問題,極大簡化我們?nèi)粘>幊滩僮鳌?/p>
// $("selector").on 的實現(xiàn) function on(target, event, callback) { if (target.addEventListener) { // 標(biāo)準(zhǔn)事件監(jiān)聽 target.addEventListener(event, callback); } else if (target.attachEvent) { // IE低版本事件監(jiān)聽 target.attachEvent(event, callback) } else { // 低版本瀏覽器事件監(jiān)聽 target[`on${event}`] = callback } }適用場景
跨瀏覽器兼容
整合第三方SDK
新老接口兼容
適配器模式的初衷是為了解決多對象(接口)兼容問題,如果存在多對象協(xié)同工作時,不方便直接修改原對象的基礎(chǔ)上,可考慮用適配器封裝,以便外部調(diào)用者統(tǒng)一使用。
與其它模式的異同適配器模式不會改變原有接口,這一點與裝飾者模式和代理模式類似。
VS 代理模式適配器模式與代理模式最相似,同樣都是創(chuàng)建一個新對象(包裝一次),實現(xiàn)對本體的調(diào)用。
兩者的區(qū)別:代理模式是為了管控原有對象(本體)的訪問,代理的初衷并不是為兼容,并主張代理與本體對外接口保持一致。
而適配器則是為兼容而生的 “轉(zhuǎn)換器”,并不預(yù)處理請求,直接將請求轉(zhuǎn)接給原接口,新接口與原接口名可能不同。
“代理模式“(嚴(yán)父):學(xué)校繳費要一千塊,這么多?
"適配器模式” (慈母):學(xué)校繳費要一千塊,給給給。
裝飾者模式及外觀模式,會在之后的篇章整理,這里稍作了解。
VS 裝飾者模式裝飾者模式的作用是為對象添加功能,可添加多次,形成裝飾鏈。而適配器只會對原有對象包裝一次。
VS 外觀模式外觀模式與適配器模式最大的區(qū)別,是定義了一個新的接口。
優(yōu)缺點優(yōu)點:兼容性,保證外部可統(tǒng)一接口調(diào)用
缺點:額外對象的創(chuàng)建,非直接調(diào)用,存在一定的開銷(且不像代理模式在某些功能點上可實現(xiàn)性能優(yōu)化)。
參考文章
《JavaScript 設(shè)計模式與開發(fā)實踐》
《JavaScript 設(shè)計模式系統(tǒng)講解與應(yīng)用》
《適配器在JavaScript中的體現(xiàn)》
本文首發(fā)Github,期待Star!
https://github.com/ZengLingYong/blog
作者:以樂之名
本文原創(chuàng),有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請指明出處。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/105016.html
摘要:適配者模式適配者模式主要用于解決兩個接口之間不匹配的問題。新接口希望是下面的形式這時候就可以采用適配者模式 適配者模式 適配者模式: 主要用于解決兩個接口之間不匹配的問題。demo const zhejiangCityOld = (function(){ return [ { name:hangzhou, id: 11, ...
摘要:抽象工廠模式是為了處理對象具有等級結(jié)構(gòu)以及對象族的問題。單例設(shè)計模式單例模式確保某一個類只有一個實例,而且自行實例化并向整個系統(tǒng)提供這個實例,這個類成為單例類。 導(dǎo)語:設(shè)計模式是無數(shù)碼農(nóng)前人在實際的生產(chǎn)項目中經(jīng)過不斷的踩坑、爬坑、修坑的經(jīng)歷總結(jié)出來的經(jīng)驗教訓(xùn),經(jīng)過抽象之后表達(dá)成的概念。能夠幫助后來的設(shè)計者避免重復(fù)同樣的錯誤或者彎路。我也抽空整理了一下設(shè)計模式,用自己的話總結(jié)了一下,自認(rèn)...
摘要:二適配器模式概念適配器模式是一種結(jié)構(gòu)型模式,它的思想是將一個接口轉(zhuǎn)化為另一個接口。適配器模式包含四個角色對象定義所需要的方法請求者負(fù)責(zé)使用對象定義的方法來做具體的處理被適配者以持有方法的角色適配器使用被適配者的方法來滿足對象的需要。 一、結(jié)構(gòu)型設(shè)計模式 1、概念結(jié)構(gòu)型設(shè)計模式描述如何將類或者對象結(jié)合在一起形成更為復(fù)雜,功能更為強(qiáng)大的結(jié)構(gòu)。 2、分類(1)類結(jié)構(gòu)模型:這種結(jié)構(gòu)模型關(guān)心類的...
摘要:開發(fā)中,我們或多或少地接觸了設(shè)計模式,但是很多時候不知道自己使用了哪種設(shè)計模式或者說該使用何種設(shè)計模式。本文意在梳理常見設(shè)計模式的特點,從而對它們有比較清晰的認(rèn)知。 showImg(https://segmentfault.com/img/remote/1460000014919705?w=640&h=280); 開發(fā)中,我們或多或少地接觸了設(shè)計模式,但是很多時候不知道自己使用了哪種設(shè)...
閱讀 2811·2023-04-26 02:28
閱讀 2702·2021-09-27 13:36
閱讀 3207·2021-09-03 10:29
閱讀 2857·2021-08-26 14:14
閱讀 2179·2019-08-30 15:56
閱讀 912·2019-08-29 13:46
閱讀 2682·2019-08-29 13:15
閱讀 512·2019-08-29 11:29