描述

用于发布订阅，解决一些跨组件通讯问题，订阅、卸载、发布。 v3.0.15+
支持跨页面通讯，比如在小程序 webview、浏览器不同的 tab 页实现通讯（注意：只支持同源策略的站点）,跨 tab 页通讯，底层内部使用BroadcastChannel, 如果不支持BroadcastChannel，降级处理通过监听localStorage变化来监听v3.0.23+

警告

⚠️⚠️⚠️ bus 默认是开启跨浏览器tab页通讯的，可以通过设置 isTabCross属性
isTabCross属性是 v3.3.2-beta1+
v3.3.3-beta1+ 新增属性isCrossDomain支持跨域通讯，底层对postMessage二次封装

1.示例

import { bus } from 'sf-utils2'

const effects = [] // 事件副作用
let increment = 0

// 1、订阅: listen for different types of events
bus.on('message', handler)
bus.on('message', () => console.log('Message event fired'))
bus.on('increment', () => increment++)

// 2、发布事件: emit events to invoke all handlers subscribed to them, passing the data to them as an argument
bus.emit('message', 'hello world') // logs 'hello world' and 'Message event fired'
bus.emit('message', { hello: 'world' }) // logs the object and 'Message event fired'
bus.emit('increment') // `increment` variable is now 1

// 3、关闭发布跨tab或者小程序不同页面通讯
第一种方式，默认关闭跨tab或者小程序不同页面通讯，针对所有的订阅事件
bus.isTabCross = false

第二种方式，在emit的时候，传递参数，最后一个参数对象`{isCrossTab: boolean}`为是否跨浏览器tab页或者小程序不同页面通讯，默认为true，设置为false，则取消跨浏览器tab页或者小程序不同页面通讯
bus.emit('[时间名称]', { isCrossTab: false })
bus.emit('[时间名称2]', {id: 1}, 1, 2, { isCrossTab: false })  // 最后一个参数是普通对象且属性isCrossTab设置为false即可

第三种方式
bus.on('[时间名称3]', (...args) => {}, {isCrossTab: false})
或
const handler = (...args) => {}
handler.isCrossTab = false
bus.on('[时间名称3]', handler)


// 4、普通方式取消订阅: stop a specific handler from listening to the 'message' event
bus.off('message', handler)

// 5、也可以通过自身返回值，取消事件
const busListener = bus.on('increment', () => increment++)
busListener.off()

// 6、也可以调用方法取消，清除所有副作用，主要为了防止使用者忘记销毁事件订阅，导致内存泄漏
const effects = []
effects.push(
  bus.on('message2001', () => console.log('Message event effects001')),
  bus.on('message2002', () => console.log('Message event effects002'))
)
bus.clearEffects(effects) // 这将会把message2001和message2002监听事件取消

// 7、根据订阅时间名称，取消所有订阅示例
bus.on('messge001', () => {})
bus.on('messge001', () => {})
bus.offEntire('messge001') // ⚠️这里将会取消所有message001 订阅事件


// 跨浏览器tab页或者小程序不同的webview，统一站点下通讯
// 最后一个参数 eventTarget，BroadcastChannel中onmessage事件中 或者 storage事件 回调参数
bus.on('[自定义事件名]', (...args, eventTarget) => {
})

// 8、跨域访问或者iframe通讯
bus.emit('[自定义事件名]', ...args, { isCrossDomain: true }) // 在最后的参数设置 isCrossDomain true，则表示跨域访问或者iframe通讯 

// 方式一
bus.on('[自定义事件名]', () => {}, { isCrossDomain: true })
// 方式二
const handler = (...args) => {}
handler.isCrossDomain = false
bus.on('[自定义事件名]', handler)

:::

2.入参说明

参数	说明	类型	是否必填	默认值

2.1 实例方法说明

方法名	说明	入参
emit	通知	--------
dispatchEvent	等价于 emit	--------
on	订阅事件	--------
addEventListener	等价于 on	--------
off	移除监听事件	--------
removeEventListener	等价于 off	--------
offEntire	移除监听事件【整个】	--------
removeEventListenerEntire	等价于 offEntire	--------
clearEffects	清除监听事件	--------

3.源码

import _helperEventBus from '@/_helper/_helperEventBus'

/**
 * bus事件总线
 * @version v3.0.9+
 * @type {{offEntire(String): void, dispatchEvent(): void, removeEventListener(): void, hub: null, removeListenerEventEntire(): void, emit(String): void, off(String, Function): void, on(String, Function): void, addEventListener(): void}}
 */
const bus = _helperEventBus()

export default bus