观察者模式介绍
前端开发中，观察者模式无处不在，可以说是使用非常频繁的设计模式之一了。基础的浏览器内部实现的事件监听，dom的监听，Promise，三大框架的生命周期函数，甚至三大框架中 angular 的 NgRx、react的 Redux 以及 vue 的 Vuex 数据管理模块都是观察者模式的演变。观察者模式属于行为型模式，1对多，由主体和观察者组成，主体负责发布事件，同时观察者通过订阅这些事件来观察该主体，n个观察者对象同时监听某一个主题对象，当主题对象状态变化时，会通知所有的观察者对象
js 观察者简单举例
- 事件绑定
// js就是观察者，DOM就是被观察者。 当DOM被点击，DOM就会通知js触发
document.body.addEventListener("click", function() {
alert("点击了")
}, false)- Promise
promise 有三个状态，pending、resolved、rejected 状态。then() 方法监听 resolved 状态，.catch() 监听 rejected 状态。也是一种观察模式。
观察者模式实现
// 主题，接收状态变化，触发每个观察者
class Subject {
constructor() {
this.state = 0;
this.observers = [];
}
attach(observer) {
this.observers.push(observer);
}
getState() {
return this.state
}
setState(state) {
this.state = state;
this.notifyAllObserver();
}
notifyAllObserver() {
this.observers.forEach(observer=>{
observer.update()
})
}
}
// 观察者，等待被触发
class Observer {
constructor(name, subject) {
this.name = name;
this.subject = subject;
this.subject.attach(this);
}
update() {
console.log(this.name, 'state为', this.subject.getState());
}
}
// 测试代码
let s = new Subject();
let o1 = new Observer('o1', s);
let o2 = new Observer('o2', s);
let o3 = new Observer('o3', s);
s.setState(1)
s.setState(2)
发表评论：