发布订阅模式-实现公众号订阅/内容发布/取消订阅功能

XiNGRZ 发布于2019-08-26 10:22 / 3198人阅读

摘要：问观察者模式和发布订阅模式的有什么区别答一下，相信都会有满屏的结果告诉你什么是发布订阅模式，但还是希望自己通过一些例子融入去实现概念理解创建一个对象存储所有订阅者与其调用添加订阅者函数时入参有，将其存储到调用发布订阅信息函数时再根据入

问：观察者模式和发布订阅模式的有什么区别？

答：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发布订阅

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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