观察者模式和发布订阅模式有什么不同？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>订阅发布功能实现</title>
</head>
<body>
<!-- 按钮，点击后触发事件 -->
<button id="emitter">触发Emit</button>
<script>
const emitter = document.getElementById('emitter')
// 订阅发布类
class EventEmitter {
constructor() {
// 初始化订阅者对象，用于存储事件及其对应的回调函数
this.subscribers = {}
}
// 注册事件的方法
on(eventName, callback) {
// 如果事件不存在，则初始化一个空数组
if (!this.subscribers[eventName]) {
this.subscribers[eventName] = []
}
// 将回调函数添加到对应事件的数组中
this.subscribers[eventName].push(callback)
}
// 发布事件的方法
emit(event, ...args) {
// 如果事件不存在，则直接返回
if (!this.subscribers[event]) {
return
}
// 遍历事件对应的回调函数数组，并依次执行回调函数，传入参数
this.subscribers[event].forEach((callback) => {
callback(...args)
})
}
}
// 实例化 EventEmitter 类
const myEvent = new EventEmitter()
// 注册一个事件监听器，当 'someEvent' 事件触发时，执行回调函数
myEvent.on('someEvent', (data) => {
console.log(`Received data: ${data}`)
})
// 为按钮添加点击事件监听器，点击按钮时触发 'someEvent' 事件，并传递参数 'hello world'
emitter.onclick = () => {
myEvent.emit('someEvent', 'hello world')
}
</script>
</body>
</html>
新公网安备 65010402001845号