一、橋接設(shè)計(jì)模式

橋接設(shè)計(jì)模式是一種偏向于組合的設(shè)計(jì)模式，而非繼承的設(shè)計(jì)模式，實(shí)現(xiàn)的細(xì)節(jié)從一個(gè)模塊推送給另一個(gè)具有單獨(dú)模塊的對(duì)象

橋接設(shè)計(jì)模式在開發(fā)中常用于事件監(jiān)控，還有數(shù)組的一些方法都能夠體現(xiàn)出來(lái)橋接設(shè)計(jì)模式的思想，例如數(shù)組方法的forEach方法

橋接設(shè)計(jì)模式在工作中的使用

有一個(gè)很多頁(yè)面的網(wǎng)站，我們預(yù)期是讓用戶可以選擇修改網(wǎng)站的主體，如果給每個(gè)頁(yè)面都創(chuàng)建一個(gè)主題頁(yè)面的副本，這樣做會(huì)很麻煩，這個(gè)時(shí)候我們就可以使用橋接設(shè)計(jì)模式進(jìn)行實(shí)現(xiàn)，進(jìn)行控制網(wǎng)站的主題顏色，通過創(chuàng)建單獨(dú)的主題根據(jù)用戶的選擇進(jìn)行加載，接下來(lái)我們來(lái)實(shí)現(xiàn)一下

先聲明倆個(gè)主題模塊類，一個(gè)是外觀主題，一個(gè)是內(nèi)容主題，里面擁有一個(gè)方法，該方法可以進(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());
????????????}
????????}

在聲明幾個(gè)主題顏色類，類里面有一個(gè)方法可以獲取當(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è)計(jì)模式的優(yōu)勢(shì)在于就算其中某一模塊發(fā)生變化，也不會(huì)影響其他模塊的使用，降低了代碼的耦合度，同時(shí)因橋接設(shè)計(jì)模式要求兩個(gè)模塊之間沒有耦合關(guān)系，否則無(wú)法完成獨(dú)立的變化，所以也是比繼承方案更好的解決方案，提高了代碼的可擴(kuò)展性，但是因此橋接設(shè)計(jì)模式也提高了整體代碼的復(fù)雜程度

二、JavaScript中介者模式

中介者設(shè)計(jì)模式是指通過一個(gè)中介者對(duì)象封裝一系列的對(duì)象交互，中介者對(duì)象可以讓每個(gè)對(duì)象不需要顯式地相互引用，從降低耦合度，當(dāng)其中一個(gè)對(duì)象發(fā)生改變時(shí)，只需要通知中介者對(duì)象即可

生活中的中介者

在生活中我們也經(jīng)常使用到中介者設(shè)計(jì)模式，例如，醫(yī)院的120急救中心調(diào)度站，當(dāng)我們打電話給120急救中心時(shí)，急救中心120調(diào)度員接到電話會(huì)指派最近的急救車輛去我們身邊，急救車輛只需要和急救中心調(diào)度臺(tái)通信就能確定路線和需要救援人員位置，而不需要和所有的急救車輛通信，同時(shí)急救中心調(diào)度臺(tái)作為中介者，知道每個(gè)車輛的位置與行駛路線，所以可以安排所有急救車輛的路線和調(diào)配

中介者設(shè)計(jì)模式案例

我們來(lái)照著急救中心調(diào)度站的例子來(lái)實(shí)現(xiàn)一下

創(chuàng)建一個(gè)急救中心調(diào)度站,里面有倆個(gè)屬性代表救護(hù)車編號(hào)和需要急救的病人，還有倆個(gè)方法給急救車分配任務(wù)，以及詢問當(dāng)前急救車輛是否有急救任務(wù)

        class FirstAid {
            constructor(identifier) {
                // 救護(hù)車編號(hào)
                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)建急救車實(shí)例，并進(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è)計(jì)模式在我們書寫業(yè)務(wù)中也經(jīng)常會(huì)用到，比如電商網(wǎng)站做的購(gòu)物車需求，該需求中有存在商品選擇表單，顏色選擇表單  ，購(gòu)買數(shù)量表單等等，都會(huì)觸發(fā)change事件，這個(gè)時(shí)候我們就可以通過中介者進(jìn)行轉(zhuǎn)發(fā)處理這些事件，實(shí)現(xiàn)每個(gè)事件的解耦，我們只需要維護(hù)中介者對(duì)象即可

redux和vuex都屬于中介者設(shè)計(jì)模式的實(shí)際應(yīng)用，我們把共享的數(shù)據(jù)抽離成一個(gè)store，每個(gè)都通過store這個(gè)中介者來(lái)進(jìn)行操作

中介者設(shè)計(jì)模式通過讓對(duì)象之間的關(guān)聯(lián)性變低降低了代碼耦合度提高了可復(fù)用性，通過將控制邏輯集中，提高代碼可維護(hù)性，但是中介者在其中承擔(dān)了較多的責(zé)任，一旦中介者出現(xiàn)問題，整個(gè)系統(tǒng)就都會(huì)受到影響

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

最新評(píng)論