JavaScript設(shè)計模式中的橋接和中介者模式
一、橋接設(shè)計模式
橋接設(shè)計模式是一種偏向于組合的設(shè)計模式,而非繼承的設(shè)計模式,實現(xiàn)的細節(jié)從一個模塊推送給另一個具有單獨模塊的對象
橋接設(shè)計模式在開發(fā)中常用于事件監(jiān)控,還有數(shù)組的一些方法都能夠體現(xiàn)出來橋接設(shè)計模式的思想,例如數(shù)組方法的forEach方法
橋接設(shè)計模式在工作中的使用
有一個很多頁面的網(wǎng)站,我們預(yù)期是讓用戶可以選擇修改網(wǎng)站的主體,如果給每個頁面都創(chuàng)建一個主題頁面的副本,這樣做會很麻煩,這個時候我們就可以使用橋接設(shè)計模式進行實現(xiàn),進行控制網(wǎng)站的主題顏色,通過創(chuàng)建單獨的主題根據(jù)用戶的選擇進行加載,接下來我們來實現(xiàn)一下
先聲明倆個主題模塊類,一個是外觀主題,一個是內(nèi)容主題,里面擁有一個方法,該方法可以進行設(shè)置主題顏色
//?外觀主題
????????class?Large?{
????????????constructor(theme)?{
????????????????//?主題顏色
????????????????this.theme?=?theme;
????????????}
????????????//?設(shè)置主題顏色
????????????setThemeColor()?{
console.log("Large主題顏色設(shè)置為"?+?this.theme.getColor());
????????????}
????????}
????????//?內(nèi)容主題
????????class?Small?{
????????????constructor(theme)?{
????????????????//?主題顏色
????????????????this.theme?=?theme;
????????????}
????????????//?設(shè)置主題顏色
????????????setThemeColor()?{
?console.log("Small主題顏色設(shè)置為"?+?this.theme.getColor());
????????????}
????????}
在聲明幾個主題顏色類,類里面有一個方法可以獲取當(dāng)前主題顏色
class?RedTheme?{
????????????getColor()?{
???????????????return?"red";
????????????}
????????}
????????class?BlueTheme?{
????????????getColor()?{
????????????????return?"blue";
????????????}
????????}
????????class?YellowTheme?{
????????????getColor()?{
????????????????return?"yellow";
????????????}
????????}
我們進行創(chuàng)建主題模塊類,在把主題顏色類傳遞過去調(diào)用主題模塊設(shè)置主題顏色的方法
//?創(chuàng)建主題顏色
????????const?RedTheme?=?new?RedTheme();
????????const?BlueTheme?=?new?BlueTheme();
????????const?YellowTheme?=?new?YellowTheme();
????????//?主題模塊
const?Large?=?new?Large(RedTheme);
????????const?Small?=?new?Small(BlueTheme);
????????//?設(shè)置外觀主題和內(nèi)容主題
????????Large.setThemeColor()
????????Small.setThemeColor()
橋接設(shè)計模式的優(yōu)勢在于就算其中某一模塊發(fā)生變化,也不會影響其他模塊的使用,降低了代碼的耦合度,同時因橋接設(shè)計模式要求兩個模塊之間沒有耦合關(guān)系,否則無法完成獨立的變化,所以也是比繼承方案更好的解決方案,提高了代碼的可擴展性,但是因此橋接設(shè)計模式也提高了整體代碼的復(fù)雜程度
二、JavaScript中介者模式
中介者設(shè)計模式是指通過一個中介者對象封裝一系列的對象交互,中介者對象可以讓每個對象不需要顯式地相互引用,從降低耦合度,當(dāng)其中一個對象發(fā)生改變時,只需要通知中介者對象即可

生活中的中介者
在生活中我們也經(jīng)常使用到中介者設(shè)計模式,例如,醫(yī)院的120急救中心調(diào)度站,當(dāng)我們打電話給120急救中心時,急救中心120調(diào)度員接到電話會指派最近的急救車輛去我們身邊,急救車輛只需要和急救中心調(diào)度臺通信就能確定路線和需要救援人員位置,而不需要和所有的急救車輛通信,同時急救中心調(diào)度臺作為中介者,知道每個車輛的位置與行駛路線,所以可以安排所有急救車輛的路線和調(diào)配
中介者設(shè)計模式案例
我們來照著急救中心調(diào)度站的例子來實現(xiàn)一下
創(chuàng)建一個急救中心調(diào)度站,里面有倆個屬性代表救護車編號和需要急救的病人,還有倆個方法給急救車分配任務(wù),以及詢問當(dāng)前急救車輛是否有急救任務(wù)
class FirstAid {
constructor(identifier) {
// 救護車編號
this.identifier = identifier;
// 需要救得病人
this.patient = null;
}
// 添加病人
setPatient(patient) {
this.patient = patient;
}
// 是否已有急救任務(wù)
receivePatient() {
// 通過是否分配病人進行判斷
if (this.patient) {
console.log(this.identifier + '已接收病人');
} else {
console.log(this.identifier + '未接收病人,可接收急救任務(wù)');
}
}
}
創(chuàng)建急救車實例,并進行分派任務(wù)
// 創(chuàng)建急救車
let first1 = new FirstAid('急救車1');
let first2 = new FirstAid('急救車2');
//分派急救任務(wù)
first1.setPatient('小孩');
//詢問是否可接收急救任務(wù)
first1.receivePatient();
first2.receivePatient();
業(yè)務(wù)中的中介者
中介者設(shè)計模式在我們書寫業(yè)務(wù)中也經(jīng)常會用到,比如電商網(wǎng)站做的購物車需求,該需求中有存在商品選擇表單,顏色選擇表單 ,購買數(shù)量表單等等,都會觸發(fā)change事件,這個時候我們就可以通過中介者進行轉(zhuǎn)發(fā)處理這些事件,實現(xiàn)每個事件的解耦,我們只需要維護中介者對象即可
redux和vuex都屬于中介者設(shè)計模式的實際應(yīng)用,我們把共享的數(shù)據(jù)抽離成一個store,每個都通過store這個中介者來進行操作
中介者設(shè)計模式通過讓對象之間的關(guān)聯(lián)性變低降低了代碼耦合度提高了可復(fù)用性,通過將控制邏輯集中,提高代碼可維護性,但是中介者在其中承擔(dān)了較多的責(zé)任,一旦中介者出現(xiàn)問題,整個系統(tǒng)就都會受到影響
到此這篇關(guān)于JavaScript設(shè)計模式中的橋接和中介者模式的文章就介紹到這了,更多相關(guān)JavaScript設(shè)計模式 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實現(xiàn)視頻轉(zhuǎn)GIF的示例代碼
這篇文章主要介紹了JavaScript實現(xiàn)視頻轉(zhuǎn)GIF,本文一共會按照以下三步去實現(xiàn)一個視頻轉(zhuǎn)?GIF?功能,解封裝視頻,從視頻文件中獲取視頻幀,解碼視頻幀,獲取幀圖像信息,拼裝幀圖像信息,生成?GIF,需要的朋友可以參考下2024-03-03
js中方法重載如何實現(xiàn)?以及函數(shù)的參數(shù)問題
js中沒有辦法直接實現(xiàn)方法重載,但每一個函數(shù)都有一個特殊的參數(shù)arguments,利用它可以實現(xiàn)方法的重載,具體示例如下2013-08-08

