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

XiNGRZ 發布于2019-08-26 10:22 / 3225人閱讀

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

問：觀察者模式和發布訂閱模式的有什么區別？

答：https://juejin.im/post/5a14e9...

Google一下，相信都會有滿屏的結果告訴你什么是發布訂閱模式，但還是希望自己通過一些例子融入去實現.

概念理解：

① - 創建一個對象subscribers存儲所有訂閱者與其fn. 
② - 調用添加訂閱者函數時入參有(key,fn)，將其存儲到subscribers.

subscribers[key].push(fn);

③ - 調用發布訂閱信息函數時再根據入參key，找到subscribers中對應的訂閱者并調用該數組下的所有fn.
④ - 取消訂閱很簡單，根據key在subscribers找到對應的訂閱者刪除即可.

一、Just Do It

實現功能：

輸入訂閱者名稱點擊添加訂閱者，已訂閱用戶列表添加一名訂閱者，并附帶取消訂閱按鈕

輸入發布內容，點擊發布給所有訂閱者，用戶列表所有訂閱者接收顯示一條新內容

輸入發布內容，點擊發布給指定訂閱者，指定的訂閱者接收顯示一條新內容

點擊取消訂閱，刪除對應訂閱者信息

二、實現發布訂閱Class

① - 添加訂閱調用subscribe，以key為鍵名存儲訂閱者，fn為值存儲回調函數.

② - 發布調用publish根據key找到對應的訂閱者并調用其回調函數.

③ - key等于all則發布給所有訂閱者

④ - 取消訂閱調用cancelSubscribe，根據key刪除對應訂閱者

--- Code Example ---

class SubscribePublish {
        subs = {}; //存儲訂閱者
        // 添加訂閱
        subscribe(key, fn) {
            if (!this.subs[key]) this.subs[key] = [];
            this.subs[key].push(fn)
            console.log(key,"-----添加訂閱-----");
        }
        // 發布訂閱消息
        publish(key,params) {
            // 1.發布給所有訂閱者
            if(key === "all"){
                let allKey = Object.keys(this.subs);
                allKey.forEach(key=>{
                    this.runCallback(this.subs[key],params);
                })
                return;
            }
            // 2.發布給指定訂閱者
            this.runCallback(this.subs[key],params);
            console.log(key,"-----發布訂閱消息-----");

        }
        // 執行訂閱函數
        runCallback(subs,params){
            if (!Array.isArray(subs) || subs.length <= 0) return false;
            let len = subs.length;
            while (len--) {
                subs[len].call(this, params);
            }
        }
        // 取消訂閱
        cancelSubscribe(key){
            if(this.subs[key]){
                delete this.subs[key];
            }
            console.log(this.subs,"-----取消訂閱-----");
            
        }
    }

三、功能實現闡述

// 實例化發布訂閱Class
const subEvent = new SubscribePublish();

3.1 點擊添加訂閱

① - 獲取input輸入的訂閱者名稱，創建一個li+button標簽 Dom元素并添加class以訂閱者名稱作為類名. (button=取消訂閱按鈕 & li=已訂閱用戶列表item)
② - 調用subEvent.subscribe(key,fn)添加訂閱者，入參key=input輸入的訂閱者名稱 & fn=發布時調用的回調函數.
③ - 通過fn回調獲取到公眾號發布的內容，創建一個p標簽dom元素顯示發布內容.

3.2 點擊給（所有|指定）訂閱者發布

① - 發布訂閱只需要獲取公眾號發布的內容，點擊時區分指定|所有調用subEvent.publish(key,content)，publish會根據key值觸發對應訂閱者的回調函數.
② - 入參說明：

key=all 發布訂閱信息給所有訂閱者

key=name 發布給name訂閱者

content 要發布的內容

3.3 點擊取消訂閱

① - 3.1的時候，在添加訂閱者時已經創建了一個button按鈕，那么在創建的時候就已經添加了click事件監聽.
② - 當點擊取消訂閱的時候，調用subEvent.cancelSubscribe(key)刪除對應訂閱者并根據訂閱者名稱查找對應class類名的li標簽將其Dom節點刪除.

?-End-?

完整代碼URL：

https://github.com/SmallFish-...

本文完 - 感謝閱讀.

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

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

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

JavaScript 發布-訂閱模式

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

13651657101 2019-08-26 13:53 評論0 收藏0
從觀察者模式到迭代器模式系統講解 RxJS Observable（一）

摘要：是的縮寫，起源于，是一個基于可觀測數據流結合觀察者模式和迭代器模式的一種異步編程的應用庫。是基于觀察者模式和迭代器模式以函數式編程思維來實現的。學習之前我們需要先了解觀察者模式和迭代器模式，還要對流的概念有所認識。 RxJS 是 Reactive Extensions for JavaScript 的縮寫，起源于 Reactive Extensions，是一個基于可觀測數據流 Stre...

notebin 2019-08-23 18:02 評論0 收藏0
JS設計模式之Obeserver（觀察者）模式、Publish/Subscribe（發布/訂閱）模式

摘要：觀察者模式定義設計模式中對的定義一個對象稱為維持一系列依賴于它觀察者的對象，將有關狀態的任何變更自動通知給它們。如圖模式比較觀察者模式則多了一個類似于話題調度中心的流程，發布者和訂閱者解耦。 Obeserver（觀察者）模式定義《js設計模式》中對Observer的定義：一個對象（稱為subject）維持一系列依賴于它（觀察者）的對象，將有關狀態的任何變更自動通知給它們。《設計模...

荊兆峰 2019-08-26 13:37 評論0 收藏0
淺析Otto框架，并與EventBus對比

摘要：它有發布者，訂閱者這兩個主要對象。的最佳實踐就是通過反射犧牲了微小的性能，同時極大的降低了程序的耦合度。官網和應用場景框架的主要功能是幫助我們來降低多個組件通信之間的耦合度的解耦。前兩天在公眾號里發了一篇有關EventBus的文章《玩轉EventBus,詳解其使用》，有讀者和開發者反饋說沒有OTTO好用。確實是，各有優缺點吧，那今天就有必要再講一下Otto事件框架。 OTTO是Squ...

EsgynChina 2019-08-14 15:32 評論0 收藏0