ts中的事件傳遞


在ts中,我們也需要一個通用的事件傳遞機制,類似于android中的eventBus,當然這個在ts中實現(xiàn)起來是很簡單的。

代碼如下:
核心類,處理事件的核心/。

/**
 * 觀察者
 */

namespace T {

    export class Observer {
        /** 回調函數(shù) */
        private callback: Function = null;
        /** 上下文 */
        private context: any = null;

        constructor(callback: Function, context: any) {
            let self = this;
            self.callback = callback;
            self.context = context;
        }

        /**
         * 發(fā)送通知
         * @param args 不定參數(shù)
         */
        notify(...args: any[]): void {
            let self = this;
            self.callback.call(self.context, ...args);
        }

        /**
         * 上下文比較
         * @param context 上下文
         */
        compar(context: any): boolean {
            return context == this.context;
        }
    }
}

下面是的整個事件的處理中心。


/**
 * 事件消息處理
 */

namespace T{

    export class EventCenter {
        /** 監(jiān)聽數(shù)組 */
        private listeners = {};

        private static instance = null;

        public static getInst(): EventCenter {
            if(!this.instance || this.instance == null) {
                this.instance = new EventCenter();
            }
            return this.instance;
        }
        /** 
         * 注冊事件
         * @param name 事件名稱
         * @param callback 回調函數(shù)
         * @param context 上下文
         */
        public register(name: string, callback: Function, context: any) {
            let observers: Observer[] = this.listeners[name];
            if (!observers) {
                this.listeners[name] = [];
            }
            this.listeners[name].push(new Observer(callback, context));
        }

        /**
         * 移除事件
         * @param name 事件名稱
         * @param callback 回調函數(shù)
         * @param context 上下文
         */
        public removeListener(name: string, context: any) {
            let observers: Observer[] = this.listeners[name];
            if (!observers) return;
            let length = observers.length;
            for (let i = 0; i < length; i++) {
                let observer = observers[i];
                if (observer.compar(context)) {
                    observers.splice(i, 1);
                    break;
                }
            }
            if (observers.length == 0) {
                delete this.listeners[name];
            }
        }

        /**
         * 發(fā)送事件
         * @param name 事件名稱
         */
        public fire(name: string, ...args: any[]) {
            let observers: Observer[] = this.listeners[name];
            if (!observers) return;
            let length = observers.length;
            for (let i = 0; i < length; i++) {
                let observer = observers[i];
                observer.notify(name, ...args);
            }
        }
    }
}

使用起來也很簡單,使用示例代碼如下:
事件的監(jiān)聽

T.EventCenter.getInst().register("test", ()=>{
    //dosomthing()
},this);
// 注意,需要在和removeListener成對使用
T.EventCenter.getInst().removeListener("test",this);

發(fā)送消息

T.EventCenter.getInst().fire("test");

打包成js

當然我們可以選擇將其打包成js,操作也很簡單,在項目的更目錄下添加tsconfig.json的ts項目工程配置文件,示例的代碼如下:

{
    "compilerOptions": {
        "target": "es5",
        "noImplicitAny": false,
        "lib": [
            "dom",
            "es5",
            "es6",
            "es2015.promise"
        ],

        "removeComments": true,
        "sourceMap": false,
        "declaration": true,
        "outFile": "bin/eventBus.js"
    },
    "include": [
        "src/*.ts",
        "libs/*.d.ts"
    ],
    "exclude": [
        "node_modules",
        "library",
        "local",
        "temp",
        "build",
        "settings"
    ]
}

詳情參考官網(wǎng)https://www.tslang.cn/docs/handbook/tsconfig-json.html.

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容