js 设计模式:观察者和发布订阅模式

Posted 郭佬

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 设计模式:观察者和发布订阅模式相关的知识,希望对你有一定的参考价值。

总是把这两个当作同一个模式,但其实是不太一样的,现在重温一下。

观察者模式


观察者直接订阅目标,当目标触发事件时,通知观察者进行更新

简单实现

class Observer {
  constructor(name) {
    this.name = name;
  }

  update() {
    console.log(`${this.name} update`)
  }
}

class subject {
  constructor() {
    this.subs = [];
  }

  add(observer) {
    this.subs.push(observer);
  }

  notify() {
    this.subs.forEach(item => {
      item.update();
    });
  }
}

const sub = new subject();
const ob1 = new Observer('ob1');
const ob2 = new Observer('ob2');

// 观察者订阅目标
sub.add(ob1);
sub.add(ob2);

// 目标触发事件
sub.notify();

发布订阅模式


发布订阅模式通过一个调度中心进行处理,使得订阅者和发布者分离开来,互不干扰。

简单实现

class Event {
  constructor() {
    this.lists = new Map();
  }

  on(type, fn) {
    if (!this.lists.get(type)) {
      this.lists.set(type, []);
    }

    this.lists.get(type).push(fn);
  }

  emit(type, ...args) {
    const arr = this.lists.get(type);
    arr && arr.forEach(fn => {
      fn.apply(null, args);
    });
  }
}

const ev = new Event();

// 订阅
ev.on('msg', (msg) => console.log(msg));

// 发布
ev.emit('msg', '发布');

不同点


其实这两个模式可以说是同一种设计模式的不同实现。

观察者模式是观察者和目标直接进行交互,有耦合性,而发布订阅模式则是通过一个调度中心进行处理,订阅者和发布者互不干扰,进行了解耦。

以上是关于js 设计模式:观察者和发布订阅模式的主要内容,如果未能解决你的问题,请参考以下文章

JS设计模式发布订阅模式

观察者模式 vs 发布-订阅模式

js 设计模式:观察者和发布订阅模式

js设计模式-观察者模式来模拟vue的双向数据绑定

js设计模式-发布/订阅模式

js 高阶函数 发布订阅观察者模式 手撕promise