观察者模式
概念
概念
定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主体对,当主体(subject)对象状态发生变化后时,所有依赖于它的观察者都会收到通知并自动更新。
有一个subject对象,然后有很多的observers观察者对象,当subject对象有变化的时候去通知observer对象即可
案例
下面列举观察者模式的案例 假设以外卖网站示例
js
getAddress().then((res)=>{
const address = res.address;
})
A.update(address); // 更新地址
B.next(address); // 渲染界面
C.change(address); // 修改订单
// 例如 在这里新增一个D功能
D.init(address);
/// ----------存在问题------------
// 各个模块和获取地址模块耦合严重,A、B、C 没有发生变化或者有新增的模块,
// 都需要深入到获取地址的代码去修改,一不小心就会改出问题 (bug)
// 此时 则可以使用观察者模式 进行优化
// 定义一个观察者对象
const observers = [];
// 注册观察者
observers.push(A.update);
observers.push(B.next);
observers.push(C.change);
observers.push(D.init);
getAddress().then((res)=>{
const address = res.address;
observers.forEach((observer)=>observer(address));
})
通过观察者模式将获取后的地址操作解耦出来 未来有新增模块只需要注册观察者
也产生问题 当出现一个依赖的时候又需要重新去注册 ==> 发布订阅模式 优化
应用场景
- 数据绑定 在MVVM框架中,数据模型和视图之间通过观察者模式建立了联系,当数据模型发生变化时,会通知绑定的视图进行更新
- 事件监听 事件监听也是观察者模式的一种应用,当事件发生时,会通知所有注册了该事件的观察者进行处理
- 自定义事件 在一些场景下,我们可能需要自定义事件,通过观察者模式来实现事件的注册、触发和处理
- 状态管理 在一些复杂的应用中,可能需要进行状态管理,例如redux中的状态管理,就是通过观察者模式来实现状态的变化和更新
特点
- 将某个用起来麻烦且繁琐的功能进行封装,方便使用,其在未来能够更好的应对底层的变化
- 将复杂的逻辑分离出来,降低各模块之间的耦合度,提高代码的可维护性和可扩展性