實現(xiàn)一個發(fā)布訂閱

Aceyclee 發(fā)布于2019-08-22 16:09 / 3222人閱讀

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

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

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

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

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

target.addEventListener(type, listener, options);
//type 表示事件類型（eg:click）
//listener 回調函數(shù)，當監(jiān)聽的事件類型觸發(fā)時，執(zhí)行l(wèi)istener函數(shù)
//options 冒泡還是捕獲等參數(shù)

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

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

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

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

發(fā)布方法：傳入發(fā)布的事件類型及參數(shù)（傳給回調函數(shù)的），發(fā)布事件。發(fā)布時，會執(zhí)行訂閱時傳入的回調函數(shù)

移除方法：移除訂閱（監(jiān)聽）的回調函數(shù)

代碼如下：

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

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

參考：

[eventBus實現(xiàn)][2]

GPU云服務器云服務器發(fā)布訂閱模式訂閱發(fā)布模式 sqlserver發(fā)布訂閱 DTS 訂閱發(fā)布模式

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

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

發(fā)布訂閱模式-實現(xiàn)公眾號訂閱/內容發(fā)布/取消訂閱功能

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

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

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

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

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

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

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

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

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

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