實現一個發布訂閱

Aceyclee 發布于2019-08-22 16:09 / 3139人閱讀

摘要：表示事件類型回調函數，當監聽的事件類型觸發時，執行函數冒泡還是捕獲等參數原生中，我們通過注冊事件訂閱，比如鼠標點擊，傳入回調函數在注冊的事件觸發時要執行的函數，那么鼠標點擊時發布，傳入的回調函數就會執行。

在常用的MVVM框架比如vue，組件間通信可能會有以下三種情況：

1. 父子通信：通過props
2. 非父子組件組件用eventBus通信
3. 如果項目很大，數據需要共享到多個組件（跨組件通信，改同一個數據等），用vuex管理

那么文中的eventBus是怎么實現的呢，就是根據發布訂閱模式。發布訂閱模式應用廣泛，js事件就是一個經典的發布訂閱模式。看個例子addEventListener

EventTarget.addEventListener() 方法將指定的監聽器注冊到 EventTarget 上，當該對象觸發指定的事件時，指定的回調函數就會被執行，事件目標可以是一個文檔上的元素 Document 本身。

target.addEventListener(type, listener, options);
//type 表示事件類型（eg:click）
//listener 回調函數，當監聽的事件類型觸發時，執行listener函數
//options 冒泡還是捕獲等參數

原生js中，我們通過addEventListener注冊事件（訂閱），比如鼠標點擊，傳入回調函數（在注冊的事件觸發時要執行的函數），那么鼠標點擊時（發布），傳入的回調函數就會執行。除了原生js事件。

那一個簡單的發布訂閱模式怎么實現呢？定義一個EventEmitter類，它有以下幾個元素：

單例對象，維護訂閱者：單例模式就是為保證不同的人實例化EventEmitter類之后，拿到的狀態是同一個。

訂閱方法：傳入訂閱的事件類型及回調函數，訂閱事件

發布方法：傳入發布的事件類型及參數（傳給回調函數的），發布事件。發布時，會執行訂閱時傳入的回調函數

移除方法：移除訂閱（監聽）的回調函數

代碼如下：

class EventEmitter {
            constructor(){
                //單例模式
                this._events = this._events || new Map();
            }
            //發布（觸發事件）
            emit(type, ...args){
                //拿到訂閱者的回調函數
                var handler = this._events.get(type);
                if(!handler){
                    return;
                }
                
                //發布時，依次執行訂閱者的回調
                for(var i = 0; i< handler.length; i++){
                    handler[i].apply(this, args);
                }
            }
            //訂閱（監聽事件）
            addListener(type, func){
                var handler = this._events.get(type);
                
                //如果還沒有同類型的訂閱，新創建一個
                if(!handler){
                    this._events.set(type, [func]);
                    return;
                }
                //把回調函數塞入數組
                handler.push(func);
            }
            //移除
            removeListener(type, func){
                var handler = this._events.get(type);
                if(!handler){
                    return;
                }
                
                for(var i = handler.length; i>0; i--){
                    //找到自己要移除的函數，匿名函數不能移除
                    if(handler[i] == func){
                        handler.splice(i, 1);
                    }
                } 
            }
        }

該實現只是探究原理，異常處理之類的都沒做。想了解單例模式可以看：《javaScript設計模式與開發實踐》（我還沒看完emmm）

參考：

[eventBus實現][2]

GPU云服務器云服務器發布訂閱模式訂閱發布模式 sqlserver發布訂閱 DTS 訂閱發布模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94105.html

發布訂閱模式-實現公眾號訂閱/內容發布/取消訂閱功能

摘要：問觀察者模式和發布訂閱模式的有什么區別答一下，相信都會有滿屏的結果告訴你什么是發布訂閱模式，但還是希望自己通過一些例子融入去實現概念理解創建一個對象存儲所有訂閱者與其調用添加訂閱者函數時入參有，將其存儲到調用發布訂閱信息函數時再根據入問：觀察者模式和發布訂閱模式的有什么區別？答：https://juejin.im/post/5a14e9... Google一下，相信都會有滿屏的結果...

XiNGRZ 2019-08-26 10:22 評論0 收藏0
JavaScript 發布-訂閱模式

摘要：發布訂閱模式訂閱者把自己想訂閱的事件注冊到調度中心，當發布者發布該事件到調度中心，也就是該事件觸發時，由調度中心統一調度訂閱者注冊到調度中心的處理代碼。發布-訂閱模式，看似陌生，其實不然。工作中經常會用到，例如 Node.js EventEmitter 中的 on 和 emit 方法；Vue 中的 $on 和 $emit 方法。他們都使用了發布-訂閱模式，讓開發變得更加高效方便。一...

13651657101 2019-08-26 13:53 評論0 收藏0
訂閱發布模式和觀察者模式的區別

摘要：或許以前認為訂閱發布模式是觀察者模式的一種別稱，但是發展至今，概念已經有了不少區別。參考文章訂閱發布模式和觀察者模式真的不一樣首選我們需要先了解兩者的定義和實現的方式，才能更好的區分兩者的不同點。或許以前認為訂閱發布模式是觀察者模式的一種別稱，但是發展至今，概念已經有了不少區別。訂閱發布模式在軟件架構中，發布-訂閱是一種消息范式，消息的發送者（稱為發布者）不會將消息直接發送給特...

ysl_unh 2019-08-26 11:01 評論0 收藏0
JavaScript 設計模式（六）：觀察者模式與發布訂閱模式

摘要：觀察者模式維護單一事件對應多個依賴該事件的對象關系發布訂閱維護多個事件主題及依賴各事件主題的對象之間的關系觀察者模式是目標對象直接觸發通知全部通知，觀察對象被迫接收通知。觀察者模式（Observer）觀察者模式：定義了對象間一種一對多的依賴關系，當目標對象 Subject 的狀態發生改變時，所有依賴它的對象 Observer 都會得到通知。簡單點：女神有男朋友了，朋友圈曬個圖，甜...

bingo 2019-08-23 18:36 評論0 收藏0
JavaScript設計模式之發布-訂閱模式（觀察者模式）-Part1

摘要：設計模式與開發實踐讀書筆記。發布訂閱模式又叫觀察者模式，它定義了對象之間的一種一對多的依賴關系。附設計模式之發布訂閱模式觀察者模式數據結構和算法系列棧隊列優先隊列循環隊列設計模式系列設計模式之策略模式《JavaScript設計模式與開發實踐》讀書筆記。發布-訂閱模式又叫觀察者模式，它定義了對象之間的一種一對多的依賴關系。當一個對象的狀態發生改變時，所有依賴它的對象都將得到通知。例...

muzhuyu 2019-08-20 12:06 評論0 收藏0