breif-event-bus

a simple library that provides pub/sub services, which can be used in SPA or `little program`

Usage no npm install needed!

<script type="module">
  import breifEventBus from 'https://cdn.skypack.dev/breif-event-bus';
</script>

README

npm npm npm

event-bus

一个简单的event-bus实现,提供最简单的on off trigger once四个api,同时支持类似jq命名空间的事件管理。可应用于单页应用、小程序进行页面之间的通信。

用法

安装:

npm install breif-event-bus --save

浏览器环境,可通过上面的npm命令安装后,到node_modules/breif-event-bus/dist目录下,直接引用index.umd.min.js

注意: 本库用到了一些新的es特性,打包发布到npm时,仅使用babel做了转码,没有做polyfill;如果使用此库,注意做polyfill。

示例:

import EventBus from "breif-event-bus"

let bus = new EventBus 

// 添加单个事件、单个监听
bus.on('some', ()=> {

})

// 为多个事件注册一个监听
bus.on([
    'some',
    'other',
    'else'
], ()=> {

})

// 带命名空间
bus.on('some.n1.n2', ()=> {

})

// 派发事件
bus.trigger('some')

// 派发带命名空间的事件
bus.trigger('some.n1')


// 移除特定的监听
let handler = ()=>{}
bus.on('some', handler)
bus.off('some', handler)

// 带命名空间的移除监听
bus.off('some.n1')

// 根据命名空间来移除事件监听
bus.off('.n1') 

// 注册仅执行一次的监听
bus.once('some', ()=>{}) // on 替换为 once

说明: 命名空间的特性,与jquery相同。

api

只有四个:on off once trigger

on( event, callback )

  • 作用:注册事件监听。
  • 参数:
    • {string | Array} event
    • {Function} callback

once( event, callback )

  • 作用:注册仅执行一次的事件监听。
  • 参数:
    • {string | Array} event
    • {Function} callback

off( event, callback )

  • 作用:移除事件监听。
  • 参数:
    • {string | Array} event
    • {Function} callback

trigger( event )

  • 作用:派发事件。
  • 参数:
    • {string} event

demo

将代码clone到本地,然后运行:

npm install
node server

就能通过demo文件下的文件来测试此库的用法。

补充

为什么有vuex这种专门用来管理单页全局状态的工具,还要用连vue官方都不推荐使用的event-bus模式来做消息同步呢?因为不是每个项目都一定要用vuex,有些应用的模式,并没有那么多全局使用的数据状态,借助一个简单的event-bus工具,就可以轻松完成多页面之间的消息通知;比如说某个应用有一个功能做了微信支付,其它已经打开的页面需要在支付事件完成之后做点什么,那么借助event-bus来完成支付事件的消息传递,其它监听了支付消息的页面,在收到支付事件通知时,可能只需要调用一下自身刷新方法即可。