JavaScript設(shè)計模式中的橋接和中介者模式
一、橋接設(shè)計模式
橋接設(shè)計模式是一種偏向于組合的設(shè)計模式,而非繼承的設(shè)計模式,實現(xiàn)的細(xì)節(jié)從一個模塊推送給另一個具有單獨模塊的對象
橋接設(shè)計模式在開發(fā)中常用于事件監(jiān)控,還有數(shù)組的一些方法都能夠體現(xiàn)出來橋接設(shè)計模式的思想,例如數(shù)組方法的forEach方法
橋接設(shè)計模式在工作中的使用
有一個很多頁面的網(wǎng)站,我們預(yù)期是讓用戶可以選擇修改網(wǎng)站的主體,如果給每個頁面都創(chuàng)建一個主題頁面的副本,這樣做會很麻煩,這個時候我們就可以使用橋接設(shè)計模式進(jìn)行實現(xiàn),進(jìn)行控制網(wǎng)站的主題顏色,通過創(chuàng)建單獨的主題根據(jù)用戶的選擇進(jìn)行加載,接下來我們來實現(xiàn)一下
先聲明倆個主題模塊類,一個是外觀主題,一個是內(nèi)容主題,里面擁有一個方法,該方法可以進(jìn)行設(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"; ????????????} ????????}
我們進(jìn)行創(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)系,否則無法完成獨立的變化,所以也是比繼承方案更好的解決方案,提高了代碼的可擴(kuò)展性,但是因此橋接設(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)度站,里面有倆個屬性代表救護(hù)車編號和需要急救的病人,還有倆個方法給急救車分配任務(wù),以及詢問當(dāng)前急救車輛是否有急救任務(wù)
class FirstAid { constructor(identifier) { // 救護(hù)車編號 this.identifier = identifier; // 需要救得病人 this.patient = null; } // 添加病人 setPatient(patient) { this.patient = patient; } // 是否已有急救任務(wù) receivePatient() { // 通過是否分配病人進(jìn)行判斷 if (this.patient) { console.log(this.identifier + '已接收病人'); } else { console.log(this.identifier + '未接收病人,可接收急救任務(wù)'); } } }
創(chuàng)建急救車實例,并進(jìn)行分派任務(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事件,這個時候我們就可以通過中介者進(jìn)行轉(zhuǎn)發(fā)處理這些事件,實現(xiàn)每個事件的解耦,我們只需要維護(hù)中介者對象即可
redux和vuex都屬于中介者設(shè)計模式的實際應(yīng)用,我們把共享的數(shù)據(jù)抽離成一個store,每個都通過store這個中介者來進(jìn)行操作
中介者設(shè)計模式通過讓對象之間的關(guān)聯(lián)性變低降低了代碼耦合度提高了可復(fù)用性,通過將控制邏輯集中,提高代碼可維護(hù)性,但是中介者在其中承擔(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-03js中方法重載如何實現(xiàn)?以及函數(shù)的參數(shù)問題
js中沒有辦法直接實現(xiàn)方法重載,但每一個函數(shù)都有一個特殊的參數(shù)arguments,利用它可以實現(xiàn)方法的重載,具體示例如下2013-08-08