观察者模式
- 观察者模式（Observe）是前端开发中常用的一种设计模式，在各大框架中都有使用。
- 当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知它的依赖对象。观察者模式属于行为型模式。
- 它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新
原理（点菜过程） Observer代表我们自己 Subject代表餐厅
- 当我们要点菜时（创建观察者） -- 创建Observer并传入Subject和菜品名称
- 餐厅处理 (被观察者) -- Subject 将Observer存入到菜品列表中，并且提供相关的查询接口（查询当前菜品状态，修改菜品状态，存储菜品，触发上菜品尝）
- 上菜品尝（修改被观察者的菜品状态） -- 当修改了菜品状态时，就会自动触发Observer的品尝函数
// 被观察者（餐厅）提供各种方法
class Subject{
constructor(){
this.status = ''
this.observers = []
}
// 获取当前状态
getStatus () {
return this.status
}
// 设置状态
setStatus (type) {
this.status = type
this.handle()
}
// 存储观察者到数组中
storage (observer) {
this.observers.push(observer)
}
// 循环执行观察者的函数
handle () {
this.observers.forEach(i => {
if (i.name === this.status) {
i.update()
}
})
}
}
// 观察者 等待被触发
class Observer{
constructor(name, subject){
this.name = name;
this.subject = subject
this.subject.storage(this) // 调用被观察者的storage方法存储当前观察者
}
update () {
console.log(`${this.subject.getStatus()} 做好了，请品尝`)
}
}
// 餐厅对象
let subject = new Subject()
// 点菜
new Observer('宫保鸡丁', subject)
new Observer('酸辣白菜', subject)
// 修改状态触发当前观察者的update
subject.setStatus('宫保鸡丁')
观察者模式和发布订阅模式
这两种模式本质上区别并不大，相比较观察者模式发布订阅模式多了一个订阅中心，通过订阅中心做事件处理
优缺点
- 发布订阅模式通过订阅中心做事件处理就会降低代码的耦合度
- 发布方和订阅方，没有任何关系，没有发布就可以订阅，没有订阅也可以发布
- 发布订阅模式可扩展性比较强
- 观察者模式相对比较轻量和简单，占用内存较少
