观察者模式的理解以及在前端的广泛应用

观察者模式的理解

观察者模式（Observer）:定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并自动更新

• 发布 订阅
• 一对多关系（1：n）//n可以是1

左侧是观察者，被定义好后等待被触发，触发就执行update()，右侧的subject是一个被观察者，他可以被多个观察者观察，当它的状态改变时，所有观察它的观察者都会触发update()方法，知道它的状态已经改变

js代码

// 被观察者Subject
class Subject{
    constructor(){
        this.state = 1
        this.observers = [] //能够被这个数组里面的多个观察者被观察
    }
    addObserver(observer){
        this.observers.push(observer)
    }
    setState(state){
        this.state = state
        this.notifyAllObservers()
    }
    notifyAllObservers(){
        this.observers.forEach((observer)=>{
            observer.update()
        })
    }
}



class Observer{
    constructor(name,subject){
        this.name = name
        this.subject = subject
        this.subject.addObserver(this) //将自己添加到Subject中去才能观察他的状态
    }
    update(){
        console.log(`${this.name} update,state； ${this.subject.state}`);
    }
}

const sub  =  new Subject()

const o1 = new Observer('observer1',sub)
const o2 = new Observer('Observer2',sub)
const o3 = new Observer('Observer3',sub)

sub.setState(5)

应用场景

事件绑定

所有的事件监听机制都是观察者模式。挺好理解的。

Promise

先看这篇文章理解一下promise

promise有三个状态，pending,resolved,rejected状态，.then()方法监听resolved状态，.catch()监听rejected状态。也是一种观察模式