React 组件通信（发布者和订阅者模式）

// eventProxy.js
'use strict';
const eventProxy = {
  onObj: {},
  oneObj: {},
  on: function(key, fn) {
    if(this.onObj[key] === undefined) {
      this.onObj[key] = [];
    }

    this.onObj[key].push(fn);
  },
  one: function(key, fn) {
    if(this.oneObj[key] === undefined) {
      this.oneObj[key] = [];
    }

    this.oneObj[key].push(fn);
  },
  off: function(key) {
    this.onObj[key] = [];
    this.oneObj[key] = [];
  },
  trigger: function() {
    let key, args;
    if(arguments.length == 0) {
      return false;
    }
    key = arguments[0];
    args = [].concat(Array.prototype.slice.call(arguments, 1));

    if(this.onObj[key] !== undefined
      && this.onObj[key].length > 0) {
      for(let i in this.onObj[key]) {
        this.onObj[key][i].apply(null, args);
      }
    }
    if(this.oneObj[key] !== undefined
      && this.oneObj[key].length > 0) {
      for(let i in this.oneObj[key]) {
        this.oneObj[key][i].apply(null, args);
        this.oneObj[key][i] = undefined;
      }
      this.oneObj[key] = [];
    }
  }
};

export default eventProxy;

// 使用改写
const eventProxy = {
  onObj: {},
  // 订阅者监听事件，on 可以监听一个事件的多个方法，且可触发多次
  on: function (key, ...rest) {
    if (this.onObj[key] === undefined) {
      this.onObj[key] = [];
    }
    for (let i = 0; i < rest.length; i++) {
      this.onObj[key].push(rest[i]);
    }
  },

  // 解除所有订阅了某个事件的所有函数
  off: function (key) {
    this.onObj[key] = [];
  },

  // 发布者发布事件，触发on进行订阅函数
  trigger: function (key, data) {
    if (this.onObj[key] !== undefined && this.onObj[key].length > 0) {
      for (const i in this.onObj[key]) {
        this.onObj[key][i].call(null, data);
      }
    }
  },
};

export default eventProxy;