這篇文章主要介紹了JavaScript設(shè)計(jì)模式發(fā)布訂閱模式，發(fā)布訂閱設(shè)計(jì)模式是和觀察者設(shè)計(jì)模式基本上相同，但是他們兩個(gè)設(shè)計(jì)模式不同的是發(fā)布訂閱者擁有一個(gè)事件處理中心而觀察者并沒(méi)有

前言

發(fā)布訂閱設(shè)計(jì)模式是和觀察者設(shè)計(jì)模式基本上相同，但是他們兩個(gè)設(shè)計(jì)模式不同的是發(fā)布訂閱者擁有一個(gè)事件處理中心而觀察者并沒(méi)有

比如，我們利用訂閱者設(shè)計(jì)模式去監(jiān)聽(tīng)一個(gè)對(duì)象的改變，可以給對(duì)象改變的方法添加多個(gè)行為以及一個(gè)行為添加多個(gè)方法進(jìn)行處理

發(fā)布訂閱設(shè)計(jì)模式

發(fā)布訂閱設(shè)計(jì)模式只需要一個(gè)類(lèi)，類(lèi)中擁有一個(gè)事件中心管理這行為的任務(wù)對(duì)列，我們利用這個(gè)構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例，在進(jìn)行模擬一個(gè)addEventListener()事件，進(jìn)行觸發(fā)事件中心行為上任務(wù)對(duì)列的方法

我們來(lái)舉一個(gè)訂閱者設(shè)計(jì)模式的例子：

小明去買(mǎi)書(shū)

去書(shū)店問(wèn)店員，店員說(shuō)沒(méi)有就回家，過(guò)一會(huì)再去問(wèn)問(wèn)，以此往復(fù)，直到買(mǎi)到

小紅去買(mǎi)書(shū)

去書(shū)店問(wèn)店員，店員說(shuō)沒(méi)有就會(huì)留下一個(gè)聯(lián)系電話(huà)給店員，有了書(shū)店員就會(huì)聯(lián)系小紅，過(guò)去買(mǎi)書(shū)

小紅這種就是發(fā)布訂閱設(shè)計(jì)模式的操作，首先給店員留下電話(huà)號(hào)是往行為的任務(wù)隊(duì)列中添加方法，店員打電話(huà)是觸發(fā)了書(shū)到了的行為

訂閱者類(lèi)有個(gè)一個(gè)屬性:

事件中心，用于存放訂閱者行為的任務(wù)對(duì)列

訂閱者類(lèi)中有三個(gè)方法，分別為：

往任務(wù)隊(duì)列中添加函數(shù)
觸發(fā)任務(wù)隊(duì)列里的函數(shù)
刪除任務(wù)隊(duì)列里的函數(shù)

創(chuàng)建類(lèi)，類(lèi)中有一個(gè)對(duì)象，該對(duì)象就是事件中心，用于存儲(chǔ)行為的任務(wù)隊(duì)列

   class Subscribe {
            constructor() {
                // 事件中心
                this.task = {};
            }
      }

添加觸發(fā)任務(wù)隊(duì)列函數(shù)方法：

        // type 行為
            trigger(type) {
                // 判斷當(dāng)前的行為是否真的訂閱過(guò)
                if (!(type in this.task)) return;
                // 行為訂閱過(guò)直接進(jìn)行執(zhí)行該行為上的方法
                this.task[type].map(callbak => callbak())
            }

添加任務(wù)隊(duì)列中刪除函數(shù)方法：

            // type 行為
            // callback 函數(shù)
            del(type, callback) {
                // 判斷當(dāng)前的行為是否真的訂閱過(guò)
                if (!(type in this.task)) return;
                // 過(guò)濾出當(dāng)前想要?jiǎng)h除的函數(shù)
                 this.task[type].filter(val => val != callback);
            }

添加任務(wù)隊(duì)列中添加函數(shù)方法：

          // type 是行為
            // callback 是行為發(fā)生時(shí)候觸發(fā)的函數(shù)
            add(type, callback) {
                // 判斷type這個(gè)行為是否已經(jīng)被注冊(cè)過(guò)了，沒(méi)有則注冊(cè)
                if (!(type in this.task)) {
                    // 沒(méi)有注冊(cè)過(guò)給一個(gè)空數(shù)組
                    this.task[type] = [];
                };
                //往該行為的任務(wù)隊(duì)列添加方法
                this.task[type].push(callback)
            }

創(chuàng)建一個(gè)訂閱者實(shí)例并添加行為和對(duì)行為的任務(wù)對(duì)列增刪方法

        // 創(chuàng)建訂閱者實(shí)例
        const per = new Subscribe();
        // 給訂閱者實(shí)例添加行為和出現(xiàn)行為時(shí)觸發(fā)的方法
        per.add('click', handA)
        per.add('click', handB)
        per.add('click', handC)
        // 根據(jù)行為進(jìn)行觸發(fā)方法
        per.trigger('click')
        // 根據(jù)行為和方法進(jìn)行刪除
        per.del('click', handC)
        // 方法
        function handA() {
            console.log('clickA');
        }
        // 方法
        function handB() {
            console.log('clickB');
        }
        // 方法
        function handC() {
            console.log('clickC');
        }

訂閱者設(shè)計(jì)模式如果添加了很多事件會(huì)增加內(nèi)存的消耗并且程序難以維護(hù)以及難以判斷事件來(lái)源

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

您可能感興趣的文章: