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 項目地址