链式事件流轻量级迷你 JS 库 - hubJS

相信大家都听说过 RxJS，它无疑是优秀响应式编程库，让开发者在很多事件驱动的 “流” 中随心所欲地为所欲为。

但实际到最近几次项目开发中，暴露了一些开发以外的问题。

首先想到就是对团队开发者的学习路线比较陡峭，特别是对一些前端新人，上手较为难，无法即拿即用。

另外就是功能真的太强大了，如果整个使用的话，带来冗余颇大，如果个别功能自行引入使用的话，也就意味着开发者需要熟悉其 API 封装。

而一些中小型项目，例如就像 Vue 非父子组件通讯，除了使用 “BUS” 概念之外，响应式编程的介入也是个不错的选择，但需要一个简单而轻便的库去支持。

于是封装了一个简单上手 事件流驱动的迷你 JS 库 - hubJS。

开源 Github 地址是 github/yyued/hub.js。

未进行 gzip 体积仅仅 6k，在实际几个项目上使用得到了不错的效果 : )

可以通过 npm 进行安装

npm i hub-js --save

或者 直接 下载 min 版本，然后外链使用

<script src="./hub.min.js"></script>

✅ 简单用法

import $hub from 'hub-js';

// 注册监听 “test” 的监听器
$hub.listen('test', ( data ) => {
    console.log( 'test', data );
});

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

通过 “listen” 监听特有标识的事件流，而自由地在任何模块内部上使用通过 “emit” 去触发后，都能捕捉到。
这样类似于订阅者的模式行为，不仅更好地解决 非父子组件通讯 这类的问题，也相当于 “集线器” 一样，把所有在全局各个模块相互通讯 “流” 集中管理。

✅ DOM 原生事件流

// 绑定 DOM 事件流 
const dispatcher = $hub.DOM( document.body )
                       .from('click').emit('dom-click-event')
                       .from('mousedown').emit('dom-mousedown-event-1').emit('dom-mousedown-event-2');

// 监听 DOM 事件流
$hub.listen('dom-click-event', ( e ) => {
    console.log( 'button click', e );
})
$hub.listen('dom-mousedown-event-1', ( e ) => {
    console.log( 'button mousedown 1', e );
})
$hub.listen('dom-mousedown-event-2', ( e ) => {
    console.log( 'button mousedown 2', e );
})

setTimeout(( ) => {
    // 移除 DOM 监听事件，停止 发送事件流
    dispatcher.remove();
}, 10000);

除了通过自动去 “emit” 发出事件源之外，还支持捕捉来自于页面 DOM 元素发出的事件。

例如，在项目中我们经常使用 下拉菜单 这类控件，而这类控件的菜单正在显示时，如果点击了其他除了菜单以外的页面元素后，菜单需要收起来。

这时控件就需要拿到各种 DOM 元素点击的事件流，去判断点击是否发生在控件的内部。

通过使用 hubJS 订阅冒泡到 body 的点击事件，然后在控件内部简单地订阅这样的事件流，从中拿到 target 去进行判断，就无需在每个这样控件的内部不断地去 addEventListener、removeEventListener。

✅ 监听缓存值

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

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

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

除了发送订阅事件流之外，我们还加入了 “store” 的仓库对象，方便开发者存放一些值。

通过 Proxy 代理了 store 对象，在其属性的属性值发生改变时，产生事件触发订阅者，一种类似于双向绑定的行为模式。

✅ 使用转换器 & 自由组合链式

// 注册转换器
$hub.converter.DOMEventFormat1 = function ( e ) {
    return [ e.type, e.target ];
}
$hub.converter.DOMEventFormat2 = function ( e ) {
    new Promise(( resolve, reject ) => {
        setTimeout(( ) => {
            resolve( [ e.target, e.type ] );
        }, 2000);
    });
}

// 可以通过自由组合 链式 衔接的顺序，进行对流的控制，从而达到你想要的效果
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')

// 监听 DOM 事件流
$hub.listen('dom-click-event', ( e ) => {
    console.log( 'button click', e );
})
$hub.listen('dom-mousedown-event', ( e ) => {
    console.log( 'button mousedown', e );
})

而对于这些 “流” 带过来的数据，怎样进行处理呢？于是便有了 converter 转换器的想法。
通过 converter 注册一些特有逻辑转换器，可以把事件流所传递过来的数据值进行加工转换。converter 还有一个特性就是它支持 Promise 返回，若返回的是一个 Promise 对象，需要成功 resolve 后才能流向链式的下一环。

另外更加可以通过不同的链式调用顺序去达到自由组合处理事件流的效果。

✅ 使用链式通道

// 注册一个链式通道
$hub.chain('test').pipe(
   // 支持 Promise 阻塞
   ( d ) => new Promise( ( resolve ) => setTimeout( () => resolve( d + 1 ), 2000 ) ),
   ( d ) => d + 2,
   ( d ) => d + 3,
).pipe(
   ( d ) => d + 3,
);

// 监听链式通道回调
$hub.listen('@chain/test', ( d ) => {
    console.log( d ); // 10
})

// 触发
$hub.emit( '@chain/test', 1 ); 

对于复杂的数据处理逻辑，或者责任链等逻辑的处理，我们使用 “链式通道” 的想法去一步步地对事件流数据进行细化，在通道中，同样支持 Promise，也只有成功 resolve 后才能在通道中流向下个处理函数。

除了上述几种使用方式之外，hubJS 还支持 Fetch / WebSocket / http://socket.io 等多种事件源， 支持到多种不一样的使用场景，欢迎大家使用并提出 issues。

感谢阅读。