发布订阅模式 和 观察者模式

129 阅读1分钟

通过两个例子来理解二者的区别:

1. 微博订阅

A用户订阅了张三,B用户订阅李四,C用户订阅了王五等等,此时张三、李四、王五他们发布动态的话,对应订阅他们的人都能分别能收到消息,他们是多对多的关系。

2. 天气预报订阅

A用户、B用户、C用户等等都订阅了天气预报,天气预报就会把最新的动态发布到这些订阅的人那里,他们是一对多的关系。

发布订阅代码示例:
class EventBus {
  constructor() {
    this.eventObj = {};
  }

  on(key, callback) {
    this.eventObj[key] = this.eventObj[key] || [];
    this.eventObj[key].push(callback)
  }

  emit(key, ...arg) {
    const cbs = this.eventObj[key];
    cbs.forEach(cb => cb(...arg))
  }
}

const eb = new EventBus();
eb.on('key1', params => {
  console.log(params)
});
eb.emit('key1', '张三')
eb.on('key2', params => {
  console.log(params)
});
eb.emit('key2', '李四')
观察者模式代码示例:
// 订阅
class Subscribe {
  constructor() {
    this.obervers = [];
  }

  addObervers(oberver) {
    this.obervers.push(oberver);
  }

  notityObervers(params) {
    this.forEach(oberver => {
      overver.update(params)
    })
  }
}
const subscribe = new Subscribe();

// 观察者
class Obersver {
  consstructor(weather) {
    this.wea = weather;
  }
  
  update(params) {
    conssole.log(this.wea + params)
  }
}
const obersver1 = new Obersver('观察者1');
const obersver2 = new Obersver('观察者2');

subscribe.addObervers(obersver.update);

subscribe.notityObervers('今天是个好天气!!');