发布订阅、观察者模式| 青训营笔记

33 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第2天

发布订阅、观察者模式的理解

发布-订阅模式

image-20220711162241760.png

发布者不会将消息直接发送给订阅者,而是将消息分为不同的类别,不需要了解有哪些订阅者

订阅者订阅消息的类别,不需要了解发布者的存在

第三方broker接受发布者的消息同时将订阅者订阅的消息类型派发给订阅者 使用生活中的例子:比如邮局,寄件人,收件人。寄件人、收件人分别与邮局相关联,发件人与寄件人本身并不关联。换句话说,发件人与寄件人并不在乎对方。 整个事情的流程是这样的:

  1. 收件人先去邮局,告诉自己要收件的类型
  2. 发件人将邮件放到邮局
  3. 邮局收到邮件,查询有谁在邮局登记了这个类型的邮件
  4. 邮局通知收件人过来拿

下例:

// on是订阅 emit是发布
//e是邮局
let e = {

  _callback: [],

  on(callback) {

    // 订阅一件事 当这件事发生的时候 触发对应的函数

    // 订阅 就是将函数放到数组中

    this._callback.push(callback);

  },

  emit(value) {

    this._callback.forEach(method => {

      method(value);

    });

  }

};

观察者模式

image-20220711162249900.png 观察者模式表示的是一种一对多的依赖关系,分为两个角色,观察者与被观察者.

被观察者的状态发生变化,所有观察它的对象都会得到通知,并进行更新

使用生活的中的例子进行解释:你的班主任、父母(观察者Observer)在门外观察你(被观察者Subject)的一举一动。你干什么坏事(发生事件)就会(notify)他们进行行动。

// 被观察者 (小宝宝)

class Subject {

  constructor(name) {

    this.name = name;

    this.state = "开心"; // 被观察者的状态

    this.observers = []; // 存放观察者

  }

  // 需要将观察者放到自己的身上

  attach(ther) {

    this.observers.push(ther);

  }

  // 更新被观察者的状态

  setState(state) {

    this.state = state;

    this.observers.forEach(ther => {

      ther.update(this);

    });

  }

}

// 观察者

class Observer {

  constructor(name) {

    this.name = name;

  }

  // 等会被观察者的状态发生变化会调用这个方法

  update(subject) {

    console.log(this.name + ":" + subject.name + "当前状态是" + subject.state);

  }

}

两者区别

  • 观察者模式中被观察者是需要知道观察者的存在,以便在状态变化时进行通知,但是在发布订阅模式中,发布者与订阅者是不知道对方的存在的.发布者与订阅者都与第三方机构(即订阅中心)通信
  • 观察者模式更适合发送同步的消息,而发布订阅模式更适合异步,使用消息队列作为第三方机构