理解JavaScript中的適配器模式Adapter?Pattern
說到：適配器，大家一定不會陌生，所有的充電頭，就是適配器，用于適配電源插孔和需要充電的設(shè)備；
同理，適配器模式（Adapter Pattern）是作為兩個(gè)不兼容的接口之間的橋梁。這種類型的設(shè)計(jì)模式屬于【結(jié)構(gòu)型模式】，它結(jié)合了兩個(gè)獨(dú)立接口的功能。
代碼示例也非常直觀：
class Adapter {
specificRequest() {
return '手機(jī)充電接口'
}
}
class Target {
constructor() {
this.adapter = new Adapter()
}
request() {
let info = `${this.adapter.specificRequest()}---通過適配器接入到---充電插頭`
return info
}
}
let target = new Target()
console.info(target.request())
// 手機(jī)充電接口---通過適配器接入到---充電插頭當(dāng)我們有動機(jī)地修改一個(gè)正常運(yùn)行的系統(tǒng)的接口，這時(shí)應(yīng)該考慮使用適配器模式。
不過，它也有一個(gè)要特別注意的缺點(diǎn)，即：過多地使用適配器，會讓系統(tǒng)非常零亂，不易整體進(jìn)行把握。比如，明明看到調(diào)用的是 A 接口，其實(shí)內(nèi)部被適配成了 B 接口的實(shí)現(xiàn)，一個(gè)系統(tǒng)如果太多出現(xiàn)這種情況，無異于一場災(zāi)難。因此如果不是很有必要，可以不使用適配器，而是直接對系統(tǒng)進(jìn)行重構(gòu)。
不過，它的好處呢，就是：可以讓任何兩個(gè)沒有關(guān)聯(lián)的類一起運(yùn)行。 提高了類的復(fù)用。
// 使用ES6改寫適配器實(shí)現(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());
// 開始渲染谷歌地圖
// 開始渲染百度地圖到此這篇關(guān)于理解JavaScript中的適配器模式Adapter Pattern的文章就介紹到這了,更多相關(guān)JS適配器模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序?qū)崿F(xiàn)slideUp、slideDown滑動效果及點(diǎn)擊空白隱藏功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)slideUp、slideDown滑動效果及點(diǎn)擊空白隱藏功能,涉及微信小程序事件響應(yīng)、頁面元素屬性動態(tài)操作實(shí)現(xiàn)滑動與蒙層功能相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12
本文給大家分享的是使用javascript制作的2048小游戲的代碼，僅僅是想鍛煉下自己的編程代碼風(fēng)格，盡量做的規(guī)范些，小伙伴們多多給些建議。2015-03-03
其實(shí)你可以少寫點(diǎn)if else與switch（推薦）
switch case與if else的區(qū)別：switch case會生成一個(gè)跳轉(zhuǎn)表來指示實(shí)際的case分支的地址，而if...else卻需要遍歷條件分支直到命中條件，下面這篇文章主要給大家介紹了關(guān)于if else與switch在使用中的一些技巧，需要的朋友可以參考下2019-01-01
JavaScript中檢測對象類型的運(yùn)算符有：typeof、instanceof，還有對象的constructor屬性： 1) typeof 運(yùn)算符 typeof 是一元運(yùn)算符，返回結(jié)果是一個(gè)說明運(yùn)算數(shù)類型的字符串。下面由小編給大家分享JavaScript中的4種類型識別方法，需要的朋友可以參考下本文2015-09-09
這篇文章主要介紹了JS內(nèi)部事件機(jī)制之單線程原理，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
通過復(fù)制Table生成word和excel的javascript代碼
通過復(fù)制Table生成word和excel，個(gè)人感覺這個(gè)功能還是比較實(shí)用的，下面有個(gè)不錯(cuò)的示例，希望對大家有所幫助2014-01-01
解析JavaScript實(shí)現(xiàn)DDoS攻擊原理與保護(hù)措施
本文主要對JavaScript實(shí)現(xiàn)DDoS攻擊原理與保護(hù)措施進(jìn)行介紹，具有一定的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
JS實(shí)現(xiàn)獲取當(dāng)前所在周的周六、周日示例分析
這篇文章主要介紹了JS實(shí)現(xiàn)獲取當(dāng)前所在周的周六、周日,結(jié)合具體實(shí)例形式分析了javascript針對日期時(shí)間的獲取與計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
JS中關(guān)于Class類的靜態(tài)屬性和靜態(tài)方法
這篇文章主要介紹了JS中關(guān)于Class類的靜態(tài)屬性和靜態(tài)方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要給大家介紹了利用純JS實(shí)現(xiàn)像素逐漸顯示的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08