32
TypeScript 设计模式之观察者模式
source link: https://semlinker.com/ts-observer-pattern/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
观察者模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。
我们可以使用日常生活中，期刊订阅的例子来形象地解释一下上面的概念。期刊订阅包含两个主要的角色：期刊出版方和订阅者，他们之间的关系如下：
- 期刊出版方 —— 负责期刊的出版和发行工作。
- 订阅者 —— 只需执行订阅操作，新版的期刊发布后，就会主动收到通知，如果取消订阅，以后就不会再收到通知。
在观察者模式中也有两个主要角色：Subject（主题）和 Observer（观察者）。它们分别对应例子中的期刊出版方和订阅者。接下来我们来看张图，从而加深对上面概念的理解。
二、优缺点
优点
- 支持简单的广播通信，自动通知所有已经订阅过的对象。
- 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
缺点
- 如果一个被观察者对象有很多的直接和间接的观察者的话，将所有的观察者都通知到会花费很多时间。
- 如果在观察者和观察目标之间有循环依赖的话，观察目标会触发它们之间进行循环调用，可能导致系统崩溃。
三、应用场景
- 一个对象的行为依赖于另一个对象的状态。或者换一种说法，当被观察对象（目标对象）的状态发生改变时 ，会直接影响到观察对象的行为。
四、模式结构
观察者模式包含以下角色：
- Subject：主题类
- Observer：观察者
五、实战
具体实现
创建 Subject 类
class Subject {
private observers: Observer[] = [];
public addObserver(observer: Observer): void {
console.log(observer, "is pushed!");
this.observers.push(observer);
}
public deleteObserver(observer: Observer): void {
console.log("remove", observer);
const n: number = this.observers.indexOf(observer);
n != -1 && this.observers.splice(n, 1);
}
public notifyObservers(): void {
console.log("notify all the observers", this.observers);
this.observers.forEach(observer => observer.notify());
}
}
定义 Observer 接口
interface Observer {
notify: Function;
}
创建 ConcreteObserver 观察者类
class ConcreteObserver implements Observer{
constructor(private name: string) {}
notify() {
console.log(`${this.name} has been notified.`);
}
}
使用示例
function show(): void {
const subject: Subject = new Subject();
subject.addObserver(new ConcreteObserver("Semlinker"));
subject.addObserver(new ConcreteObserver("Kakuqo"));
subject.notifyObservers();
subject.deleteObserver(new ConcreteObserver("Lolo"));
subject.notifyObservers();
}
六、总结
观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。该模式主要解决一个对象状态改变给其他对象通知的问题，而且要考虑到易用和低耦合，保证高度的协作。
欢迎小伙伴们订阅
前端全栈修仙之路，及时阅读 Angular、TypeScript、Node.js/Java和Spring技术栈最新文章。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK