[JS] 观察者模式 vs 发布订阅模式

[david2tdw]

观察者模式，其实就是为了实现松耦合(loosely coupled)。 发布订阅模式里，发布者和订阅者，不是松耦合，而是完全解耦的。通过消息队列交流。

[david2tdw]

• 观察者模式里，只有两个角色 —— 观察者 + 被观察者
• 而发布订阅模式里，却不仅仅只有发布者和订阅者两个角色，还有一个经常被我们忽略的 —— 经纪人Broker

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

[david2tdw]

一个简单的Event bus (观察者模式)

面试官:既然React/Vue可以用Event Bus进行组件通信,你可以实现下吗?

[david2tdw]

观察者模式另一个简单实现：

每日 30 秒 ⏱ 发布与订阅

[david2tdw]

const createEventBus = () => ({
  bus: Object.create(null),

  $emit(event, data) {
    (this.bus[event] || []).forEach(handler => handler(data));
  },

  $on(event, handler) {
    // event is not exist
    if (!this.bus[event]) {
      this.bus[event] = []; 
    }
    this.bus[event].push(handler);
  },
  $off(event, handler) {
    const index = (this.bus[event] || []).findIndex(h => h === handler);
    if (index > -1) {
      this.bus[event].splice(index, 1);
    }
  }

});

var bus  = createEventBus();
bus.$on('aron', h => {
  console.log(`show ${h}`);
});

bus.$on('aron', h => {
  console.log(`save ${h}`);
});

bus.$emit('aron', 'tdw');