English
简体中文

• what is EventBus ?
• how to use
  • 1、npm Install dependencies
  • 2、import package
    • Node
    • TypeScript
  • 3、Example of use
    • basic use
    • Send multiple payload parameters
    • once method
    • Cancel event listener
      • Method 1
      • Method 2
  • 4、TypeScript support

what is EventBus ?

The idea of an event-bus may be strange to you，But when if i say the observer (publish-subscribe) pattern, you may be familiar. The event bus is an implementation of the publish-subscribe pattern。If you are a novice and still don't understand, it doesn't matter, you can use addEventListener in DOM for reference

// Binding events in the DOM, click, mouseover, these are all built-in specified event names.
// The first parameter is the name of the event to be bound; the second parameter is a function, which is the subscriber.
// When the dom publishes the click event, the function (subscriber) is called
document.addEventListener('click',()=>{})
 

The expression of the above code in this library

// Subscribing to events is like  document.addEventListener('click',()=>{})
EventBus.on('custom', () => {})
// publish event -> The passed in function will be called
EventBus.emit('custom')

let's start

how to use

1、npm Install dependencies

npm install @onpaper/event-bus

2、import package

Node

Write the following code in the JavaScript file

// es module
import pkg from "@onpaper/event-bus";
const { EventBus } = pkg;

// commonjs
const { EventBus } = require("@onpaper/event-bus");

TypeScript

if you use TypeScript

import { EventBus } from "@onpaper/event-bus";

3、Example of use

basic use

const appleCallBack = (payload) => {
  console.log(payload) // -> appleCallBack
}

// subscription "apple" event
eventBus.on('apple', appleCallBack)
// Send a payload parameter  "appleCallBack"
eventBus.emit('apple', 'appleCallBack')

Send multiple payload parameters

const orangeCallBack = (...payload) => {
  console.log(payload) // -> [ 'orange', 'callBack' ]
}

// subscription orange event
eventBus.on('orange', orangeCallBack)
// send multiple parameters 'orange', 'callBack'
eventBus.emit('orange', 'orange', 'callBack')

once method

Only listen for an event once

// Only listen for an event once
let onlyChangeOne = 0
const bananaCallBack = () => {
  onlyChangeOne++
  console.log('banana')
}
eventBus.once('banana', bananaCallBack)
eventBus.emit('banana') // -> banana 
eventBus.emit('banana') // -> no function call
console.log('onlyChangeOne')  // ->  1

Cancel event listener

Method 1

Call the off method

// cancel listening example
let onlyAddOne = 0
const strawberryCallBack1 = () => {
  console.log('strawberryCallBack1')
  onlyAddOne++
}
const strawberryCallBack2 = () => {
  console.log('strawberryCallBack2')  // no console.log
  onlyAddOne++
}
eventBus.on('strawberry', strawberryCallBack1)
eventBus.on('strawberry', strawberryCallBack2)

// Pass in cancel event and previously subscribed function
eventBus.off('strawberry', strawberryCallBack1)

eventBus.emit('strawberry')

// strawberryCallBack2 no call
console.log(onlyAddOne) // 1

Method 2

Use the cancel function returned by the on method

// cancel listening example
let onlyAddOne = 0
const strawberryCallBack1 = () => {
  console.log('strawberryCallBack1')
  onlyAddOne++
}
const strawberryCallBack2 = () => {
  console.log('strawberryCallBack2')  // no console.log
  onlyAddOne++
}

// on method return cancel function
const offStrawberry1 = eventBus.on('strawberry', strawberryCallBack1)
eventBus.on('strawberry', strawberryCallBack2)

// Call the cancel function to cancel the listening event
offStrawberry1()

eventBus.emit('strawberry')
console.log(onlyAddOne) // 1

4、TypeScript support

//Define the event name to get better type hints
type evenName = 'apple' | 'orange' | 'banana' | 'strawberry'

const eventBus = new EventBus<evenName>()

// The first parameter event name must be defined by evenName
// There will be hints here
eventBus.on("", ()=>{})
eventBus.ones("", ()=>{})
eventBus.emit("", ()=>{})
eventBus.off("", ()=>{})

enjoy it~