简单理解JavaScript观察者模式

211 阅读1分钟

什么是观察者模式

观察者模式,目标和观察者是基类,目标提供维护观察者的一系列方法,观察者提供更新接口。具体观察者和具体目标继承各自的基类,然后具体观察者把自己注册到具体目标里,在具体目标发生变化时候,调度观察者的更新方法。

比如有了一个宝宝,爸爸妈妈都需要每天关注小孩,每当小孩饿了,哭了心情改变的时候,就需要通知关注宝宝身上的所有大人,及时地去照顾小孩。 通过代码实现如下:

u=3807901746,4025641071&fm=26&gp=0.jpg

//定义被观察者对象
              function Subject(){
                this.obserersArr = [] //被观察者里面很多观察者,需要知道哪些人关注我
                this.state = '开心'//被观察者心情状态改变了,需要通知观察者
		}
		//被观察者设置状态,当状态有变化,需要通知观察者去哄小孩
		Subject.prototype.setState = function(state){
			this.state = state
			this.obserersArr.forEach(function(observer){
                           observer.update(state)
			})
		}
		//被观察者需要注册观察者,记录哪一个观察者
		Subject.prototype.addObservers= function(obserer){
			this.obserersArr.push(obserer)
		}

//定义观察者对象

//观察者
		function Observer(){

		}
		//小孩自身状态改变了,需要观察者做某些事情,需要去哄小孩
		Observer.prototype.update = function(state){
                  console.log('小孩'+state+'了,需要大人照顾')
		}

微信图片_20210409144322.png

		let boy = new Subject()
                //观察者可以有很多个
		//创建一个观察者爸爸
		let father = new Observer()
		//创建一个观察者妈妈
		let mother = new Observer()
		//需要给观察者指定那些人观察
		boy.addObservers(mother)
		boy.addObservers(father)
		//当小孩心情改变了,需要通知每一个被观察者去哄小孩
		boy.setState('饿了,我要吃饭')

这样理解观察者模式,是不是很简单。