Design Patterns（设计模式-发布/订阅）

发布/订阅模式

• 订阅者

• 发布者

• 信号中心

• 我们假定，存在一个"信号中心”，

• 某个任务执行完成，就向信号中心"发布"（publish）一个信号，

• 其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。

• 这就叫做"发布/订阅模式"（publish-subscribe pattern）

Vue 的自定义事件

<script src="<https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js>"></script>
<script>
  let vm = new Vue();
  vm.$on('dataChange', () => {
    console.log('dataChange');
  });
  vm.$on('dataChange', () => {
    console.log('dataChange1');
  });
  vm.$emit('dataChange');
</script>

兄弟组件通信过程

// eventBus.js

  // 事件中心
  let eventHub = new Vue()

// ComponentA.vue
  // 发布者
  addTodo: function () {
      // 发布消息(事件)
      eventHub.$emit('add-todo', { text: this.newTodoText })
      this.newTodoText = ''
  }

// ComponentB.vue
  // 订阅者
  created: function () {
      // 订阅消息(事件)
      eventHub.$on('add-todo', this.addTodo)
  }

模拟 Vue 自定义事件的实现

class EventEmitter {
    constructor() {
      // { eventType: [ handler1, handler2 ] }
      this.subs = {};
    }
    // 订阅通知
    $on(eventType, handler) {
      this.subs[eventType] = this.subs[eventType] || [];
      this.subs[eventType].push(handler);
    }
    // 发布通知
    $emit(eventType) {
      if (this.subs[eventType]) {
        this.subs[eventType].forEach((handler) => {
          handler();
        });
      }
    }
  }

  // 测试
  var bus = new EventEmitter();
  // 注册事件
  bus.$on('click', function () {
    console.log('click');
  });
  bus.$on('click', function () {
    console.log('click1');
  });
  // 触发事件
  bus.$emit('click');

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.https://serious-lose.notion.site/aa0ca5042ec94ee69a309fd3d085ef3f