使用typescript 寫一個簡單的事件監聽/發布訂閱模式的類

我們需要弄清楚，觀察者模式和發布訂閱模式是不一樣的，一張圖理解：

兩者區別：

　　1. 觀察者 模式只有觀察者和被觀察者兩者，是松耦合

　　2. 發布訂閱模式除了發布者和訂閱者外，還有一個調度中心，是解耦的，兩者沒有直接關系

　　3. 觀察者主要是同步方式實現，二發布訂閱模式多數是異步實現，比如消息隊列

用typescript 簡單實現一個發布訂閱模式的類

class byEvent {
    Events: { [key: string]: Array<Function> } //約束示例:{"eventName":[function(){},function(){},.....],......}
    constructor() {
        this.Events = {}
    }
    /**
     * 發布/ 觸發
     * @param eventName 
     * @param args 
     */
    emit(eventName: string, ...args: any) {
        let callbackList = this.Events[eventName] || [];
        callbackList.forEach(fn => fn.apply(this, args))
        return this;
        // 如果用js寫，遍歷的時候要做一下判斷是否是函數，ts 用類型約束，在調用或者編譯階段會檢測是否合法
        // callbackList.map(fn=>{
        //     if(typeof fn==="function") fn.apply(this,args)
        // })
    }
    /**
     * 訂閱/監聽
     * @param eventName 
     * @param callback 
     */
    on(eventName: string, callback?: Function) {
        // if(!eventName||typeof eventName !=="string") return  ；// 因為用了ts 寫，所以這句不用寫了，如果是js寫，建議加這判斷
        let callbackList = this.Events[eventName] || [];
        callback && callbackList.push(callback)
        this.Events[eventName] = callbackList
        return this;

    }
    /**
     * 只訂閱一次/監聽一次：
     * 思路：
     * 1. 重新包裝一個回調函數(有名的)，進行注冊訂閱/監聽,
     * 2. 包裝函數里面直接調用 once方法的第二個參數回調函數，然后調用off方法 卸載該包裝函數
     * @param eventName 
     * @param callback 
     */
    once(eventName: string, callback?: Function) {
        // if(!eventName||typeof eventName !=="string") return ；
        let decor = (...args: any[]) => {
            callback && callback.apply(this, args)
            this.off(eventName, decor)
        }
        this.on(eventName, decor)
        return this;

    }
    /**
     * 卸載/取消 某一個回調監聽(不是取消eventName的所有回調監聽),主要配合once一起,實例單獨調用,無意義
     * @param eventName 
     * @param callback 
     */
    off(eventName: string, callback: Function) {
        let callbackList = this.Events[eventName] || [];
        let resCallbacks = callbackList.filter(fn => fn !== callback)
        this.Events[eventName] = resCallbacks
        return this;

    }
    /**
     * 卸載/取消 指定eventName 的所有訂閱/監聽
     * @param eventName 
     * @param callback 
     */
    remove(eventName: string, callback?: Function) {
        this.Events[eventName] = [];
        callback && callback()
        return this;

    }

}

// 使用示例
let o = new byEvent()
setInterval(() => {
    o.emit("name", 123)
    o.emit("name", 10, 20)
    o.emit("post", { name: 1212 }, "post")

}, 1000);
setTimeout(() => {
    o.remove("name", function () {
        console.log("remove")
    })
}, 3000)
o.once("name", function (...res: any[]) {
    console.log("once-name1", res)
})
o.on("name", function (...res: any[]) {
    console.log("on-name2", res)
})
o.on("post", function (...res: any[]) {
    console.log("on-post", res)
}