vue3 hooks之事件广播(支持跨标签页)

本文介绍了如何使用一个基于同源策略的EventBus类,实现浏览器中跨标签页的事件传递,包括事件注册、广播、处理以及管理订阅和清除功能。
摘要由CSDN通过智能技术生成
/***
 * 同源下的全局事件总线,支持跨标签页通信
 * 第一步:注册事件
 * 第二步:广播事件
 * 第三步:处理事件
 */

// source:消息发起源href,将在跨标签页通信时传入
interface callback {
    (data: any, source: any): void
}
type eventName = string;

class EventBus {
    protected eventMap: any = new Map();
    protected channel: any = new BroadcastChannel('__event-bus');

    protected register(eventName: eventName, callback: callback) {
        if (!this.eventMap.has(eventName)) {
            this.eventMap.set(eventName, [])
        }
        this.eventMap.get(eventName).push(callback)
    }
    protected tryRunCallback(eventName: eventName, data: any, source?: string) {
        if (!this.eventMap.has(eventName)) return;
        this.eventMap.get(eventName).forEach((callback: callback) => {
            callback(data, source)
        });
    }

    // 广播事件
    emit(eventName: eventName, data?: any) {
        this.tryRunCallback(eventName, data);
        // 跨标签页 发送消息
        this.channel.postMessage({ eventName, data, source: location.href })
    }
    // 订阅事件
    on(eventName: eventName, callback: callback) {
        this.register(eventName, callback);
        // 跨标签页 接收订阅消息
        this.channel.onmessage = (event: { data: any }) => {
            const data = event.data;
            this.tryRunCallback(data.eventName, data.data, data.source)
        }
    }
    // 移除某个订阅事件
    off(eventName: eventName, callback: callback) {
        if (!this.eventMap.has(eventName)) return;
        const callbacks = this.eventMap.get(eventName)
        this.eventMap.set(eventName, callbacks.filter((cb: callback) => cb !== callback))
    }
    // 清除某个事件的所有订阅
    clear(eventName: eventName) {
        this.eventMap.delete(eventName)
    }
    // 清除所有订阅事件
    clearAll() {
        this.eventMap = new Map()
    }
}

export default new EventBus()

如何使用:

import Event from "EventBus"


Event.on('事件名', () => { 
    //....
})


Event.emit('事件名', { ...数据 })

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值