JavaScript設計模式中的橋接和中介者模式

2022-06-23 14:00:20

一、橋接設計模式

橋接設計模式是一種偏向於組合的設計模式，而非繼承的設計模式，實現的細節從一個模組推播給另一個具有單獨模組的物件

橋接設計模式在開發中常用於事件監控，還有陣列的一些方法都能夠體現出來橋接設計模式的思想，例如陣列方法的forEach方法

橋接設計模式在工作中的使用

有一個很多頁面的網站，我們預期是讓使用者可以選擇修改網站的主體，如果給每個頁面都建立一個主題頁面的副本，這樣做會很麻煩，這個時候我們就可以使用橋接設計模式進行實現，進行控制網站的主題顏色，通過建立單獨的主題根據使用者的選擇進行載入，接下來我們來實現一下

先宣告倆個主題模組類，一個是外觀主題，一個是內容主題，裡面擁有一個方法，該方法可以進行設定主題顏色

// 外觀主題
        class Large {
            constructor(theme) {
                // 主題顏色
                this.theme = theme;
            }
            // 設定主題顏色
            setThemeColor() {
            console.log("Large主題顏色設定為" + this.theme.getColor());
            }
        }
        // 內容主題
        class Small {
            constructor(theme) {
                // 主題顏色
                this.theme = theme;
            }
            // 設定主題顏色
            setThemeColor() {
 console.log("Small主題顏色設定為" + this.theme.getColor());
            }
        }

在宣告幾個主題顏色類，類裡面有一個方法可以獲取當前主題顏色

       class RedTheme {
            getColor() {
               return "red";
            }
        }
        class BlueTheme {
            getColor() {
                return "blue";
            }
        }
        class YellowTheme {
            getColor() {
                return "yellow";
            }
        }

我們進行建立主題模組類，在把主題顏色類傳遞過去呼叫主題模組設定主題顏色的方法

      // 建立主題顏色
        const RedTheme = new RedTheme();
        const BlueTheme = new BlueTheme();
        const YellowTheme = new YellowTheme();
        // 主題模組

     const Large = new Large(RedTheme);
        const Small = new Small(BlueTheme);
        // 設定外觀主題和內容主題
        Large.setThemeColor()
        Small.setThemeColor()

橋接設計模式的優勢在於就算其中某一模組發生變化，也不會影響其他模組的使用，降低了程式碼的耦合度，同時因橋接設計模式要求兩個模組之間沒有耦合關係，否則無法完成獨立的變化，所以也是比繼承方案更好的解決方案，提高了程式碼的可延伸性，但是因此橋接設計模式也提高了整體程式碼的複雜程度

二、JavaScript中介者模式

中介者設計模式是指通過一箇中介者物件封裝一系列的物件互動，中介者物件可以讓每個物件不需要顯式地相互參照，從降低耦合度，當其中一個物件發生改變時，只需要通知中介者物件即可

生活中的中介者

在生活中我們也經常使用到中介者設計模式，例如，醫院的120急救中心排程站，當我們打電話給120急救中心時，急救中心120排程員接到電話會指派最近的急救車輛去我們身邊，急救車輛只需要和急救中心排程臺通訊就能確定路線和需要救援人員位置，而不需要和所有的急救車輛通訊，同時急救中心排程臺作為中介者，知道每個車輛的位置與行駛路線，所以可以安排所有急救車輛的路線和調配

中介者設計模式案例

我們來照著急救中心排程站的例子來實現一下

建立一個急救中心排程站,裡面有倆個屬性代表救護車編號和需要急救的病人，還有倆個方法給急救車分配任務，以及詢問當前急救車輛是否有急救任務

        class FirstAid {
            constructor(identifier) {
                // 救護車編號
                this.identifier = identifier;
                // 需要救得病人
                this.patient = null;
            }
            // 新增病人
            setPatient(patient) {
                this.patient = patient;
            }
            // 是否已有急救任務
            receivePatient() {
                // 通過是否分配病人進行判斷
                if (this.patient) {
                    console.log(this.identifier + '已接收病人');
                } else {
                    console.log(this.identifier + '未接收病人，可接收急救任務');
                }
            }
        }

建立急救車範例，並進行分派任務

     // 建立急救車
        let first1 = new FirstAid('急救車1');
        let first2 = new FirstAid('急救車2');
        //分派急救任務
        first1.setPatient('小孩');
        //詢問是否可接收急救任務
        first1.receivePatient();
        first2.receivePatient();

業務中的中介者

中介者設計模式在我們書寫業務中也經常會用到，比如電商網站做的購物車需求，該需求中有存在商品選擇表單，顏色選擇表單，購買數量表單等等，都會觸發change事件，這個時候我們就可以通過中介者進行轉發處理這些事件，實現每個事件的解耦，我們只需要維護中介者物件即可

redux和vuex都屬於中介者設計模式的實際應用，我們把共用的資料抽離成一個store，每個都通過store這個中介者來進行操作

中介者設計模式通過讓物件之間的關聯性變低降低了程式碼耦合度提高了可複用性，通過將控制邏輯集中，提高程式碼可維護性，但是中介者在其中承擔了較多的責任，一旦中介者出現問題，整個系統就都會受到影響

到此這篇關於JavaScript設計模式中的橋接和中介者模式的文章就介紹到這了,更多相關JavaScript設計模式內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！