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

XiNGRZ 發(fā)布于2019-08-26 10:22 / 3234人閱讀

摘要：?jiǎn)栍^察者模式和發(fā)布訂閱模式的有什么區(qū)別答一下，相信都會(huì)有滿屏的結(jié)果告訴你什么是發(fā)布訂閱模式，但還是希望自己通過(guò)一些例子融入去實(shí)現(xiàn)概念理解創(chuàng)建一個(gè)對(duì)象存儲(chǔ)所有訂閱者與其調(diào)用添加訂閱者函數(shù)時(shí)入?yún)⒂?，將其存?chǔ)到調(diào)用發(fā)布訂閱信息函數(shù)時(shí)再根據(jù)入

問(wèn)：觀察者模式和發(fā)布訂閱模式的有什么區(qū)別？

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

Google一下，相信都會(huì)有滿屏的結(jié)果告訴你什么是發(fā)布訂閱模式，但還是希望自己通過(guò)一些例子融入去實(shí)現(xiàn).

概念理解：

① - 創(chuàng)建一個(gè)對(duì)象subscribers存儲(chǔ)所有訂閱者與其fn. 
② - 調(diào)用添加訂閱者函數(shù)時(shí)入?yún)⒂?key,fn)，將其存儲(chǔ)到subscribers.

subscribers[key].push(fn);

③ - 調(diào)用發(fā)布訂閱信息函數(shù)時(shí)再根據(jù)入?yún)ey，找到subscribers中對(duì)應(yīng)的訂閱者并調(diào)用該數(shù)組下的所有fn.
④ - 取消訂閱很簡(jiǎn)單，根據(jù)key在subscribers找到對(duì)應(yīng)的訂閱者刪除即可.

一、Just Do It

實(shí)現(xiàn)功能：

輸入訂閱者名稱點(diǎn)擊添加訂閱者，已訂閱用戶列表添加一名訂閱者，并附帶取消訂閱按鈕
輸入發(fā)布內(nèi)容，點(diǎn)擊發(fā)布給所有訂閱者，用戶列表所有訂閱者接收顯示一條新內(nèi)容
輸入發(fā)布內(nèi)容，點(diǎn)擊發(fā)布給指定訂閱者，指定的訂閱者接收顯示一條新內(nèi)容
點(diǎn)擊取消訂閱，刪除對(duì)應(yīng)訂閱者信息

二、實(shí)現(xiàn)發(fā)布訂閱Class

① - 添加訂閱調(diào)用subscribe，以key為鍵名存儲(chǔ)訂閱者，fn為值存儲(chǔ)回調(diào)函數(shù).

② - 發(fā)布調(diào)用publish根據(jù)key找到對(duì)應(yīng)的訂閱者并調(diào)用其回調(diào)函數(shù).

③ - key等于all則發(fā)布給所有訂閱者

④ - 取消訂閱調(diào)用cancelSubscribe，根據(jù)key刪除對(duì)應(yīng)訂閱者

--- Code Example ---

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

        }
        // 執(zhí)行訂閱函數(shù)
        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,"-----取消訂閱-----");
            
        }
    }

三、功能實(shí)現(xiàn)闡述

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

3.1 點(diǎn)擊添加訂閱

① - 獲取input輸入的訂閱者名稱，創(chuàng)建一個(gè)li+button標(biāo)簽 Dom元素并添加class以訂閱者名稱作為類名. (button=取消訂閱按鈕 & li=已訂閱用戶列表item)
② - 調(diào)用subEvent.subscribe(key,fn)添加訂閱者，入?yún)ey=input輸入的訂閱者名稱 & fn=發(fā)布時(shí)調(diào)用的回調(diào)函數(shù).
③ - 通過(guò)fn回調(diào)獲取到公眾號(hào)發(fā)布的內(nèi)容，創(chuàng)建一個(gè)p標(biāo)簽dom元素顯示發(fā)布內(nèi)容.

3.2 點(diǎn)擊給（所有|指定）訂閱者發(fā)布

① - 發(fā)布訂閱只需要獲取公眾號(hào)發(fā)布的內(nèi)容，點(diǎn)擊時(shí)區(qū)分指定|所有調(diào)用subEvent.publish(key,content)，publish會(huì)根據(jù)key值觸發(fā)對(duì)應(yīng)訂閱者的回調(diào)函數(shù).
② - 入?yún)⒄f(shuō)明：

key=all 發(fā)布訂閱信息給所有訂閱者
key=name 發(fā)布給name訂閱者
content 要發(fā)布的內(nèi)容

3.3 點(diǎn)擊取消訂閱

① - 3.1的時(shí)候，在添加訂閱者時(shí)已經(jīng)創(chuàng)建了一個(gè)button按鈕，那么在創(chuàng)建的時(shí)候就已經(jīng)添加了click事件監(jiān)聽(tīng).
② - 當(dāng)點(diǎn)擊取消訂閱的時(shí)候，調(diào)用subEvent.cancelSubscribe(key)刪除對(duì)應(yīng)訂閱者并根據(jù)訂閱者名稱查找對(duì)應(yīng)class類名的li標(biāo)簽將其Dom節(jié)點(diǎn)刪除.

?-End-?

完整代碼URL：

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

本文完 - 感謝閱讀.

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106059.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

XiNGRZ

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow-serving

閱讀 3036·2023-04-25 20:22
BFC(塊級(jí)格式化上下文)的特點(diǎn)和應(yīng)用場(chǎng)景

閱讀 3350·2019-08-30 11:14
頁(yè)面布局解決方案

閱讀 2602·2019-08-29 13:03
前端面試--性能優(yōu)化

閱讀 3190·2019-08-26 13:47
發(fā)布訂閱模式-實(shí)現(xiàn)公眾號(hào)訂閱/內(nèi)容發(fā)布/取消訂閱功能

閱讀 3235·2019-08-26 10:22
JS動(dòng)態(tài)解析瀏覽器和網(wǎng)頁(yè)的各種寬高屬性

閱讀 1279·2019-08-23 18:26
看完這篇，你也可以實(shí)現(xiàn)一個(gè)360度全景插件

閱讀 628·2019-08-23 17:16
區(qū)塊鏈項(xiàng)目如何俘獲用戶芳心，這些用戶心聲你值得聽(tīng)一聽(tīng)

閱讀 1923·2019-08-23 17:01

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

3.1 點(diǎn)擊添加訂閱

3.2 點(diǎn)擊給（所有|指定）訂閱者發(fā)布

3.3 點(diǎn)擊取消訂閱

相關(guān)文章

**JavaScript 發(fā)布-訂閱模式**

從觀察者模式到迭代器模式系統(tǒng)講解 RxJS Observable（一）

**JS設(shè)計(jì)模式之Obeserver（觀察者）模式、Publish/Subscribe（發(fā)布/訂閱）模式**

淺析Otto框架，并與EventBus對(duì)比

發(fā)表評(píng)論

0條評(píng)論

XiNGRZ

男|高級(jí)講師

TA的文章

tensorflow-serving

BFC(塊級(jí)格式化上下文)的特點(diǎn)和應(yīng)用場(chǎng)景

頁(yè)面布局解決方案

前端面試--性能優(yōu)化