什么是发布-订阅模式？
发布-订阅模式主要包含三个模块， 发布者，事件处理中心，订阅者。
举个简单的例子，假设我们是一个淘宝买家，我们喜欢一家淘宝店铺的话可以点击关注，就可以接收到店铺发布的消息。
这里我们就相当于一个 订阅者 ，淘宝就相当于 事件处理中心，然后我们关注的卖家店铺就相当于 发布者。
订阅者 可以有多个，小明，小红，小亮都关注的小米手机官方店，这个时候小米手机官方店就作为一个发布者，可以给小明，小红，小亮通过淘宝，发布新产品上市的消息。
如何实现一个发布订阅模式？
说下简单的思路
- 首先我们需要一个事件处理中心能够储存我们订阅的事件。
- 然后我们需要一个发布方法，发布的时候能够遍历储存好的订阅事件，依次执行，还能够接收发布传递的参数。
使用Typescript实现
type Event = (params?: unknown) => void;
class EventHub {
private cache: { [key: string]: Array<Event> } = {}; // 缓存订阅的事件
// {
// 'xxx事件': [fn1, fn2, fn3]
// }
// 把fn 推进this.cache[eventName]数组里
on(eventName: string, fn: Event) {
// 如果订阅的事件缓存里不存在任何处理函数，则初始化订阅事件名为一个空数组
this.cache[eventName] = this.cache[eventName] || [];
this.cache[eventName].push(fn);
}
// 依次执行this.cache[eventName]数组里的函数
emit(eventName: string, params?: unknown) {
(this.cache[eventName] || []).forEach(fn => fn(params))
}
// 取消订阅的事件
off(eventName: string, fn: Event) {
// 检查需要取消的事件是否存在, 如果存在则把该事件从this.cache[eventName]数组里面移除
let index = indexOf(this.cache[eventName], fn);
index !== -1 && this.cache[eventName].splice(index, 1);
}
}
export default EventHub;
/**
* 帮助函数
* @param array
* @param item
*/
function indexOf(array: Array<Event> | undefined, item: unknown) {
if(array === undefined) return -1;
let index = -1;
for(let i = 0; i<array.length; i++) {
if(array[i] === item) {
index = i;
break;
}
}
return index;
}
使用测试用例保证我们的代码是可靠的！
import EventHub from '../src/index';
type TestCase = (message: string) => void;
const test1: TestCase = message => {
const eventhub = new EventHub();
console.assert(eventhub instanceof Object === true, 'EventHub是一个对象');
console.log(message)
}
const test2: TestCase = message => {
const eventhub = new EventHub();
let called = false;
eventhub.on('testEvent', (params) => {
called = true;
console.assert(params === 'redmi note8pro 新品发布')
});
eventhub.emit('testEvent', 'redmi note8pro 新品发布');
setTimeout(() => {
console.assert(called === true);
console.log(message)
})
}
const test3: TestCase = message => {
const eventhub = new EventHub();
let called = false;
const fn1 = () => {
called = true;
}
eventhub.on('testEvent', fn1);
eventhub.off('testEvent', fn1);
eventhub.emit('testEvent');
setTimeout(() => {
console.assert(called === false);
console.log(message)
}, 2000)
}
test1('EventHub可以创建一个对象');
test2('EventHub可以on订阅事件和emit触发事件');
test3('EventHub可以off取消一个订阅事件');
测试用例主要用到了assert(断言)这个方法，如果不知道用法可以参考这个api说明
console.assert() 方法
测试用例运行结果
测试用例运行结果
没有报错，说明我们的发布订阅模式是可用的，如果有疑问可以留言！
本文正在参加“写编程博客瓜分千元现金”活动，关注公众号“饥人谷”回复“编程博客”参与活动。
