发布-订阅设计模式对大家来说并不是很陌生，举一个最简单的例子，在前端开发过程中，事件的绑定就是其实际的应用。首先我们先了解下什么是发布-订阅模式。
基本概念：发布-订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都得到通知。在前端开发中，我们一般用事件模型来替代传统的发布-订阅模式。
发布-订阅模式是前端常用的一种设计模式，现在主流的MVVM框架，都大量使用了此设计模式，其主要作用有以下两点：一是可以实现模块间通信，而是可以在一定程度上实现异步编程。其基本事件模型如下：
前端的事件绑定有三要素，一是传入事件类型，二是声明对应的回调方法，三是触发条件；触发条件为对应的事件类型。前端DOM的事件系统本质也是发布-订阅模式，而我们在业务处理中所应有的模式也与此类似，只不过发布订阅模式应用的是自定义事件类型，可以自定义。
发布订阅事件模型本质上就是一个*事件处理总线，它接收所有订阅的自定义事件，并将自定义事件的回调存储到事件回调的堆栈中，当某在某个时刻触发了此自定义事件，会调用分发事件的方法，从事件回调堆栈中取出符合条件的事件回调，依次调用，具体实现逻辑如下：
class EventEmiter {
constructor() {
//回调中心
this.listenerList = {};
this.createEventList = {};
}
/**
* 添加事件监听
* @param {事件类型} type
* @param {回调方法} fn
*/
on(type, fn) {
if (!this.listenerList[type]) {
this.listenerList[type] = [];
}
this.listenerList[type].push(fn);
}
/**
* 触发事件监听
* @param {事件类型} type
*/
emit(type, flag) {
let fnList = this.listenerList[type];
let params = Array.from(arguments);
if (!fnList || fnList.length === 0) {
return false;
} else {
fnList.forEach(fn => {
fn.apply(this, params.slice(1));
});
}
}
/**
* 移除事件监听
* @param {事件类型} type
* @param {回调方法} fn
*/
off(type, fn) {
if (!this.listenerList[type]) {
return false;
} else {
let index = this.listenerList[type].findIndex(vv => vv === fn);
if (index === -1) {
return false;
} else {
this.listenerList[type].splice(index, 1);
}
}
}
}
let eventBus = new EventEmiter();
function cb(param) {
console.log("this is a test", param);
}
eventBus.on("test", cb);
eventBus.emit("test", 123);
eventBus.off("test", cb);
eventBus.emit("test", 456);
以上只是对发布订阅模式进行一个简单的实现，自定义事件只能分发给在触发前已订阅的消息，针对那些先触发，后订阅的内容，并不能得到一个很好的处理，所以，如果要解决这种弊端，就必须加一个离线的事件缓存。除此之外，发布订阅也有一些弊端，那就是每次发布消息，都会触发所有的事件监听回调，尽管大多数情况下并不想触发所有回调内容，所以在这种情况下，最好对事件加一些命名空间，以缩小其生效范围。
以下为支持离线事件代码，只是对事件加了一个标记：
class EventEmitter {
constructor() {
//回调中心
this.listenerMap = {};
//离线事件列表
this.offlineListenerList = [];
}
/**
* 添加事件监听
* @param type 事件类型
* @param fn 回调函数
* @param flag 是否是离线事件
*/
on(type, fn, flag) {
if (!this.listenerMap[type]) {
this.listenerMap[type] = [];
}
this.listenerMap[type].push(fn);
//如果注册了离线事件，则在监听事件时，需要检测是否有离线事件缓存
if (flag) {
let index = this.offlineListenerList.findIndex(vv => vv.type === type);
if (index !== -1) {
fn.call(this, this.offlineListenerList[index].params);
//清空该条离线事件记录
this.offlineListenerList.splice(index, 1);
}
}
}
/**
* 触发事件监听
* @param type 事件类型
* @param params 载荷参数
* @param flag
*/
emit(type, params, flag) {
let fnList = this.listenerMap[type];
if (fnList && Array.isArray(fnList)) {
fnList.forEach(fn => {
fn.apply(this, params);
});
}
//如果注册的是离线事件，则吧
if (flag) {
this.offlineListenerList.push({
type,
params
});
}
}
/**
* 移除事件监听
*/
off(type, fn) {
if (!this.listenerMap[type]) {
return false;
} else {
let index = this.listenerMap[type].findIndex(vv => vv === fn);
if (index === -1) {
return false;
} else {
this.listenerMap[type].splice(index, 1);
}
}
}
/**
* 只触发一次
* @param type
* @param fn
*/
once(type, fn) {
let fnList = this.listenerMap[type];
let params = Array.from(arguments);
if (!fnList || fnList.length === 0) {
return false;
} else {
let index = fnList.findIndex( vv => vv === fn);
fnList[index].apply(this, params.slice(1));
fnList.splice(index, 1);
}
}
}
let event = new EventEmitter();
event.emit('test', 1, true);
event.on('test', params => {
console.log('offline', params)
}, true);
event.on('cc', () => {
console.log('normal', 22222);
});
event.emit('cc');