vue&react组件通信原理：发布-订阅模式的实现原理

 

//发布-订阅模式

//订阅：给自定义事件绑定函数。调用代码：on(ele,'myClick',fn)
function on(ele, type, fn) {
  if (/^self/.test(type)) {//1、给所有浏览器的某个自定义事件绑定多个函数
    if (!ele['selfEvent' + type]) {
      //给自定义事件建事件池。
      ele['selfEvent' + type] = [];
    }
    var eventPool = ele['selfEvent' + type];
    for (var i = 0; i < eventPool.length; i++) {
      if (eventPool[i] == fn) return;
    }
    eventPool.push(fn);
  } else {
    if (ele.addEventListener) {//2、给标准浏览器的某个内置事件绑定多个函数。标准浏览器一个事件本来就能绑定多个方法。
      ele.addEventListener(type, fn, false);
      return;
    }
    if (!ele['onEvent' + type]) {//3、给IE浏览器的某个内置事件绑定多个函数。IE浏览器的一个内置事件本来只能能绑定一个方法，这里通过给IE浏览器的内置事件建事件池，让IE浏览器的一个内置事件能绑定多个方法。
      ele['onEvent' + type] = [];
      ele.attachEvent('on' + type, function () {
        var eventPool = this["onEvent" + type];
        if (eventPool && eventPool.length) {
          for (var i = 0; i < eventPool.length; i++) {
            if (typeof eventPool[i] == "function") {
              eventPool[i].call(this, e);
            } else {
              eventPool.splice(i, 1);
              i--;
            }
          }
        }
      })
    }
    var eventPool = ele['onEvent' + type];
    for (var i = 0; i < eventPool.length; i++) {
      if (eventPool[i] == fn) return;
    }
    eventPool.push(fn);
  }
}

//发布：让自定义事件执行。调用代码：selfRun.call(ele,'myClick',event)
function selfRun(type, event) {
  var eventPool = this["selfEvent" + type];
  if (eventPool && eventPool.length) {
    for (var i = 0; i < eventPool.length; i++) {
      if (typeof eventPool[i] == "function") {
        eventPool[i].call(this, event);
      } else {
        eventPool.splice(i, 1);
        i--;
      }
    }
  }
}

//解除订阅：给自定义事件解绑函数。调用代码：off(ele,'myClick',fn)
function off(ele, type, fn) {
  if (/^self/.test(type)) {
    var eventPool = ele["selfEvent" + type];
    if (eventPool && eventPool.length) {
      for (var i = 0; i < eventPool.length; i++) {
        if (eventPool[i] == fn) {
          eventPool[i] = null;
          break;
        }
      }
    }
  } else if (ele.removeEventListener) {
    ele.removeEventListener(type, fn, false);
  } else {
    var eventPool = ele["onEvent" + type];
    if (eventPool && eventPool.length) {
      for (var i = 0; i < eventPool.length; i++) {
        if (eventPool[i] == fn) {
          eventPool[i] = null;
          return;
        }
      }
    }
  }
}