JavaScript設計模式-介面卡模式(11)

語言: CN / TW / HK

持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第20天,點選檢視活動詳情

介面卡設計模式可以用生活中常用的膝上型電腦來做例子,筆記本使用電壓在20v左右,但是我們家用電壓在220v左右,所以我們希望用家用電適配對應的筆記本電壓,這個時候就需要使用電源介面卡

我們可以用我們剛剛說的膝上型電腦來舉例子

這是家用電,家用電電壓為220V,所以我們返回一下電壓數 js // 家用電         class Power{             charge(){                 return '220V';             }         } 筆記本電源介面卡,我們建立一個家用電例項,在通過方法對電壓進行轉換為筆記本可充電的電壓

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

電腦,我們建立一個電腦介面卡例項,然後電腦介面卡例項的電壓轉換方法對電壓進行轉換充電

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

使用

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

在工作中我們需要使用到多個功能,比如我們專案中使用到了百度地圖資料介面和高德地圖資料介面,這個時候我們就可以去使用介面卡模式

js //對百度地圖的資料介面操作 const BaiduMap={            show(){               //獲取百度地圖資料            }        } //對高德地圖的資料介面操作        const GaodeiMap={            show(){            //獲取高德地圖資料            }        } //對騰訊地圖的資料介面操作        const TxMap={            init(){            //獲取騰訊地圖資料            }        }

由於他們都有共同點,所以請求資料都為show方法,如果有一天使用到其他的地圖請求資料為init的API介面,我們去修改獲取資料的方法的話成本太高,這個時候就需要使用到了介面卡設計模式,通過switch語句進行匹配方法名,進行呼叫

js //接收倆個引數,第一個是地圖模組名,第二個是呼叫方法 function Adapter(V, fnName) {             switch (fnName) {                 case 'show':                     V.show()                     break;                 case 'init':                     V.init()                     break;             }         }

介面卡設計模式可以讓彼此不相容的功能在一塊工作,有助於避免大規模的修改程式碼,並且易於擴充套件和相容,但是如果過多的使用介面卡,就會使得程式碼複雜程度增加,看起來十分混亂,維護起來有一定的困難

堅持努力,無懼未來!