TS 设计模式07 - 观察者模式
时间:2022-07-24
本文章向大家介绍TS 设计模式07 - 观察者模式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. 简介
观察者模式是一种对象行为模式。它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。
2. 使用场景
- 当一个抽象模型有两个方面,其中一个方面依赖于另一方面。将这二者封装在独立的对象中以使它们可以各自独立地改变和复用。
- 当对一个对象的改变需要同时改变其他对象,而不知道具体有多少对象需要被改变。
- 当一个对象必须通知其他对象,而它又不能假定其他对象是谁。换言之,不希望这些对象是紧密耦合的。
3. 角色
- 抽象主题(Subject): 它把所有观察者对象的引用保存到一个聚集里,每个主题都可以有任何数量的观察者。抽象主题提供一个接口,可以增加和删除观察者对象。
- 具体主题(Concrete Subject): 将有关状态存入具体观察者对象;在具体主题内部状态改变时,给所有登记过的观察者发出通知。
- 抽象观察者(Observer): 为所有的具体观察者定义一个接口,在得到主题通知时更新自己。
- 具体观察者(Concrete Observer): 实现抽象观察者角色所要求的更新接口,以便使本身的状态与主题状态协调。
4. 实现
image.png
interface Msg { // Msg 可以按照任意约定的接口格式去约束,这里假设是如下类型消息
name: string;
value: string;
}
interface Subject {
registerObserver(observer: Observer): void;
removeObserver(observer: Observer): void;
notifyObservers(msg: Msg): void;
}
interface Observer {
update(msg: Msg): void
}
class ConcreteSubject implements Subject {
private observers: Observer[] = [];
private state: object = {};
registerObserver(observer: Observer): void {
this.observers.push(observer);
}
removeObserver(observer: Observer): void {
const index = this.observers.findIndex(val => val === observer);
if (index > -1) {
this.observers.splice(index, 1);
}
}
notifyObservers(msg: Msg): void {
this.observers.forEach(observer => observer.update(msg));
}
setState(name, value): void {
this.state[name] = value;
console.log(`${name}状态更新为:${value}`);
console.log('通知所有观察者');
this.notifyObservers({
name,
value,
});
}
}
class ConcreteObserver implements Observer {
name: string;
constructor(name: string) {
this.name = name;
}
update(msg: Msg): void {
console.log(`${this.name} 观察到:${msg.name}状态更新为:${msg.value}`);
}
}
const concreteSubject = new ConcreteSubject();
const concreteObserver1 = new ConcreteObserver('小王');
const concreteObserver2 = new ConcreteObserver('小明');
concreteSubject.registerObserver(concreteObserver1);
concreteSubject.registerObserver(concreteObserver2);
concreteSubject.setState('天气', '多云');
concreteSubject.removeObserver(concreteObserver2);
concreteSubject.setState('天气', '晴');
image.png
这里的 Msg 其实就是一种约定的消息接口,你甚至可以直接使用 Subject,这样Subject 和 Observer 就是一种双向关系(关联和依赖)。另外,这里的 setState 也只是对变更行为的一种抽象而已,你可以在任何事件或者任何时机通知订阅者进行更新。
5. 小结
当一个对象密切关注另一个对象的某个状态时,就可以使用观察者模式。它解除了主题和具体观察者的耦合,让耦合的双方都依赖于抽象,而不是依赖具体。
另外,在使用轮询的地方,我们应该先考虑是否可以使用观察者模式。因为主动观察是优于被动轮询的。
参考
观察者模式 - 百度百科 观察者模式 | 菜鸟教程 图解23种设计模式(TypeScript版)——前端必修内功心法 Java设计模式之观察者模式(Observer Pattern)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 最全总结!聊聊 Python 操作PDF的几种方法(合并、拆分、水印、加密)
- 作用域和作用域链的简单理解
- 如何在js中创建对象
- 如何理解JavaScript中的this
- 学习Matplotlib看这一份笔记就够了!
- 6个提升效率的pandas小技巧
- 手把手教你用Python+Pyecharts让微博热搜榜动起来
- JS继承
- call,apply,bind 的完全实现和理 解
- js构造函数的理解
- 实战 | PyQt5制作雪球网股票数据爬虫工具
- 别再问我Python怎么操作Word了!
- Vaex :突破pandas,快速分析100GB大数据集
- 【适合收藏】为了多点时间陪女朋友,我向BAT大佬跪求了这15条JS技巧
- Flask框架教程汇总(1)---视图/重定向/传参