JavaScript設(shè)計(jì)模式之適配器模式

適配器模式的作用是解決兩個(gè)軟件實(shí)體間的接口不兼容的問(wèn)題艺蝴。使用適配器模式之后猬腰,原本由于接口不兼容而不能工作的兩個(gè)軟件實(shí)體可以一起工作。

適配器的別名是包裝器(wrapper)猜敢,這是一個(gè)相對(duì)簡(jiǎn)單的模式姑荷。在程序開(kāi)發(fā)中有許多這樣的場(chǎng)景:當(dāng)我們?cè)噲D調(diào)用模塊或者對(duì)象的某個(gè)接口時(shí),卻發(fā)現(xiàn)這個(gè)接口的格式并不符合目前的需求缩擂。這時(shí)候有兩種解決辦法鼠冕,第一種是修改原來(lái)的接口實(shí)現(xiàn),但如果原來(lái)的模塊很復(fù)雜胯盯,或者我們拿到的模塊是一段別人編寫(xiě)的經(jīng)過(guò)壓縮的代碼懈费,修改原接口就顯得不太現(xiàn)實(shí)了。第二種辦法是創(chuàng)建一個(gè)適配器博脑,將原接口轉(zhuǎn)換為客戶希望的另一個(gè)接口憎乙,客戶只需要和適配器打交道。

現(xiàn)實(shí)中的適配器

適配器在現(xiàn)實(shí)生活的應(yīng)用非常廣泛叉趣,接下來(lái)我們來(lái)看幾個(gè)現(xiàn)實(shí)生活中的適配器模式泞边。

1. 港式插頭轉(zhuǎn)換器

港式的電器插頭比大陸的電器插頭體積要大一些。如果從香港買(mǎi)了一個(gè)Mac book君账,我們會(huì)發(fā)現(xiàn)充電器無(wú)法插在家里的插座上繁堡,為此而改造家里的插座顯然不方便,所以我們需要一個(gè)適配器:

2. 電源適配器

Mac book電池支持的電壓是20V乡数,我們?nèi)粘I钪械慕涣麟妷阂话闶?20V椭蹄。除了我們了解的220V交流電壓,日本和韓國(guó)的交流電壓大多是100V净赴,而英國(guó)和澳大利亞的是240V绳矩。筆記本電腦的電源適配器就承擔(dān)了轉(zhuǎn)換電壓的作用,電源適配器使筆記本電腦在100V~240V的電壓之內(nèi)都能正常工作玖翅,這也是它為什么被稱為電源“適配器”的原因翼馆。

3. USB轉(zhuǎn)接口

在以前的電腦上割以,PS2接口是連接鼠標(biāo)、鍵盤(pán)等其他外部設(shè)備的標(biāo)準(zhǔn)接口应媚。但隨著技術(shù)的發(fā)展严沥,越來(lái)越多的電腦開(kāi)始放棄了PS2接口,轉(zhuǎn)而僅支持USB接口中姜。所以那些過(guò)去生產(chǎn)出來(lái)的只擁有PS2接口的鼠標(biāo)消玄、鍵盤(pán)、游戲手柄等丢胚,需要一個(gè)USB轉(zhuǎn)接口才能繼續(xù)正常工作翩瓜,這是PS2-USB適配器誕生的原因。

適配器模式的應(yīng)用

如果現(xiàn)有的接口已經(jīng)能夠正常工作携龟,那我們就永遠(yuǎn)不會(huì)用上適配器模式兔跌。適配器模式是一種“亡羊補(bǔ)牢”的模式,沒(méi)有人會(huì)在程序的設(shè)計(jì)之初就使用它峡蟋。因?yàn)闆](méi)有人可以完全預(yù)料到未來(lái)的事情坟桅,也許現(xiàn)在好好工作的接口,未來(lái)的某天卻不再適用于新系統(tǒng)层亿,那么我們可以用適配器模式把舊接口包裝成一個(gè)新的接口桦卒,使它繼續(xù)保持生命力立美。比如在JSON格式流行之前匿又,很多cgi返回的都是XML格式的數(shù)據(jù),如果今天仍然想繼續(xù)使用這些接口建蹄,顯然我們可以創(chuàng)造一個(gè)XML-JSON的適配器碌更。

下面這個(gè)實(shí)例可以幫助我們深刻了解適配器模式。

回憶之前多態(tài)的例子洞慎,當(dāng)我們向googleMap和baiduMap都發(fā)出“顯示”請(qǐng)求時(shí)痛单,googleMap和baiduMap分別以各自的方式在頁(yè)面中展現(xiàn)了地圖:

var googleMap = {
    show: function(){
        console.log( '開(kāi)始渲染谷歌地圖' );
    }
};

var baiduMap = {
    show: function(){
        console.log( '開(kāi)始渲染百度地圖' );
    }
};

var renderMap = function( map ){
    if ( map.show instanceof Function ){
        map.show();
    }
};

renderMap( googleMap );    // 輸出:開(kāi)始渲染谷歌地圖
renderMap( baiduMap );    // 輸出:開(kāi)始渲染百度地圖

這段程序得以順利運(yùn)行的關(guān)鍵是googleMap和baiduMap提供了一致的show方法,但第三方的接口方法并不在我們自己的控制范圍之內(nèi)劲腿,假如baiduMap提供的顯示地圖的方法不叫show而叫display呢旭绒?

baiduMap這個(gè)對(duì)象來(lái)源于第三方,正常情況下我們都不應(yīng)該去改動(dòng)它焦人。此時(shí)我們可以通過(guò)增加baiduMapAdapter來(lái)解決問(wèn)題:

var googleMap = {
     show: function(){
         console.log( '開(kāi)始渲染谷歌地圖' );
     }
 };

