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

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

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

答:juejin.cn/post/684490…

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:

github.com/SmallFish-1…

本文完 - 感谢阅读.

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改