👀 前端观察者模式：实现模块间的高效通信

观察者模式

它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。

classDiagram
Observer <-- Subject
class Observer{
+name:String
+update(state:number):void
}
class Subject{
-state: number 
-observers: Observer[]
+getState():number
+setState(newState:number):void
+attach(observer:Observer):void
-notify():void
}

//主题
class Subject{
    private state:number=0;
    private observers:Observer[]=[];
    
    getState():number{
        return this.state;
    }
    
    setState(newState:number){
        this.state=newState;
        this.notify();
    }
    //添加观察者
    attach(observer:Observer){
        this.observers.push(observer)
    }
    //通知观察者
    notify(){
        this.observers.forEach((observer)=>{
            observer.update(this.state)
        })
    }
}
//观察者
class Observer{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    update(state:number){
        console.log(this.name + "update"+ state)
    }
}
const sb=new Subject();
const o1=new Observer("a");
const o2=new Observer("b");
sb.attach(o1);
sb.attach(o2);
sb.setState(66);//广播通知

使用场景

1. vue/react组件生命周期
2. vue watch
3. dom事件
4. 各种异步回调函数 setTimeout / setInterval / Promise.then

观察者模式 vs 发布订阅模式

观察者：Subject和Observer直接绑定，中间无媒介

发布订阅：Publisher和Observer互不认识，需要媒介（手动触发emit操作）

vue2本身就是一个eventBus,vue3不再自带enventBus，推荐使用mitt，event-emitter