理解发布订阅模式

发布订阅模式,又称观察者模式,允许多个观察者监听某一主题对象。当主题对象状态变化时,会自动通知所有观察者。在前端开发中,这种模式常用于降低组件间的耦合,例如在事件处理和异步通信中。然而,过度使用可能导致代码可读性和维护性的下降。文章通过实例解析了发布订阅模式的工作原理,优缺点,并提供了实现和优化建议。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

理解发布订阅模式

https://www.cnblogs.com/tugenhua0707/p/4687947.html

什么是发布订阅模式

发布—订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知。

现实生活中的发布-订阅模式;

比如小红最近在淘宝网上看上一双鞋子,但是呢 联系到卖家后,才发现这双鞋卖光了,但是小红对这双鞋又非常喜欢,所以呢联系卖家,问卖家什么时候有货,卖家告诉她,要等一个星期后才有货,卖家告诉小红,要是你喜欢的话,你可以收藏我们的店铺,等有货的时候再通知你,所以小红收藏了此店铺,但与此同时,小明,小花等也喜欢这双鞋,也收藏了该店铺;等来货的时候就依次会通知他们;

在上面的故事中,可以看出是一个典型的发布订阅模式,卖家是属于发布者,小红,小明等属于订阅者,订阅该店铺,卖家作为发布者,当鞋子到了的时候,会依次通知小明,小红等,依次使用旺旺等工具给他们发布消息;

发布订阅模式的优点:

  1. 支持简单的广播通信,当对象状态发生改变时,会自动通知已经订阅过的对象。
    比如上面的列子,小明,小红不需要天天逛淘宝网看鞋子到了没有,在合适的时间点,发布者(卖家)来货了的时候,会通知该订阅者(小红,小明等人)。

  2. 发布者与订阅者耦合性降低,发布者只管发布一条消息出去,它不关心这条消息如何被订阅者使用,同时,订阅者只监听发布者的事件名,只要发布者的事件名不变,它不管发布者如何改变;同理卖家(发布者)它只需要将鞋子来货的这件事告诉订阅者(买家),他不管买家到底买还是不买,还是买其他卖家的。只要鞋子到货了就通知订阅者即可。

对于第一点,我们日常工作中也经常使用到,比如我们的ajax请求,请求有成功(success)和失败(error)的回调函数,我们可以订阅ajax的success和error事件。我们并不关心对象在异步运行的状态,我们只关心success的时候或者error的时候我们要做点我们自己的事情就可以了~

发布订阅模式的缺点:

  1. 创建订阅者需要消耗一定的时间和内存。
  2. 虽然可以弱化对象之间的联系,如果过度使用的话,反而使代码不好理解及代码不好维护等等。
  3. 最后就是发布消息,发布者遍历这个缓存列表,依次触发里面存放的订阅者回调函数。

实现一个发布订阅

function Event() {
	this.list = {};
}
// 注册订阅者
Event.prototype.listen = function(eventType, fn) {
	if (!this.list[eventType]) this.list[eventType] = [];
	this.list[eventType].push(fn);
}

// 发布消息
Event.prototype.trigger = function(eventType, ...rest) {
	let callbacks = this.list[eventType];
	if (!callbacks || callbacks.length === 0) {
		return false;
	}
	callbacks.forEach(fn => fn.apply(this, rest))
}

// 取消订阅
Event.prototype.remove = function(eventType, fn) {
	if (typeof fn !== 'function') {
		throw new Error("The second argment is not a function!")
	}
	let callbacks = this.list[eventType];
	if (!callbacks ) {
		throw new Error(`This '${eventType}' event does not exist!`)
	}
	if (callbacks.length === 0) return;
	for (let i = 0; i < callbacks.length; i++) {
		if (callbacks[i] === fn) {
			callbacks.splice(i, 1); // splice 方法直接操作原数组
			i--;
		}
	}
}

几点优化建议

  1. 可以将上述构造函数直接设计成一个具体的发布订阅对象,将所有可订阅对象统一维护在一个对象中。
  2. 使用 set 结构存储订阅者,不允许同一个订阅者重复订阅。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值