观察者模式,发布/订阅模式


发布订阅模式的发布和订阅没有关联,观察者模式包含发布订阅的,观察者模式基于发布订阅的

vue中响应式数据变化就是典型的观察者模式
vue中的事件绑定就是发布订阅模式

观察者模式的观察者和被观察者是存在并联的。

发布/订阅模式

订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Topic),当发布者(Publisher)发布该事件(Publish topic)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码。
优点:
松耦合(Loose Coupling):消息的发布者和消息的订阅者在开发的时候完全不需要事先知道对方的存在,可以独立地进行开发。
高伸缩性(High Scalability):发布/订阅模式中的消息队列可以独立的作为一个数据存储中心存在。
在分布式环境中,更是消息队列更是可以扩展至上干个服务器中。
系统组件间通信更加简洁:因为不需要为每一个消息的订阅者准备专门的消息格式,只要知道了消息队列中保存消息的格式,发布者就可以按照这个格式发送消息,订阅者也只需要按照这个格式接收消息。
缺点:
在整个数据模式中,我们不能保证发布者发送的数据一定会送达订阅者。

如果要保证数据一定送达的话,需要开发者自己实现响应机制。


//发布->中间代理<-订阅
function Events(){
    
    
	this.callbacks=[]//存储 订阅
	this.results=[]//存储发布
}
Events.prototype.on=function(callback){
    
    //订阅
	this.callbacks.push(callback)
}
Events.prototype.emit=function(data){
    
    //发布
	this.results.push(data)
	this.callbacks.forEach(c=>c(this.results))//发布完之后执行订阅里的回调函数
}
let e= new Events()
e.on(function(arr){
    
    
		console.log(arr)
})
e.emit(data)

观察者模式

观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新。观察者模式属于行为型模式,行为型模式关注的是对象之间的通讯,观察者模式就是观察者和被观察者之间的通讯。

	//被观察者 我家小宝宝 心情好不好 心情好=》心情不好
		
		class Subject{
    
    //被观察者
			constructor(name){
    
    
				this.name=name;
				this.observers=[]//观察者
				this.state='心情很美丽'
			}
			//被观察者要提供一个接收观察者的方法
			attach(observer){
    
    //绑定接受者
				this.observers.push(observer)
			}
			//这边用到了订阅发布
			setState(newState){
    
    //修改心情
				this.state=newState;
				this.observers.forEach(o=>o.update(newState))
			}
		}
		class Observer{
    
    //观察者
			constructor(name){
    
    
				this.name=name
			}
			update(newState){
    
    //用来通知所有的观察者状态更新了
				console.log(this.name+'说:宝宝'+newState)
			}
		}
		let sub=new Subject('小宝宝')
		let o1=new Observer('爸爸')
		let o2=new Observer('妈妈')
		sub.attach(o1)
		sub.attach(o2)
		sub.setState('心情不好了')

发布与订阅模式和观察者模式有以下不同:

  1. 观察者模式中,观察者和主题都知道对方的存在;而在发布与订阅模式中, 生产者与消费者不知道对方的存在,它们之间通过频道进行通信。
  2. 观察者模式是同步的,当事件触发时,主题会调用观察者的方法,然后等待方法返回;而发布与订阅模式是异步的,生产者向频道发送一个消息之后, 就不需要关心消费者何时去订阅这个消息,可以立即返回。

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_51109349/article/details/125215607