观察者模式

概念

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新

观察者模式有两个类：发布者和订阅者

和发布订阅模式的区别：观察者是发布者和订阅者直接沟通，没有第三方的参与

发布者

基础有以下三个功能：

• 增加订阅者
• 移除订阅者
• 通知订阅者

class Plublisher {
	constructor() {
		this.observers = []
	}
	
    // 增加订阅者
	add(observer) {
		this.observers.push(observer)
	}

    // 移除订阅者
	remove(observer) {
		this.observers = this.observers.filter(item => item != observer)
	}

    // 通知订阅者
	notify(data) {
		this.observers.forEach((observer) => {
			observer.update(data)
		})
	}
}

订阅者

基础有一个功能：

• 被通知后做的事情

class Observer {
	constructor() {

	}

	update(data) {
		// do something
	}
}

举例

对于一个需求，会有多种状态，比如评审中、开发中、测试中、已上线等，而这些状态每一次改变，都应该通知给这个需求相关的产品、研发、测试。

class Demand extends Plublisher {
	constructor() {
		super()
		this.state = null // 需求状态
	}

    // 获取状态
	getState() {
		return this.state
	}

    // 更新状态，并@所有观察者
	setState() {
		this.state
		this.notify(this.state)
	}
}

class Person extends Plublisher {
	constructor() {
		super()
		this.state = null
	}

    // 重写 update 方法
	update(state) {
        // 在脑子里更新需求状态
		this.state = state
		this.work() // 然后就要开始各自的工作了
	}

    // 工作的方法
	work() {
		console.log('知道当前进度是：' + this.state)
	}
}

class Demand extends Plublisher {
	constructor() {
		super()
		this.state = null // 需求状态
	}

    // 获取状态
	getState() {
		return this.state
	}

    // 更新状态，并@所有观察者
	setState(state) {
		this.state = state
		this.notify(this.state)
	}
}

class Person extends Plublisher {
	constructor(role) {
		super()
		this.role = role
		this.state = null
	}

    // 重写 update 方法
	update(state) {
        // 在脑子里更新需求状态
		this.state = state
		this.work() // 然后就要开始各自的工作了
	}

    // 工作的方法
	work() {
		console.log(`${this.role}知道此需求状态为：${this.state}，接下来要做。。。`)
	}
}

const demand = new Demand('xxx需求')
const PM = new Person('PM')
const PG = new Person('PG')
const PT = new Person('PT')
demand.add(PM)
demand.add(PG)
demand.add(PT)
demand.setState('评审中')