JavaScript設(shè)計(jì)模式之適配器模式介紹
適配器模式說(shuō)明
說(shuō)明: 適配器模式,一般是為要使用的接口,不符本應(yīng)用或本系統(tǒng)使用,而需引入的中間適配層類或?qū)ο蟮那闆r;
場(chǎng)景: 就好比我們買了臺(tái)手機(jī),買回來(lái)后發(fā)現(xiàn),充電線插頭是三插頭,但家里,只有兩插頭的口的插座,怎么辦?為了方便,也有為能在任何地方都能充上電,就得去買個(gè)通用充電適配器; 這樣手機(jī)才能在自己家里充上電;不然只能放著,或跑到有這個(gè)插頭的地方充電;
實(shí)際開(kāi)發(fā)環(huán)境下,由于舊的系統(tǒng),或第三方應(yīng)用提供的接口,與我們定義的接口不匹配,在以面向接口編程的環(huán)境下,就無(wú)法使用這樣舊的,或第三方的接口,這時(shí)我們就使用適配類繼承待適匹配的類,并讓適配類實(shí)現(xiàn)接口的方式來(lái)引入舊的系統(tǒng)或第三方應(yīng)用的接口;
這樣使用接口編程時(shí),就可以使用這個(gè)適匹配類,來(lái)間接調(diào)用舊的系統(tǒng)或第三方應(yīng)用的接口。
在 Javascript 要實(shí)現(xiàn)類似動(dòng)態(tài)面向?qū)ο笳Z(yǔ)言的適配器模式的代碼,可以使用到 prototype 的繼承實(shí)例來(lái)實(shí)現(xiàn);因?yàn)槭腔诮涌诩s束的,但是Javascript沒(méi)有接口這號(hào)東西,我們?nèi)サ艚涌谶@一層,直接實(shí)現(xiàn)接口實(shí)現(xiàn)類 Target ,模擬類似的源碼出來(lái);
源碼實(shí)例
1. 待適配的類及接口方法:
function Adaptee() {
this.name = 'Adaptee';
}
Adaptee.prototype.getName = function() {
return this.name;
}
2. 普通實(shí)現(xiàn)類 [由于 Javascript 中沒(méi)有接口,所以就直接提供實(shí)現(xiàn)類]
function Target() {
this.name = 'Target';
}
Target.prototype.queryName= function() {
return this.name;
}
3. 適配類:
function Adapte() {
this.name = '';
}
Adapte.prototype = new Adaptee();
Adapte.prototype.queryName = function() {
this.getName();
}
4.使用方法:
var local = new Target();
local.queryName(); //調(diào)用普通實(shí)現(xiàn)類
var adapte = new Adapte();
adapte.queryName(); //調(diào)用舊的系統(tǒng)或第三方應(yīng)用接口;
其他說(shuō)明
上面第四步,var local 以及 var adapte 類似像 Java,C# 這樣的面向?qū)ο笳Z(yǔ)言中接口引用指定,如:
interface Target {
public String queryName();
}
//接口引用指向
Target local = new RealTarget(); //即上面 Javascript 的 Target 實(shí)現(xiàn)類
local.queryName();
//適配器
Target adapte = new Adapte();
adapte.queryName();
可見(jiàn)適配器類是連接接口與目標(biāo)類接口的中間層;就是用來(lái)解決,需要的目標(biāo)已經(jīng)存在了,但我們無(wú)法直接使用,不能跟我們的代碼定義協(xié)同使用,就得使用適器模式,適配器模式也叫轉(zhuǎn)換模式,包裝模式;
- JavaScript適配器模式詳解
- javascript設(shè)計(jì)模式之Adapter模式【適配器模式】實(shí)現(xiàn)方法示例
- 深入理解JavaScript系列(39):設(shè)計(jì)模式之適配器模式詳解
- 詳解JavaScript實(shí)現(xiàn)設(shè)計(jì)模式中的適配器模式的方法
- javascript設(shè)計(jì)模式 – 適配器模式原理與應(yīng)用實(shí)例分析
- JavaScript設(shè)計(jì)模式學(xué)習(xí)之適配器模式
- JavaScript 設(shè)計(jì)模式之組合模式解析
- JavaScript組合模式學(xué)習(xí)要點(diǎn)
- 設(shè)計(jì)模式中的組合模式在JavaScript程序構(gòu)建中的使用
- javascript設(shè)計(jì)模式 – 組合模式原理與應(yīng)用實(shí)例分析
- JavaScript設(shè)計(jì)模式開(kāi)發(fā)中組合模式的使用教程
- javascript適配器模式和組合模式原理與實(shí)現(xiàn)方法詳解
相關(guān)文章
微信小程序連接服務(wù)器展示MQTT數(shù)據(jù)信息的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序連接服務(wù)器展示MQTT數(shù)據(jù)信息的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07js左右彈性滾動(dòng)對(duì)聯(lián)廣告代碼分享
這個(gè)對(duì)聯(lián)廣告與其它的有所區(qū)別,這個(gè)是頁(yè)面加載時(shí)先沒(méi)看到廣告,然后從左邊快速飛進(jìn)來(lái)的兩個(gè)對(duì)聯(lián)廣告哦,下面我們一起來(lái)看看對(duì)聯(lián)廣告效果代碼2014-02-02Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
這篇文章主要介紹了Bootstrap導(dǎo)航欄各元素操作方法,針對(duì)表單、按鈕、文本進(jìn)行操作,感興趣的小伙伴們可以參考一下2015-12-12詳解TypeScript中的箭頭函數(shù)如何實(shí)現(xiàn)重載
這篇文章主要為大家詳細(xì)介紹了TypeScript中的箭頭函數(shù)是如何實(shí)現(xiàn)重載的,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,需要的可以參考一下2023-05-05微信小程序使用picker組件出現(xiàn)的問(wèn)題探究
這篇文章主要介紹了微信小程序自定義可搜索的picker組件,主要包括自定義可搜索的picker組件的代碼以及調(diào)用實(shí)例,這里的搜索框使用的是vant微信小程序組件庫(kù),picker使用的微信小程序的原生組件,需要的朋友可以參考下2023-01-01javascript另類方法實(shí)現(xiàn)htmlencode()與htmldecode()函數(shù)實(shí)例分析
這篇文章主要介紹了javascript另類方法實(shí)現(xiàn)htmlencode()與htmldecode()函數(shù),結(jié)合實(shí)例形式分析了javascript字符編碼與解碼操作的相關(guān)技巧,需要的朋友可以參考下2016-11-11微信小程序canvas.drawImage完全顯示圖片問(wèn)題的解決
這篇文章主要介紹了微信小程序canvas.drawImage完全顯示圖片問(wèn)題的解決,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11yii form 表單提交之前JS在提交按鈕的驗(yàn)證方法
很多時(shí)候,需要對(duì)Yii表單model中的對(duì)象設(shè)置的rules進(jìn)行判斷,但是有的時(shí)候可能需要在提交之前就在客戶端進(jìn)行驗(yàn)證。怎么處理呢?接下來(lái)通過(guò)本文給大家分享yii form 表單提交之前JS在提交按鈕的驗(yàn)證方法,需要的的朋友參考下2017-03-03