hub.js
Why
hub.js is more simpler and lightweight (gzip 2kb). It satisfies most of the situation event-driven situation, suitable for dealing with a variety of event streams.
For frameworks of component systems, such as React, Vue.js, etc., communication between non parent and child components is a bothering thing, but it can be made easy by using hub.js.
Installing
npm i hub-js --save
or
Simple Usage
; // register an event listener$hub
More
Remove listener
const listener = $hub $hub listener// or// $hub.off('test', listener) $hub
once
const listener = $hub $hub $hub
Multiple
const listener = $hub $hub listener// or// $hub.off([ 'test', 'test-1' ], listener) $hub
Note that, the listener receives each time the adapted event source occurs. For example, the above example will produce three logs.
Proxy Store
// set store value$hubstorecode = 1 // listen store value// if this value already has a "current value," the listener immediately returns the "current value," just as Rx.BehaviorSubject$hub
DOM Element
const dispatcher = $hub $hub$hub
Fetch
const dispatcher = $hub $hub$hub
WebSocket
const dispatcher = $hub $hub$hub
socket.io
Chain Pipe
$hub $hub $hub // 10
Chaining & Converter
// register converter$hubconverter { return etype etarget}$hubconverter { return etarget etype} // you can control the convection by free combination of chaining, so as to get the effect you want.const dispatcher = $hub // or// $hub.DOM('button').from('click').convert('DOMEventFormat1').emit('dom-click-event1').emit('dom-click-event2')// $hub.DOM('button').from('click').convert('DOMEventFormat1').convert('DOMEventFormat2').emit('dom-click-event1') // other// $hub.Fetch('https://xxx').emit('e1').convert('converter').emit('e2')// $hub.WS('ws://xxx').emit('e1').convert('converter').emit('e2')// $hub.IO('https://xxx').from('x1').convert('converter').emit('e1').from('x2').emit('e1') $hub $hub