前端必懂EventEmitter，不懂会丢人

本文说一下 EventEmitter，比较简单，可以直接看代码。

发布 + 订阅

DOM 的事件机制就是发布订阅模式最常见的实现，这大概是前端最常用的编程模型了，监听某事件，当该事件发生时，监听该事件的监听函数被调用。

发布订阅模式，阮一峰在《Javascript 异步编程的 4 种方法》，中：

我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern）。

感兴趣的可以去看看，下图是我平时在用的一个实现。（重点看）

image

Vue 中非父子组件组件通信

在 Vue 中不同组件之间通讯，有一种解决方案叫Event Bus，这其实就是发布订阅模式的实现，非常简单好用。

image

Vue 事件相关接口：

emit，off。

使用 Event Bus 进行跨组件消息传递很棒，但是，当事件非常多的时候，Event Bus 上的事件就会难以维护，这与使用全局变量一样一个道理。变量能局部的，就尽量不要放到全局，同样 Event Bus 上的事件也是越少越好。

观察者模式

简单创建一个能够添加、删除和提醒观察者的目标。

image

代码会说话，我就不解释了，实在是没什么好解释的，如果一定要说点什么：我真有点不好意思打原创的标。

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

有时候人们会简单的把发布订阅模式和观察者模式混为一谈，比如上面的一峰老师，其实两者还是有些区别的。至少它们的英文名称不同：Observer vs Pub-Sub。

《Learning JavaScript Design Patterns》一书这样说:

“While the Observer pattern is useful to be aware of, quite often in the JavaScript world, we’ll find it commonly implemented using a variation known as the Publish/Subscribe pattern.”
虽然 Observer 模式非常有用，但是在 JavaScript 的世界中，它更多的以一种被称为发布/订阅模式的变种来实现

由上可以理解为，发布/订阅模式是观察者模式的一种变形，两者区别在于，发布/订阅模式在观察者模式的基础上，在目标和观察者之间增加一个调度中心。

image

观察者模式是由具体目标调度，比如当事件触发，Subject 就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间是存在依赖的。

发布/订阅模式由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在。

详细内容，感兴趣的同学可以看下面这本书：

image image