eventbus-cjs 基于JavaScript装饰器（Decorator）实现的通讯库

eventbus-cjs

eventbus-cjs 是一个基于JavaScript装饰器（Decorator）实现的通讯库, 支持Vue / React等经常使用框架, 支持node.js

使用方法

1. 安装

npm i eventbus-cjs --save
复制代码

Babel 转码器的支持

安装 babel-plugin-transform-decorators-legacy

npm i babel-plugin-transform-decorators-legacy -D
复制代码

配置 .babelrc 文件

"plugins": ["transform-decorators-legacy"]
复制代码

若是是使用 create-react-app 建立的项目，须要先弹出 webpack 配置

npm run eject
复制代码

安装 babel-plugin-transform-decorators-legacy，在 package.json 中配置 babel

"babel": {
    "presets": [
        "react-app"
    ],
    "plugins": [
        "transform-decorators-legacy"
    ]
  }
复制代码

vue-cli 3.x 以默认支持 Decorator。

2. 引入 eventbus-cjs

import { on, once, emit } from 'eventbus-cjs';
复制代码

修饰器

属性方法修饰器

• @on
• @once
• @emit
• @remove
• @register
• @unregister

类修饰器

• @register

3. 使用

@emit

发送消息

@emit('event_a')
send(msg) {
    return 'send ' + msg;
};
复制代码

@on

监听消息， 注意在Vue属性方法上监听，vue.methods中的方法没法监听

@on('event_a')
onMessageA(msg) {
   
};
// vue
@register
created(){
    
},
@on('event_a')
onMessage(msg){
    // 和生命周期函数类似的 this
}
复制代码

@once

监听消息，只执行一次, 注意在Vue属性方法上监听，vue.methods中的方法没法监听

@once('event_once')
onmessage(msg) {
    console.log(msg);
};
复制代码

@remove

移除当前对象监听的事件

@remove('event_a', 'event_b')('onMessageA')
// @remove('event_a', 'event_b')('onMessageA', 'onMessageB')
// @remove('event_a', 'event_b')(['onMessageA1', 'onMessageA2'])
// @remove('event_a', 'event_b')(['onMessageA1', 'onMessageA2'], 'onMessageB')
// @remove('event_a', 'event_b')()
// @remove()() //释放掉当前对象所监听的全部事件，等同于 @unregister
componentWillUnmount() {
    
}
复制代码

@register

@register 和 @unregisster 最好同时配置

Vue中必须进行注册才能正确监听消息，需在生命周期方法上注册，越早越好

// react
@register
class MyComponent extends Component{

}

// vue
export default {
    @register
    created() {

    }
}
复制代码

经过@register修饰的对象能够直接经过 this.$emitter 对象发送、接收消息

this.$emiiter.emit(eventName, msg);
this.$emiiter.on(eventName, function(){
    // receive messages
})
复制代码

@unregister

释放掉当前对象所监听的全部事件

@unregister
componentWillUnmount() {
    
}
复制代码

欢迎大佬们吐槽。

github 项目地址