引言
目前发布订阅还是很常见的，对于vue、react中组件的跨组件通信，使用发布订阅也是一种方案。因此，发布订阅也是前端的一个重要知识点，在面试的小伙伴可能遇到过这样的问题：请简单的实现一下发布订阅模式。下面就由我来带你们轻松拿捏。
什么是发布订阅
发布订阅就是：无论何时当我们在a处发送了消息，订阅过a处消息的地方都可以接收到发送的消息。
发布订阅的实现
<body>
<button id="btn">发布消息</button>
<script>
const obj={} // 用于存储所有订阅的回调。把订阅id作为对象的属性，属性对应的值为订阅回调的数组
function on(id,f){ // 订阅消息的函数。这里的id与发布消息处的的id对应，f是用来接收消息的回调
if(!obj[id]) obj[id]=[]
obj[id].push(f)
}
function emit(id,msg){ // 发布消息的函数。这里的id与订阅消息处的的id对应，msg是发布的消息
obj[id].forEach(f=>f(msg))
}
on('hhh',(msg)=>{console.log('a处接收消息',msg)}) // 组件a订阅 hhh 处的消息
on('hhh',(msg)=>{console.log('b处接收消息',msg)}) // 组件b订阅 hhh 处的消息
document.getElementById('btn').onclick=()=>{
emit('hhh','哈哈哈') // 发布消息到 hhh
}
/*
每次点击按钮后,打印如下：
a处接收消息 哈哈哈
b处接收消息 哈哈哈
*/
</script>
</body>
结尾
相信看完这篇文章的小伙伴一定对发布订阅模式的简单实现是没有什么问题了。感谢大家的观看，希望这篇文章能给你带来一些帮助。如果有小伙伴有一些疑惑和问题，欢迎分享和提出。
1638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
