快捷導(dǎo)航

JavaScript設(shè)計(jì)模式適配器模式實(shí)例

更新時(shí)間：2022年06月23日 14:16:57 作者：??前端若水????

這篇文章主要介紹了JavaScript設(shè)計(jì)模式適配器模式實(shí)例，適配器設(shè)計(jì)模式可以讓彼此不兼容的功能在一塊工作，有助于避免大規(guī)模的修改代碼，并且易于擴(kuò)展和兼容

前言：

適配器設(shè)計(jì)模式可以用生活中常用的筆記本電腦來(lái)做例子，筆記本使用電壓在20v左右，但是我們家用電壓在220v左右，所以我們希望用家用電適配對(duì)應(yīng)的筆記本電壓，這個(gè)時(shí)候就需要使用電源適配器

我們可以用我們剛剛說(shuō)的筆記本電腦來(lái)舉例子，這是家用電，家用電電壓為220V，所以我們返回一下電壓數(shù)

//?家用電
????????class?Power{
????????????charge(){
????????????????return?'220V';
????????????}
????????}

筆記本電源適配器，我們創(chuàng)建一個(gè)家用電實(shí)例，在通過(guò)方法對(duì)電壓進(jìn)行轉(zhuǎn)換為筆記本可充電的電壓

class?Adaptor{
????????????constructor(){
????????????????this.power=?new?Power();
????????????}
????????????charge(){
????????????????//?先拿到家用電電壓
????????????????let?voltage=this.power.charge;
????????????????//?返回一個(gè)轉(zhuǎn)換值
????????????????return?`${voltage}=>20V`
????????????}
????????}

電腦，我們創(chuàng)建一個(gè)電腦適配器實(shí)例，然后電腦適配器實(shí)例的電壓轉(zhuǎn)換方法對(duì)電壓進(jìn)行轉(zhuǎn)換充電

class?Computer{
????????constructor(){
????????????this.adaptor=new?Adaptor()
????????}
????????//?電腦充電
????????use(){
????????????console.log(this.adaptor.charge());
????????}
????}

使用：

const cop=new Computer();
//充電
cop.use();

在工作中我們需要使用到多個(gè)功能，比如我們項(xiàng)目中使用到了百度地圖數(shù)據(jù)接口和高德地圖數(shù)據(jù)接口,這個(gè)時(shí)候我們就可以去使用適配器模式

//對(duì)百度地圖的數(shù)據(jù)接口操作
const?BaiduMap={
???????????show(){
??????????????//獲取百度地圖數(shù)據(jù)
???????????}
???????}
       //對(duì)高德地圖的數(shù)據(jù)接口操作
???????const?GaodeiMap={
???????????show(){
???????????//獲取高德地圖數(shù)據(jù)
???????????}
???????}
            //對(duì)騰訊地圖的數(shù)據(jù)接口操作
???????const?TxMap={
???????????init(){
???????????//獲取騰訊地圖數(shù)據(jù)
???????????}
???????}

由于他們都有共同點(diǎn)，所以請(qǐng)求數(shù)據(jù)都為show方法,如果有一天使用到其他的地圖請(qǐng)求數(shù)據(jù)為init的API接口，我們?nèi)バ薷墨@取數(shù)據(jù)的方法的話成本太高，這個(gè)時(shí)候就需要使用到了適配器設(shè)計(jì)模式，通過(guò)switch語(yǔ)句進(jìn)行匹配方法名，進(jìn)行調(diào)用

//接收倆個(gè)參數(shù)，第一個(gè)是地圖模塊名，第二個(gè)是調(diào)用方法
function?Adapter(V,?fnName)?{
????????????switch?(fnName)?{
????????????????case?'show':
????????????????????V.show()
????????????????????break;
????????????????case?'init':
????????????????????V.init()
????????????????????break;
????????????}
????????}

適配器設(shè)計(jì)模式可以讓彼此不兼容的功能在一塊工作，有助于避免大規(guī)模的修改代碼，并且易于擴(kuò)展和兼容,但是如果過(guò)多的使用適配器，就會(huì)使得代碼復(fù)雜程度增加，看起來(lái)十分混亂，維護(hù)起來(lái)有一定的困難

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

您可能感興趣的文章: