手写代码之 【发布订阅】

前言

在目前比较火热的前端主流框架中，相信大家都已经默认是三大家族 Vue , React , Angular 了 ，谈到它们呢，无疑离不开一个关键词 组件 ；

为什么这么说：因为在它们的设计模式中，都希望是以一个个细小的组件来组成一个大的组件，而这个大的组件就是我们要写的前端页面了， 说到这里，也许已经有童鞋知道我要表达什么意思了，其实我就是想说：在一个前端工程中，存在着很多这样的组件，那么这些组件都有着复杂的关系 ，如 嵌套，相邻，不相关 等 ， 他们如何通信呢 ? okey ，我们通过 Vue , React 来简单分析一下

Vue
父子：props
子父：$emit , $on 发布订阅（组件默认的父子之间的触发场景）
跨层级：provider / inject
兄弟：可能是寻找功能的父组件
通用：vuex , 发布订阅，eventBus（new 一个 vue 实例，利用本身已有 $on 和 $emit ，做点对点通信）

React
父子：props
子父：通过回调的方式
跨层级：context
兄弟：也可能是寻找共同的父组件
通用：Redux ，发布订阅 eventBus （自己手写）

通过简单的分析，我们可以看出来，其实组件之间的通信也是大同小异，基本常用的就这些东西，相信在大家的实际开发中遇到的最多就是组件通信了，在这里呢，我们就手写一个通用方式【发布订阅】

首先，什么是发布订阅 ? 通俗一点说就是一个发布通知，一个接收通知做对应的事儿 ， 来实践一下

先定义一个类 EventBus

class EventBus {
  constructor() {
    this.events = this.events || {};
  }
}

定义一个发布者

// 挂载在类 EventBus 的原型上
// type : 发布的事件类型，也可以说是事件名称
// args : 携带参数
EventBus.prototype.emit = function (type, ...args) {
  const e  = this.events[type]; // 返回一个数组
  if (e instanceof Array) {
	  e.forEach( c => {
	  	// 改变 this 调用对应的发布事件
	  	 c.apply(this, args);
	  })
  }
};

定义一个订阅者

// type : 订阅的事件类型，也可以说是事件名称
// 回调函数 : dosomething 
EventBus.prototype.on = function (type, fun) {
  const e = this.events[type]; // 同上
  if (!e) {
  	// 如果没有该订阅事件，则自定添加，并赋值对应的操作
    this.events[type] = [fun];
  } else {
    e.push(fun);
  }
};

定义一个移除事件

// 移除对应的事件
EventBus.prototype.off = function (type) {
  delete this.events[type];
};

实践：

// new 一个实例
const ev = new EventBus();
//订阅 fn 事件 ， 并接收参数
ev.on("fn",(args) => {console.log("订阅到了 fn 事件",args)})
// 发布 fn 事件 ， 并传测试参数
ev.emit("fn",{arg:"测试参数"})
//移除 fn 事件
ev.off("fn")
// 打印看结果
console.log(ev);