自己动手做一个eventHub!【原创】
好久没上CNode了,今天上来就来点干货吧 经常使用Vue的同学坑定知道eventBus吧,在一般的组件通信中使用这种方式还是很方便的。 下面分享一下我自己使用原生JS实现的一个eventHub,欢迎围观。。。 (唯一需要依赖的是lodash的map,不过也可以不用,喜欢的可以改造一下)
code:
// 使用原生JS实现事件消息通知类
// author: Victor - https://github.com/biggerV/something
// lodash is required
// class eventHub
(function(){
function eventHub() {
this.regEvents = []
this.listenEvents = []
this._trigerOnEvent = function (event){
const that = this
_.map(that.listenEvents, function(listenEventItem) {
if(listenEventItem.event === event){
_.map(that.regEvents, function(regEventItem) {
if(regEventItem.event === event){
listenEventItem.cb(regEventItem.msg)
}
})
}
})
}
this._hasEvent = function(events, event){
let flag = false
_.map(events, function(item){
if(item.event === event){
flag = true
}
})
return flag
}
}
eventHub.prototype.$emit = function (event, msg) {
if ( !this._hasEvent(this.regEvents, event) ){
this.regEvents.push({ event, msg})
}
this._trigerOnEvent(event)
}
eventHub.prototype.$on = function (event, cb) {
if ( !this._hasEvent(this.listenEvents, event) ){
this.listenEvents.push({ event, cb})
}
}
//export
if(typeof exports === 'object'){
modules.exports = eventHub
}
if(typeof window === 'object'){
window.eventHub = eventHub
}
})()
// try it now
var eventBus = new eventHub
// emit
function sayHi(){
eventBus.$emit('say', 'hi')
}
function shout(){
eventBus.$emit('shout', 'oh my god')
}
function showMyName(){
eventBus.$emit('showMyName', {name: 'victor'})
}
// listen
eventBus.$on('shout', msg => alert(msg))
eventBus.$on('say', msg => alert(msg))
eventBus.$on('showMyName', msg => alert(msg.name))
<button onClick='sayHi()'>sayHi</button>
<button onClick='shout()'>shout</button>
<button onClick='showMyName()'>showMyName</button>
去Codepen查看效果 github OK,除了测试的代码,主代码其实不多。 主要就是注册、监听。写的如果不好请大家改正。
吐槽一下,变量命名果然是个大坑,最后还是中式英语。。。
看了不留言,JJ被扯断