+ 例子:监控
=> 我们坐在教室里就是 被观察者
=> 监控后面的老师,就是 观察者
=> 当被观察者触发了一些条件的时候,观察者就会触发技能
+ 观察者模式:监控一个 对象 的状态,一旦状态发生变化,马上触发技能
=> 需要两个构造函数来实现
1.创建被观察者
=> 属性,自己的状态
=> 队列,记录都有谁观察着自己,数组[]
=> 方法,能设置自己的状态,当我需要改变的时候,要触发这个方法改变状态
=> 方法,添加观察者
=> 方法,删除观察者
2.创建观察者
=> 需要一个身份证明
=> 需要一个技能或多个技能
// 观察者构造函数
class Observer{
constructor(name,fn = ()=>{}){
this.name = name
this.fn = fn
}
}
// 创建两个观察者
const bzr = new Observer('班主任',function(state){ console.log('介孩子' + state + '了') })
const xz = new Observer('校长',function(state){ console.log(state + '了') })
// 被观察者的构造函数
class Subject{
constructor(state){
// 记录自己的状态
this.state = state
// 数组用来保存观察着我的人
this.observers = []
}
// 设置自己的状态
setState(val){
this.state = val
// 就需要把 我们所有观察者 的技能都触发
// 遍历 this.observers 依次触发技能
this.observers.forEach(item=>{
// item就是每一个观察者,就是一个一个的对象
// 告诉他我改变成了什么状态
item.fn(this.state)
})
}
// 添加观察者
addObserver(obs){
// 谁是观察者,就是传递谁进来
// 判断一下,如果观察者已经存在,就不再添加了
// some()
const res = this.observers.some(item => item === obs)
if(res) return
this.observers.push(obs)
}
delObserver(obs){
// 把obs观察者删除
// 直接使用filter方法
this.observers = this.observers.filter((item)=>{ return item!==obs })
}
}
// 创建一个被观察者
const xiaoming = new Subject('学习')
// 给 xiaoming 添加一个观察者
xiaoming.addObserver(bzr)
xiaoming.addObserver(xz)