var baiduMap = {
     display: function(){
         console.log( '開(kāi)始渲染百度地圖' );
     }
 };

var baiduMapAdapter = {
     show: function(){
         return baiduMap.display();
     }
 };

renderMap( googleMap );        // 輸出:開(kāi)始渲染谷歌地圖
renderMap( baiduMapAdapter );    // 輸出:開(kāi)始渲染百度地圖

再來(lái)看看另外一個(gè)例子挥吵。假設(shè)我們正在編寫(xiě)一個(gè)渲染廣東省地圖的頁(yè)面。目前從第三方資源里獲得了廣東省的所有城市以及它們所對(duì)應(yīng)的ID花椭,并且成功地渲染到頁(yè)面中:

var getGuangdongCity = function(){
    var guangdongCity = [
         {
            name: 'shenzhen',
            id: 11,
        }, {
            name: 'guangzhou',
            id: 12,
        }
    ];

    return guangdongCity;
};

var render = function( fn ){
    console.log( '開(kāi)始渲染廣東省地圖' );
    document.write( JSON.stringify( fn() ) );
};

render( getGuangdongCity );

利用這些數(shù)據(jù)忽匈,我們編寫(xiě)完成了整個(gè)頁(yè)面,并且在線上穩(wěn)定地運(yùn)行了一段時(shí)間矿辽。但后來(lái)發(fā)現(xiàn)這些數(shù)據(jù)不太可靠丹允,里面還缺少很多城市郭厌。于是我們又在網(wǎng)上找到了另外一些數(shù)據(jù)資源,這次的數(shù)據(jù)更加全面雕蔽,但遺憾的是折柠,數(shù)據(jù)結(jié)構(gòu)和正運(yùn)行在項(xiàng)目中的并不一致。新的數(shù)據(jù)結(jié)構(gòu)如下:

var guangdongCity = {
    shenzhen: 11,
    guangzhou: 12,
    zhuhai: 13
};

除了大動(dòng)干戈地改寫(xiě)渲染頁(yè)面的前端代碼之外批狐,另外一種更輕便的解決方式就是新增一個(gè)數(shù)據(jù)格式轉(zhuǎn)換的適配器:

var getGuangdongCity = function(){
    var guangdongCity = [
         {
            name: 'shenzhen',
            id: 11,
        }, {
            name: 'guangzhou',
            id: 12,
        }
    ];

    return guangdongCity;
};


var render = function( fn ){
    console.log( '開(kāi)始渲染廣東省地圖' );
    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 ) );

那么接下來(lái)需要做的液走,就是把代碼中調(diào)用getGuangdongCity的地方,用經(jīng)過(guò)addressAdapter適配器轉(zhuǎn)換之后的新函數(shù)來(lái)代替贾陷。

小結(jié)

適配器模式是一對(duì)相對(duì)簡(jiǎn)單的模式缘眶。在本書(shū)提到的設(shè)計(jì)模式中,有一些模式跟適配器模式的結(jié)構(gòu)非常相似髓废,比如裝飾者模式巷懈、代理模式和外觀模式)。這幾種模式都屬于“包裝模式”慌洪,都是由一個(gè)對(duì)象來(lái)包裝另一個(gè)對(duì)象顶燕。區(qū)別它們的關(guān)鍵仍然是模式的意圖。

  • 適配器模式主要用來(lái)解決兩個(gè)已有接口之間不匹配的問(wèn)題冈爹,它不考慮這些接口是怎樣實(shí)現(xiàn)的涌攻,也不考慮它們將來(lái)可能會(huì)如何演化。適配器模式不需要改變已有的接口频伤,就能夠使它們協(xié)同作用恳谎。

  • 裝飾者模式和代理模式也不會(huì)改變?cè)袑?duì)象的接口,但裝飾者模式的作用是為了給對(duì)象增加功能憋肖。裝飾者模式常常形成一條長(zhǎng)的裝飾鏈因痛,而適配器模式通常只包裝一次。代理模式是為了控制對(duì)對(duì)象的訪問(wèn)岸更,通常也只包裝一次鸵膏。

  • 外觀模式的作用倒是和適配器比較相似,有人把外觀模式看成一組對(duì)象的適配器怎炊,但外觀模式最顯著的特點(diǎn)是定義了一個(gè)新的接口谭企。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市评肆,隨后出現(xiàn)的幾起案子债查,更是在濱河造成了極大的恐慌,老刑警劉巖糟港,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件攀操,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)门扇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)梧疲,“玉大人颠放,你說(shuō)我怎么就攤上這事排惨。” “怎么了碰凶?”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵暮芭,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我欲低,道長(zhǎng)辕宏,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任砾莱,我火速辦了婚禮瑞筐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘腊瑟。我一直安慰自己聚假,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布闰非。 她就那樣靜靜地躺著膘格,像睡著了一般。 火紅的嫁衣襯著肌膚如雪财松。 梳的紋絲不亂的頭發(fā)上瘪贱,一...
    開(kāi)封第一講書(shū)人閱讀 49,166評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音游岳,去河邊找鬼政敢。 笑死其徙,一個(gè)胖子當(dāng)著我的面吹牛胚迫,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播唾那,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼访锻,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了闹获?” 一聲冷哼從身側(cè)響起期犬,我...
    開(kāi)封第一講書(shū)人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎避诽,沒(méi)想到半個(gè)月后龟虎,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡沙庐,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年鲤妥,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了佳吞。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡棉安,死狀恐怖底扳,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情贡耽,我是刑警寧澤衷模,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站蒲赂,受9級(jí)特大地震影響阱冶,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜滥嘴,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一熙揍、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧氏涩,春花似錦届囚、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至饺汹,卻和暖如春蛔添,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背兜辞。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工迎瞧, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人逸吵。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓凶硅,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親扫皱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子足绅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容