Flow Hub

npm i flowhub --save

<script src="https://cdn.jsdelivr.net/npm/flowhub/dist/flowhub.min.js"></script>

import $hub from 'flowhub';

// 注册监听者
$hub.on('test', data => console.log('test', data))

setInterval(() => {
  // 发送 'test' 事件
  $hub.emit('test', { code: 1 })
}, 1000)

const listener = $hub.on('test', data => console.log(data))

$hub.emit('test', { code: 1 })

listener.off()
// 或者
// $hub.off('test', listener)

$hub.emit('test', { code: 2 })

const listener = $hub.once('test', data => console.log(data))

$hub.emit('test', { code: 1 })

$hub.emit('test', { code: 2 })

const listener = $hub.on(['test', 'test-1', 'test-2'], data => console.log(data))

$hub.emit(['test', 'test-1', 'test-2'], { code: 1 })

listener.off()
// 或者
// $hub.off(['test', 'test-1' ], listener)

$hub.emit(['test', 'test-1', 'test-2'], { code: 2 })

// 设置 store 值
$hub.store.code = 1

// 监听 store 里具体 某个数值
// 若 这个数值已存在 “当前值”，则监听成功后，立即返回 “当前值”，就像 Rx.BehaviorSubject
$hub.on('@store/code', data => console.log('store code', data))

setInterval(() => {
    ++$hub.store.code
    // 或者
    // $hub.emit('@store/code', 1)
}, 1000)

const dispatcher = $hub.DOM('button')
                        .from('click')
                        .emit('dom-click-event')
                        .from('mousedown')
                        .emit('dom-mousedown-event')

$hub.on('dom-click-event', event => console.log('button click', event))

$hub.on('dom-mousedown-event', event => console.log('button mousedown', event))

setTimeout(dispatcher.off, 10000)

const dispatcher = $hub.Fetch('https://xxxxx')
                        .emit('fetch-event1')
                        .emit('fetch-event2')

setTimeout(dispatcher.reload, 2000)

$hub.on('fetch-event1', result => console.log('fetch1', result))

$hub.on('fetch-event2', result => console.log('fetch2', result))

const dispatcher = $hub.WS('ws://xxxxx')
                        .emit('ws-event1')
                        .emit('ws-event2')

$hub.on('ws-event1', result => console.log('ws1: ', result))
$hub.on('ws-event2', result => console.log('ws2: ', result))

setTimeout(dispatcher.off, 3000)

<script src="./lib/socket.io.min.js"></script>

<script>
const dispatcher = $hub.IO('http://xxxxx')
                        .from('mock')
                        .emit('io-event')

dispatcher.socket.emit('mock', { key: 'xxxxx' })

$hub.on('io-event', result => console.log('io:', result))

setTimeout(dispatcher.off, 3000)
</script>

$hub.chain('test')
        .pipe(
          d => new Promise(resolve => setTimeout(() => resolve(d + 1), 2000)),
          d => d + 2,
          d => d + 3
        )
        .pipe(d => d + 3)

$hub.on('@chain/test', d => console.log(d))

$hub.emit('@chain/test', 1) // 10

// 注册转换器
$hub.converter.DOMEventFormat1 = function (event) {
  return [event.type, event.target]
}
$hub.converter.DOMEventFormat2 = function (event) {
  return [e.target, e.type]
}

// 可以通过自由组合 链式 衔接的顺序，进行对流的控制，从而达到你想要的效果
const dispatcher = $hub.DOM('button')
                        .from('click')
                        .convert('DOMEventFormat1')
                        .emit('dom-click-event')
                        .from('mousedown')
                        .convert('DOMEventFormat1')
                        .emit('dom-mousedown-event')
// 或者
// $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' )

// 其他
// $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.on('dom-click-event', event => console.log('button click', event))

$hub.on('dom-mousedown-event', event => console.log('button mousedown', event))

setTimeout(dispatcher.off, 10000)