观察者模式

2020.01.13 晚 22:43

问题

我们从下面3个问题去对观察者模式进行探讨

• 为什么需要观察者模式？
• 观察者模式有什么用？
• 如何实现观察者模式？

为什么需要观察者模式？

举个”栗子“
网页事件绑定、node自定义事件

观察者模式有什么用？

可对状态变化进行反馈

如何实现观察者模式？

实现思路

通过在主题中保存观察者，一旦主题中状态改变，那么就将所有观察者触发。

具体实现代码

// 主题，保存状态，状态变化之后触发所有观察者对象
class Subject {
    constructor() {
        this.state = 0
        this.observers = []
    }
    getState() {
        return this.state
    }
    setState(state) {
        this.state = state
        this.notifyAllObservers()
    }
    notifyAllObservers() {
        this.observers.forEach(observer => {
            observer.update()
        })
    }
    attach(observer) {
        this.observers.push(observer)
    }
}

// 观察者
class observers {
    constructor(name, subject) {
        this.name = name
        this.subject = subject
        this.subject.attach(this)
    }
    update() {
        console.log(`${this.name} update, state: ${this.subject.getState()}`)
    }
}

// 测试
let s = new Subject()
let o1 = new observers('o1', s)
let o2 = new observers('o2', s)
let o3 = new observers('o3', s)

s.setState(1)
s.setState(2)
s.setState(3)