JS手写代码之观察者模式


观察者模式介绍

在跟多关于前端设计模式的文章中作者都会将发布订阅模式和观察者模式放在一起介绍,诚然,这两种设计模式确实也非常相似。我们先来看一下观察者模式的定义:

观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新。观察者模式属于行为型模式,行为型模式关注的是对象之间的通讯,观察者模式就是观察者和被观察者之间的通讯。观察者模式与订阅发布模式的区别

而发布订阅者模式最开始是作为观者模式的一种别称,但是随着发展现在已经独立于观察者模式成为一种新的设计模式了。

两种模式的区别

首先来看下两种模式的实现结构:

两种设计模式对比(图片来自互联网)

从图片可以看出,发布订阅模式是存在一个类似事件管理中心的角色,可以隔绝订阅者和发布者之间的依赖;
观察者模式需要两个类,一个是观察者(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);
  }
}

参考


文章作者: CassielLee
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 CassielLee !
评论
 上一篇
JS数据结构之单向循环链表 JS数据结构之单向循环链表
链表的扩展之单向循环链表,和单向链表相比,单向循环链表的主要特点就是循环,也就是其最后一个节点的next是指向其头节点的。因为这个特点单向循环链表在实际应用中存在很多的应用场景。这篇文章主要就是尝试用JavaScript实现单向循环链表的数据结构以及基本的增删改查的方法,最后还看了两个比较经典的单向循环链表相关的编程题。
2021-07-13
下一篇 
  目录