自定义EventBus 与 自定义PubSub

自定义EventBus

(function (window) {
	// 需要向外暴露的事件总线对象
	const EventBus = {}
	// 包含所有监听器函数的容器对象
	// 内部结构: {msg1: [listener1, listener2], msg2: [listener3]}
	let listenersContainer = {}
	/*
	用来绑定监听的on方法
	eventName: 事件名
	listener: 监听回调函数
	*/
	EventBus.on = function (eventName, listener) {
		// 得到包含当前事件名对应已有事件监听的数组
		let listeners = listenersContainer[eventName]
		// 如果不存在
		if (!listeners) {
			// 创建存储事件监听的数组容器, 关联到总对象容器上
			listenersContainer[eventName] = []
		}
		// 将监听器添加到数组容器中
		listenersContainer[eventName].push(listener)
	}

	/* 
	用来分发/触发事件的emit方法
	eventName: 事件名
	data: 需要传递的数据
	*/
	EventBus.emit = function (eventName, data) {
		// 得到包含当前事件名对应已有事件监听的数组
		const listeners = listenersContainer[eventName]
		// 只有当存在事件监听时才处理
		if (listeners && listeners.length>0) {
		// 遍历并同步调用每个监听函数, 传入指定的数据
			listeners.forEach((listener, index) => {
				listener(data)
			})
		}
	}

	/* 
	用来解绑事件监听的off方法
	eventName: 事件名, 
	没值: 解绑所有监听
	有值: 解绑对应的所有监听
	*/
	EventBus.off = function (eventName) {
		// 如果事件名没有指定, 解绑所有事件监听(重置监听容器)
		if (typeof eventName === undefined) {
			listenersContainer = {}
		} else { 
			// 解绑当前事件名的所有监听(删除事件名对应的属性)
			delete listenersContainer[eventName]
		}
	}
	// 向外暴露事件总线对象
	window.EventBus = EventBus
})(window)

测试：

EventBus.on('add', (data) => {
	console.log('add', data)
})
EventBus.on('add', (data) => {
	console.log('add2', data)
})
EventBus.on('delete', (data) => {
	console.log('delete', data)
})
// EventBus.off('add') 
EventBus.emit('add', 'atguigu')
EventBus.emit('delete', 'baidu')
console.log('emit()之后')

自定义PubSub

(function (window) {
	// 消息订阅发布的管理者对象
	const PubSub = {}
	// 用来保存所有订阅者回调函数的对象容器
	// 内部结构: {msg1, {'uid-1':subscriber1, 'uid-2':subscriber2}, msg2: {'uid-3':subscriber3}}
	let subscribersContainer = {}
	// 用来组成消息唯一标识token的uid, 值会不断增加
	let id = 0
	/* 
	用来订阅消息的方法
	msg: 消息名
	subscriber: 订阅者回调函数
	*/
	PubSub.subscribe = function (msg, subscriber) {
		// 取出此消息名已有的所有订阅者的对象容器
		let subscribers = subscribersContainer[msg]
		// 如果不存在, 创建一个空的对象容器
		if (!subscribers) {
			subscribersContainer[msg] = {}
		}
		// 生成一个新的标识token
		const token = 'id-' + (++id)
		// 保存新指定的订阅者回调
		subscribers[token] = subscriber
		// 返回标识
		return token
	}
	
	/* 
	用于异步发布消息的方法
	msg: 消息名
	data: 数据
	*/
	PubSub.publish = function (msg, data) {
		// 取出此消息名已有的所有订阅者的对象容器
		const subscribers = msgSubscribers[msg]
		// 如果存在, 通过定时器异步调用所有回调
		if (subscribers) {
			setTimeout(() => {
				Object.values(subscribers).forEach(subscriber => subscriber(data))
			})
		}
	}
	/* 
	用于同步发布消息的方法
	msg: 消息名
	data: 数据
	*/
	PubSub.publishSync = function (msg, data) {
		// 取出此消息名已有的所有订阅者的对象容器
		const subscribers = subscribersContainer[msg]
		// 如果存在, 同步调用所有回调
		if (subscribers) {
			Object.values(subscribers).forEach(subscriber => subscriber(data))
		}
	}
	/* 
		用于取消消息的订阅的方法, flag有3种情况
		没有指定: 取消所有消息订阅
		token: 取消对应的某个消息订阅
		msg: 取消对应的所有消息订阅
	*/
	PubSub.unsubscribe = function (flag) {
		// 1. 如果flag没有指定: 取消所有消息订阅
		if (flag === undefined) {
			subscribersContainer = {}
		} else if (flag.indexOf('id-') === 0) {
			// 2. 如果flag是token: 取消对应的某个消息订阅
			const subscribers = Object.values(subscribersContainer).find(subscribers => subscribers.hasOwnProperty(flag))
			if (subscribers) {
				delete subscribers[flag]
			}
		// 3. msg: 取消对应的所有消息订阅
		} else {
			subscribersContainer[flag] = {}
		}
	}
	// 向外暴露管理者
	window.PubSub = PubSub
})(window)

测试：

PubSub.subscribe('delete', (data) => {
	console.log('delete', data)
})
PubSub.subscribe('add', (data) => {
	console.log('add2', data)
})
const token = PubSub.subscribe('add', (data) => {
console.log('add', data)
})
// PubSub.unsubscribe('add')
// PubSub.unsubscribe(token)
// PubSub.unsubscribe()
PubSub.publish('add', 'atguigu')
PubSub.publish('delete', 'baidu')
PubSub.publishSync('delete', 'baidu')
console.log('publishSync()之后')