发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。
订阅者（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 Observer {
constructor() {
this.message = {
}
}
/* 注册事件
* type 事件名称
* fn 事件处理函数
*/
$on = (type, fn) => {
if (!fn) return;
if (!this.message[type]) {
this.message[type] = [fn]
} else {
this.message[type].push(fn)
}
}
/* 移除事件/事件函数
* type 事件名称
* fn 事件处理函数
*/
$off = (type, fn) => {
// 判断有没有这个订阅事件
if (!this.message[type]) return;
if (!fn) {
// 如果没有fn就删掉整个事件
this.message[type] = undefined
} else {
// 如果有fn就只是过滤掉这个当前事件type的fn方法
this.message[type] = this.message[type].filter(item => item !== fn)
}
}
/* 发布事件
* type 事件名称
*/
$emit = (type) => {
if (!this.message[type]) return
this.message[type].forEach(item => item())
}
}
// ==========测试=========
const handlerA = () => {
console.log('handlerA');
}
const handlerB = () => {
console.log('handlerB');
}
const handlerC = () => {
console.log('handlerC');
}
const p = new Observer()
p.$on('abc', handlerA)
p.$on('abc', handlerB)
p.$off('abc', handlerA)
p.$off('abc')
p.$on('abc', handlerC)
p.$on('abcd', handlerB)
p.$emit('abc')
p.$emit('abcd')
console.log('p', p);
</script>
</body>
</html>
