简单实现 手写 观察者模式
观察者(Observer)模式的定义:指多个对象间存在一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式,它是对象行为型模式。
观察者模式是一种对象行为型模式,其主要优点如下。
- 降低了目标与观察者之间的耦合关系,两者之间是抽象耦合关系。符合依赖倒置原则。
- 目标与观察者之间建立了一套触发机制。
它的主要缺点如下。
- 目标与观察者之间的依赖关系并没有完全解除,而且有可能出现循环引用。
- 当观察者对象很多时,通知的发布会花费很多时间,影响程序的效率。
实现思路:
观察者: 1. 定义改变事件
被观察者: 1.存储观察者 2.修改观察者状态事件并触发观察者的改变事件
class Observer{ //观察者
constructor(name){
this.name = name
}
//每次改变的时候 打印 name newState
update(newState){
console.log(`${this.name}say:${newState}`)
}
}
class Subject{ //被观察者
constructor(name){
this.name = name
this.observers = []
this.state = 'XXXX'
}
// 被观察者要提供一个接受观察者的方法 收集观察者
attach(observer){
this.observers.push(observer)
}
// 改变被观察着的状态
setState(newState){
this.state = newState
this.observers.forEach(o=>{
o.update(newState) //通知所有的观察者
})
}
}
let sub = new Subject('灯') // 被观察者 灯
let mm = new Observer('小明') //观察者 小明
let jj = new Observer('小健') //观察者 小健
// 订阅 观察者
sub.attach(mm)
sub.attach(jj)
//发布通知
sub.setState('灯亮了来电了')
观察者模式 2.0
class Observer{ //观察者
constructor(name){
this.name = name
}
}
// 观察者工具类
class ConcreteObserver extends Observer {
//每次改变的时候 打印 name newState
update(newState){
console.log(`${this.name}say:${newState}`)
}
}
class Subject{ //被观察者
constructor(name){
this.name = name
this.observers = []
this.state = 'XXXX'
}
// 被观察者要提供一个接受观察者的方法 收集观察者
attach(observer){
this.observers.push(observer)
}
//提供删除 观察者的方法
remove(observer){
//删除观察者的逻辑
}
}
//通知观察者工具函数
class ConcreteSubject extends Subject {
notifyObserver(newState){
this.state = newState
this.observers.forEach(o=>{
o.update(newState) //通知所有的观察者
})
}
}
let sub = new ConcreteSubject('灯') // 被观察者 灯
let sub1 = new ConcreteSubject('张三') // 被观察者 张三
let mm = new ConcreteObserver('小明') //观察者 小明
let jj = new ConcreteObserver('小健') //观察者 小健
// 订阅 观察者
sub.attach(mm)
sub.attach(jj)
sub1.attach(mm)
sub1.attach(jj)
//发布通知
sub.notifyObserver('灯亮了来电了')
sub1.notifyObserver('发工资了')