初识设计模式，设计模式在js（ts）中的应用（三）

观察者模式

定义

观察者模式又叫发布&订阅模式，在前端的应用非常广泛。众多订阅者观察同一个事物，当事物发生变化后，就会通知观察者们，订阅者们就会做出更新。就比如你订阅了一份报纸，当报社发布报纸后，订阅者就会收到报纸。

例子

// 主题类，生成的实例可以被订阅/观察
class Subject {
	public state;
	public observers;
	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 Observer {
	public name;
	public subject;
	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 Observer('qizai', s);
let o2 = new Observer('liuba', s);
let o3 = new Observer('huang', s);
s.setState(1);// o123都会观测到

常见场景

1. Promise

在Promise中，then的触发就是用到了观察者模式的设计思路。Promise函数运行后，触发resolve，就通知then继续下一步。

2. vue中的watch

vue中的watch是十分典型的观察者模式设计。当监视的数据发生变化后，就触发watch的回调。

3. vue和React组件生命周期钩子

在vue和React中，他们的生命周期勾子就充当着观察者的角色，当组件的生命周期走到特定时期后，就对应的钩子就会观测到并且做出响应，

设计原则

1.主题和观察者分离，不是主动触发，而是被动监听，两者解耦

2，符合开放封闭原则