阅读 185

「设计模式」观察者模式🍉

这是我参与8月更文挑战的第1天,活动详情查看:8月更文挑战

观察者模式的定义

观察者模式属于行为型模式,表示的是对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都能得到通知并被自动更新。

观察者模式中涉及的有两个重要的角色,即目标对象和观察者。观察者需要对目标对象进行观察,根据目标对象的变化来更新自己的操作。在实际场景中,目标对象会实现绑定、解绑和通知的事件逻辑,观察者则会实现更新数据的事件逻辑,目标对象对观察者进行绑定,当变化时触发通知事件,观察者根据通知来更新数据。

观察者模式的应用场景

在实际开发者,观察者模式有以下应用场景:

  • 广泛应用于异步编程中,是一种替代传递回调函数的方案
  • 可以用来实现数据的双向绑定

观察者模式的优缺点

优点:

  • 响应式,目标对象变化会通知观察者,这是观察者最大的优点
  • 实现思路简单

缺点:

  • 不够灵活,由于目标对象和观察者是耦合在一起的,所以需要同时引入目标对象和观察者才能达到响应式的效果
  • 维护比较麻烦,由于耦合性高,业务一旦改动,就需要对目标对象和观察者都进行修改

观察者模式的实现原理分析

接下来我们分析一下观察者模式的实现步骤:

  • 新建目标对象(Subject),负责绑定事件、用来通知的事件
  • 新建观察者(Observer),拥有更新数据的事件
  • 分别对目标对象和观察者进行实例化,进行绑定,然后进行通知

具体实现的代码

根据上一步的思路写出代码

// 目标对象
function Subject() {
  this.cache = [];
}
// 进行绑定的方法
Subject.prototype.bind = function (o) {
  this.cache.push(o);
}
// 进行通知操作的方法
Subject.prototype.notify = function(msg) {
  this.cache.forEach(function(item) {
    item.update(msg);
  });
}

// 观察者
function Observer() {}
// 更新通知信息的方法
Observer.prototype.update = function(msg) {
  console.log('更新通知信息:', msg);
}

var sub = new Subject();
var o1 = new Observer();
var o2 = new Observer();
sub.bind(o1);
sub.bind(o2);

sub.notify('已触发');

// 最后控制台输出:
// 更新通知信息: 已触发
// 更新通知信息: 已触发
复制代码
文章分类
前端