eventbus-cjs 基於JavaScript裝飾器（Decorator）實現的通訊庫

zhaofg發表於2019-02-23
JSJavaScript

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`;
複製程式碼

修飾器

屬性方法修飾器
類修飾器

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 專案地址

相關文章