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

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

答：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 删除对应订阅者

<font color=”orange”>— Code Example —</font>

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-…

本文完 – 感谢阅读.