快捷導(dǎo)航

理解JavaScript中的適配器模式Adapter?Pattern

更新時(shí)間：2022年04月26日 11:22:46 作者：掘金安東尼

這篇文章主要介紹了理解JavaScript中的適配器模式,適配器模式即Adapter?Pattern，是作為兩個(gè)不兼容的接口之間的橋梁。這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式，下文更多相關(guān)介紹需要的小伙伴可以參考一下

說(shuō)到：適配器，大家一定不會(huì)陌生，所有的充電頭，就是適配器，用于適配電源插孔和需要充電的設(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()}---通過(guò)適配器接入到---充電插頭`
return info
}
}
let target = new Target()
console.info(target.request())

// 手機(jī)充電接口---通過(guò)適配器接入到---充電插頭

當(dāng)我們有動(dòng)機(jī)地修改一個(gè)正常運(yùn)行的系統(tǒng)的接口，這時(shí)應(yīng)該考慮使用適配器模式。

不過(guò)，它也有一個(gè)要特別注意的缺點(diǎn)，即：過(guò)多地使用適配器，會(huì)讓系統(tǒng)非常零亂，不易整體進(jìn)行把握。比如，明明看到調(diào)用的是 A 接口，其實(shí)內(nèi)部被適配成了 B 接口的實(shí)現(xiàn)，一個(gè)系統(tǒng)如果太多出現(xiàn)這種情況，無(wú)異于一場(chǎng)災(zāi)難。因此如果不是很有必要，可以不使用適配器，而是直接對(duì)系統(tǒng)進(jìn)行重構(gòu)。

不過(guò)，它的好處呢，就是：可以讓任何兩個(gè)沒(méi)有關(guān)聯(lián)的類一起運(yùn)行。提高了類的復(fù)用。

// 使用ES6改寫適配器實(shí)現(xiàn)地圖SDK統(tǒng)一渲染
class googleMap {
show() {
console.log('開(kāi)始渲染谷歌地圖');
}
}
class baiduMap {
display() {
console.log('開(kāi)始渲染百度地圖');
}
}
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());

// 開(kāi)始渲染谷歌地圖
// 開(kāi)始渲染百度地圖

到此這篇關(guān)于理解JavaScript中的適配器模式Adapter Pattern的文章就介紹到這了,更多相關(guān)JS適配器模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: