发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知。
订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Event Channel),当发布者(Publisher)发布该事件(Publish Event)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>订阅与发布</title>
</head>
<body>
<script>
class EventHub {
constructor() {
this.events = {}
}
/* 注册事件
* type 事件名称
* fn 事件处理函数
*/
$on = (type, fn) => {
if (typeof fn !== "function") {
console.warn("参数二必须是一个函数");
return;
}
if (!this.events[type]) {
this.events[type] = [fn]
} else {
this.events[type].push(fn)
}
}
/* 移除事件/事件函数
* type 事件名称
* fn 事件处理函数
*/
$off = (type, fn) => {
// 判断有没有这个订阅事件
if (!this.events[type]) return;
if (!fn) {
// 如果没有fn就删掉整个事件
this.events[type] = undefined
} else {
// 如果有fn就只是过滤掉这个当前事件type的fn方法
this.events[type] = this.events[type].filter(item => item !== fn)
}
}
/* 发布事件
* type 事件名称
* data 发布的数据
*/
$emit = (type, data) => {
if (!this.events[type]) return
this.events[type].forEach(item => item(data))
}
}
// ==========测试=========
const handlerA = () => {
console.log('handlerA');
}
const handlerB = () => {
console.log('handlerB');
}
const handlerC = () => {
console.log('handlerC');
}
const eventHub = new EventHub()
eventHub.$on('abc', handlerA)
eventHub.$on('abc', handlerB)
eventHub.$off('abc', handlerA)
eventHub.$off('abc')
eventHub.$on('abc', handlerC)
eventHub.$on('abcd', handlerB)
eventHub.$emit('abc')
eventHub.$emit('abcd')
console.log('eventHub', eventHub);
</script>
</body>
</html>