javascript习题练习
消息订阅与发布简单实现
概述
发布订阅其实是一种对象间一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到状态改变的通知。
(1)订阅者把自己想订阅的事件 注册到调度中心
(2)发布者发布该事件到调度中心,也就是该事件触发时,由调度中心统一调度订阅者注册到调度中心的处理代码。
简单来说就是发布者发送数据,订阅者接收数据并展示
最核心的两个内容
- 中央事件处理器(调度中心)
- 只有先订阅才能进行发布
具体代码
// 消息订阅与发布
// 创建一个消息订阅与发布的类
class Subpub{
#eventStack // 私有变量,代表调度中心
// 构造函数
constructor(){
this.#eventStack = {
}; // 初始化私有变量
/**
#eventStack是一个对象,存储id和id对应的值
@param id 消息对应的编号(标题)
@param id值 消息的内容
*/
}
// 消息订阅函数
/**
* @param id 消息编号
* @param callback 回调函数,用来接收消息
*/
subscribe(id,callback){
// #eventStack已经初始化为对象
// 判断有没有这个属性
if(!this.#eventStack[id]){
// 如果没有这个属性则将初始化一个数组
this.#eventStack[id] = []
}
// 将取值(也就是回调函数)加入数组
this.#eventStack[id].push(callback)
}
/**
*
* @param {*} id 消息编号
* @param {...any} params 参数
*/
// 消息发布函数
publish(id,...params){
// 如果没有先进行订阅,则发出警告
if(!this.#eventStack[id]){
console.warn('the id is not in this subpub stack, please subscribe first!');
return
}
// 依次调用回调(当事件触发时,有调度中心同意调度)
this.#eventStack[id].forEach((callback) => {
callback.apply(this, params)
})
}
/**
* 删除消息函数
* @param {*} id 消息编号
* @param {*} callback 消息内容
* @returns
*/
remove(id,callback){
// 判断是否有订阅
if(!this.#eventStack[id]) return
// 判断是否有callback函数
if(!callback){
// 如果没有callback,就删掉整个事件
this.#eventStack[id] = undefined
return
}
// 如果有callback,就仅仅删掉callback这个消息
this.#eventStack[id] = this.#eventStack[id].filter((item) => item!==callback)
}
}
// 创建一个消息订阅发布对象
const sp = new Subpub();
// 调用消息订阅,指定id,传入回调
sp.subscribe('hhh', () => {
console.log("哈哈哈"); })
sp.subscribe('www', (param) => {
console.log('哇哇哇' + param); })
// 调用消息发布,指定id和要传入的参数
sp.publish('hhh') // 不传数据时
sp.publish('www', 'hello') // 传数据时
哈哈哈
哇哇哇hello
可以看到,id为hhh的发布与订阅是一起的,id为www的发布与订阅时绑定在一起的,调用各自的回调函数。