观察者模式介绍
在跟多关于前端设计模式的文章中作者都会将发布订阅模式和观察者模式放在一起介绍,诚然,这两种设计模式确实也非常相似。我们先来看一下观察者模式的定义:
观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新。观察者模式属于行为型模式,行为型模式关注的是对象之间的通讯,观察者模式就是观察者和被观察者之间的通讯。观察者模式与订阅发布模式的区别
而发布订阅者模式最开始是作为观者模式的一种别称,但是随着发展现在已经独立于观察者模式成为一种新的设计模式了。
两种模式的区别
首先来看下两种模式的实现结构:
从图片可以看出,发布订阅模式是存在一个类似事件管理中心的角色,可以隔绝订阅者和发布者之间的依赖;
观察者模式需要两个类,一个是观察者(Observer),一个是被观察者(Subject)。如果观察者想要观察被观察者就需要将自己加到 Subject 中进行管理,如果被观察者发生变化,再亲自去通知观察者。
前面已经实现了发布订阅模式,接下来就来看看观察者模式的实现
观察者模式介绍实现
class Subject {
constructor() {
this.observers = [];
}
// 添加观察者
add(observer) {
this.observers.push(observer);
}
// 通知观察者
notify(...args) {
this.observers.forEach((observer) => observer.update(...args));
}
}
class Observer {
update(...args) {
// 进行一些操作
console.log("观察者更新:", ...args);
}
}