摘要:另外,適配器模式和其它幾個(gè)模式可能容易讓人迷惑,這里說一下大概的區(qū)別適配器和橋接模式雖然類似,但橋接的出發(fā)點(diǎn)不同,橋接的目的是將接口部分和實(shí)現(xiàn)部分分離,從而對(duì)他們可以更為容易也相對(duì)獨(dú)立的加以改變。
1. 簡(jiǎn)介
適配器模式(Adapter)是將一個(gè)類(對(duì)象)的接口(方法或?qū)傩裕┺D(zhuǎn)化成客戶希望的另外一個(gè)接口(方法或?qū)傩裕m配器模式使得原本由于接口不兼容而不能一起工作的那些類(對(duì)象)可以一些工作。
2. 實(shí)現(xiàn)我們來舉一個(gè)例子,鴨子(Dock)有飛(fly)和嘎嘎叫(quack)的行為,而火雞雖然也有飛(fly)的行為,但是其叫聲是咯咯的(gobble)。如果你非要火雞也要實(shí)現(xiàn)嘎嘎叫(quack)這個(gè)動(dòng)作,那我們可以復(fù)用鴨子的quack方法,但是具體的叫還應(yīng)該是咯咯的,此時(shí),我們就可以創(chuàng)建一個(gè)火雞的適配器,以便讓火雞也支持quack方法,其內(nèi)部還是要調(diào)用gobble。
OK,我們開始一步一步實(shí)現(xiàn),首先要先定義鴨子和火雞的抽象行為,也就是各自的方法函數(shù):
// 鴨子抽象類 var Duck = function(){ }; Duck.prototype.fly = function(){ throw new Error("該方法必須被重寫!"); }; Duck.prototype.quack = function(){ throw new Error("該方法必須被重寫!"); } // 火雞抽象類 var Turkey = function(){ }; Turkey.prototype.fly = function(){ throw new Error(" 該方法必須被重寫 !"); }; Turkey.prototype.gobble = function(){ throw new Error(" 該方法必須被重寫 !"); };
然后再定義具體的鴨子和火雞的構(gòu)造函數(shù),分別為:
//鴨子 var MallardDuck = function () { Duck.apply(this); }; MallardDuck.prototype = new Duck(); //原型是Duck MallardDuck.prototype.fly = function () { console.log("可以飛翔很長(zhǎng)的距離!"); }; MallardDuck.prototype.quack = function () { console.log("嘎嘎!嘎嘎!"); }; //火雞 var WildTurkey = function () { Turkey.apply(this); }; WildTurkey.prototype = new Turkey(); //原型是Turkey WildTurkey.prototype.fly = function () { console.log("飛翔的距離貌似有點(diǎn)短!"); }; WildTurkey.prototype.gobble = function () { console.log("咯咯!咯咯!"); };
為了讓火雞也支持quack方法,我們創(chuàng)建了一個(gè)新的火雞適配器TurkeyAdapter:
var TurkeyAdapter = function(oTurkey){ Duck.apply(this); this.oTurkey = oTurkey; }; TurkeyAdapter.prototype = new Duck(); TurkeyAdapter.prototype.quack = function(){ this.oTurkey.gobble(); }; TurkeyAdapter.prototype.fly = function(){ var nFly = 0; var nLenFly = 5; for(; nFly < nLenFly;){ this.oTurkey.fly(); nFly = nFly + 1; } };
該構(gòu)造函數(shù)接受一個(gè)火雞的實(shí)例對(duì)象,然后使用Duck進(jìn)行apply,其適配器原型是Duck,然后要重新修改其原型的quack方法,以便內(nèi)部調(diào)用oTurkey.gobble()方法。其fly方法也做了一些改變,讓火雞連續(xù)飛5次(內(nèi)部也是調(diào)用自身的oTurkey.fly()方法)。
調(diào)用方法,就很明了了,測(cè)試一下便可以知道結(jié)果了:
var oMallardDuck = new MallardDuck(); var oWildTurkey = new WildTurkey(); var oTurkeyAdapter = new TurkeyAdapter(oWildTurkey); //原有的鴨子行為 oMallardDuck.fly(); oMallardDuck.quack(); //原有的火雞行為 oWildTurkey.fly(); oWildTurkey.gobble(); //適配器火雞的行為(火雞調(diào)用鴨子的方法名稱) oTurkeyAdapter.fly(); oTurkeyAdapter.quack();3. 其它應(yīng)用
適配器模式也經(jīng)常用于日常的數(shù)據(jù)處理上,比如把一個(gè)有序的數(shù)組轉(zhuǎn)化成我們需要的對(duì)象格式:
const arr = ["Javascript", "book", "前端編程語言", "8月1日"] function arr2objAdapter(arr) { // 轉(zhuǎn)化成我們需要的數(shù)據(jù)結(jié)構(gòu) return { name: arr[0], type: arr[1], title: arr[2], time: arr[3] } } const adapterData = arr2objAdapter(arr)
在前后端的數(shù)據(jù)傳遞的時(shí)候會(huì)經(jīng)常使用到適配器模式,如果后端的數(shù)據(jù)經(jīng)常變化,比如在某些網(wǎng)站拉取的數(shù)據(jù),后端有時(shí)無法控制數(shù)據(jù)的格式,所以在使用數(shù)據(jù)前最好對(duì)數(shù)據(jù)進(jìn)行適配成我們可用的數(shù)據(jù)格式再使用。
4. 總結(jié)那合適使用適配器模式好呢?如果有以下情況出現(xiàn)時(shí),建議使用:
使用一個(gè)已經(jīng)存在的對(duì)象,但其方法或?qū)傩越涌诓环夏愕囊螅?/p>
你想創(chuàng)建一個(gè)可復(fù)用的對(duì)象,該對(duì)象可以與其它不相關(guān)的對(duì)象或不可見對(duì)象(即接口方法或?qū)傩圆患嫒莸膶?duì)象)協(xié)同工作;
想使用已經(jīng)存在的對(duì)象,但是不能對(duì)每一個(gè)都進(jìn)行原型繼承以匹配它的接口。對(duì)象適配器可以適配它的父對(duì)象接口方法或?qū)傩浴?/p>
另外,適配器模式和其它幾個(gè)模式可能容易讓人迷惑,這里說一下大概的區(qū)別:
適配器和橋接模式雖然類似,但橋接的出發(fā)點(diǎn)不同,橋接的目的是將接口部分和實(shí)現(xiàn)部分分離,從而對(duì)他們可以更為容易也相對(duì)獨(dú)立的加以改變。而適配器則意味著改變一個(gè)已有對(duì)象的接口。
裝飾者模式增強(qiáng)了其它對(duì)象的功能而同時(shí)又不改變它的接口,因此它對(duì)應(yīng)程序的透明性比適配器要好,其結(jié)果是裝飾者支持遞歸組合,而純粹使用適配器則是不可能的。
代理模式在不改變它的接口的條件下,為另外一個(gè)對(duì)象定義了一個(gè)代理。
本文是系列文章,可以相互參考印證,共同進(jìn)步~
JS 抽象工廠模式
JS 工廠模式
JS 建造者模式
JS 原型模式
JS 單例模式
JS 回調(diào)模式
JS 外觀模式
JS 適配器模式
JS 利用高階函數(shù)實(shí)現(xiàn)函數(shù)緩存(備忘模式)
JS 狀態(tài)模式
JS 橋接模式
JS 觀察者模式
網(wǎng)上的帖子大多深淺不一,甚至有些前后矛盾,在下的文章都是學(xué)習(xí)過程中的總結(jié),如果發(fā)現(xiàn)錯(cuò)誤,歡迎留言指出~
參考:
《Javascript 設(shè)計(jì)模式》 - 張榮銘
設(shè)計(jì)模式之適配器模式
PS:歡迎大家關(guān)注我的公眾號(hào)【前端下午茶】,一起加油吧~
另外可以加入「前端下午茶交流群」微信群,長(zhǎng)按識(shí)別下面二維碼即可加我好友,備注加群,我拉你入群~
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/92155.html
摘要:本文參考于設(shè)計(jì)模式課程設(shè)計(jì)模式之適配器模式設(shè)計(jì)模式是一套被反復(fù)使用的多數(shù)人知曉的經(jīng)過分類編目的代碼設(shè)計(jì)經(jīng)驗(yàn)的總結(jié)。第一個(gè)設(shè)計(jì)模式是適配器模式。總的來說適配器就是的模式,與修飾模式直接無感使用不同,適配器模式使用對(duì)象變?yōu)椤? 本文參考于:設(shè)計(jì)模式課程設(shè)計(jì)模式之適配器模式 設(shè)計(jì)模式是一套被反復(fù)使用的、多數(shù)人知曉的、經(jīng)過分類編目的、代碼設(shè)計(jì)經(jīng)驗(yàn)的總結(jié)。使用設(shè)計(jì)模式是為了重用代碼、讓代碼更容易被...
摘要:適配模式定義適配器模式將某個(gè)類的接口轉(zhuǎn)換成客戶端期望的另一個(gè)接口表示,主的目的是兼容性,讓原本因接口不匹配不能一起工作的兩個(gè)類可以協(xié)同工作。 適配模式 定義:適配器模式將某個(gè)類的接口轉(zhuǎn)換成客戶端期望的另一個(gè)接口表示,主的目的是兼容性,讓原本因接口不匹配不能一起工作的兩個(gè)類可以協(xié)同工作。原有的兩個(gè)類由于接口不一, 需要對(duì)其中一個(gè)類進(jìn)行適配包裝, 以供與另外的類進(jìn)行溝通匹配 實(shí)現(xiàn)適配模式...
摘要:適配器模式是指將一個(gè)接口轉(zhuǎn)換成客戶端希望的另外一個(gè)接口,該模式使得原本不兼容的類可以一起工作。適配器有種角色目標(biāo)抽象角色定義客戶所期待的使用接口。接口源角色需要被適配的接口。接口適配器角色把源接口轉(zhuǎn)換成符合要求的目標(biāo)接口的設(shè)備。 適配器模式 是指將一個(gè)接口轉(zhuǎn)換成客戶端希望的另外一個(gè)接口,該模式使得原本不兼容的類可以一起工作。舉個(gè)例子:macbook pro有一個(gè)HDMI接口,一條HDM...
摘要:門面模式燜面有兩個(gè)作用一是簡(jiǎn)化類的接口二是消除類與使用他的業(yè)務(wù)代碼之間的耦合他幾乎是所有庫的核心原則通過建立一些便利方法可以讓復(fù)雜系統(tǒng)變得更加簡(jiǎn)單易用燜面模式可以使庫提供的工具更加容易理解燜面可以簡(jiǎn)化錯(cuò)誤記錄或者跟蹤頁面視圖統(tǒng)計(jì)數(shù)據(jù)這類這類 門面模式 燜面,有兩個(gè)作用,一是簡(jiǎn)化類的接口;二是消除類與使用他的業(yè)務(wù)代碼之間的耦合.他幾乎是所有 JS 庫的核心原則.通過建立一些便利方法可以讓...
摘要:什么是適配器模式適配器模式將一個(gè)類的接口轉(zhuǎn)換成客戶希望的另外一個(gè)接口,使得原本由于接口不兼容而不能一起工作的那些類可以一起工作。中的適配器模式在前端項(xiàng)目中,適配器模式的使用場(chǎng)景一般有以下三種情況庫的適配參數(shù)的適配和數(shù)據(jù)的適配。 1 什么是適配器模式 適配器模式(Adapter):將一個(gè)類的接口轉(zhuǎn)換成客戶希望的另外一個(gè)接口,使得原本由于接口不兼容而不能一起工作的那些類可以一起工作。 在...
閱讀 652·2021-11-24 09:39
閱讀 3012·2021-11-23 10:06
閱讀 981·2021-10-08 10:05
閱讀 754·2019-08-30 10:49
閱讀 1719·2019-08-29 14:08
閱讀 1325·2019-08-29 12:48
閱讀 3320·2019-08-26 14:04
閱讀 3613·2019-08-26 13:50