ts中的事件傳遞


在ts中并闲,我們也需要一個(gè)通用的事件傳遞機(jī)制细睡,類(lèi)似于android中的eventBus,當(dāng)然這個(gè)在ts中實(shí)現(xiàn)起來(lái)是很簡(jiǎn)單的帝火。

代碼如下:
核心類(lèi)溜徙,處理事件的核心/。

/**
 * 觀察者
 */

namespace T {

    export class Observer {
        /** 回調(diào)函數(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;
        }
    }
}

下面是的整個(gè)事件的處理中心犀填。


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

namespace T{

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

        private static instance = null;

        public static getInst(): EventCenter {
            if(!this.instance || this.instance == null) {
                this.instance = new EventCenter();
            }
            return this.instance;
        }
        /** 
         * 注冊(cè)事件
         * @param name 事件名稱(chēng)
         * @param callback 回調(diào)函數(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 事件名稱(chēng)
         * @param callback 回調(diào)函數(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 事件名稱(chēng)
         */
        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);
            }
        }
    }
}

使用起來(lái)也很簡(jiǎn)單蠢壹,使用示例代碼如下:
事件的監(jiān)聽(tīng)

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

發(fā)送消息

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

打包成js

當(dāng)然我們可以選擇將其打包成js九巡,操作也很簡(jiǎn)單图贸,在項(xiàng)目的更目錄下添加tsconfig.json的ts項(xiàng)目工程配置文件,示例的代碼如下:

{
    "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.

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末冕广,一起剝皮案震驚了整個(gè)濱河市疏日,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌撒汉,老刑警劉巖沟优,帶你破解...
    沈念sama閱讀 219,039評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異睬辐,居然都是意外死亡挠阁,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)溯饵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)侵俗,“玉大人,你說(shuō)我怎么就攤上這事丰刊“ィ” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,417評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵啄巧,是天一觀的道長(zhǎng)洪橘。 經(jīng)常有香客問(wèn)我,道長(zhǎng)棵帽,這世上最難降的妖魔是什么熄求? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,868評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮逗概,結(jié)果婚禮上弟晚,老公的妹妹穿的比我還像新娘。我一直安慰自己逾苫,他們只是感情好卿城,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著铅搓,像睡著了一般瑟押。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上星掰,一...
    開(kāi)封第一講書(shū)人閱讀 51,692評(píng)論 1 305
  • 那天多望,我揣著相機(jī)與錄音嫩舟,去河邊找鬼。 笑死怀偷,一個(gè)胖子當(dāng)著我的面吹牛家厌,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播椎工,決...
    沈念sama閱讀 40,416評(píng)論 3 419
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼饭于,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了维蒙?” 一聲冷哼從身側(cè)響起掰吕,我...
    開(kāi)封第一講書(shū)人閱讀 39,326評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎颅痊,沒(méi)想到半個(gè)月后殖熟,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,782評(píng)論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡八千,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評(píng)論 3 337
  • 正文 我和宋清朗相戀三年吗讶,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片恋捆。...
    茶點(diǎn)故事閱讀 40,102評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡照皆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出沸停,到底是詐尸還是另有隱情膜毁,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評(píng)論 5 346
  • 正文 年R本政府宣布愤钾,位于F島的核電站瘟滨,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏能颁。R本人自食惡果不足惜杂瘸,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望伙菊。 院中可真熱鬧败玉,春花似錦、人聲如沸镜硕。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,996評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)兴枯。三九已至血淌,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間财剖,已是汗流浹背悠夯。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,113評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工癌淮, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人疗疟。 一個(gè)月前我還...
    沈念sama閱讀 48,332評(píng)論 3 373
  • 正文 我出身青樓该默,卻偏偏與公主長(zhǎng)得像瞳氓,于是被迫代替她去往敵國(guó)和親策彤。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 為T(mén)ypeScript引用的JS寫(xiě)聲明文件 寫(xiě)TypeScript聲明文件的時(shí)候會(huì)有三個(gè)困惑匣摘,一個(gè)是聲明文件是什么...
    心淡然如水閱讀 25,243評(píng)論 1 2
  • core package 概要:Core是所有其他包的基礎(chǔ)包.它提供了大部分功能包括metadata店诗,templa...
    LOVE小狼閱讀 2,580評(píng)論 0 3
  • 0. 寫(xiě)在前面 當(dāng)你開(kāi)始工作時(shí),你不是在給你自己寫(xiě)代碼音榜,而是為后來(lái)人寫(xiě)代碼庞瘸。 —— Nichloas C. Zak...
    康斌閱讀 5,326評(píng)論 1 42
  • 語(yǔ)堂說(shuō):“我們不是這個(gè)塵世的永久房客,而是過(guò)路的旅客赠叼〔聊遥”這真是一語(yǔ)道破天機(jī)。 我們只是在路上嘴办,或在路上奔跑瞬场,或在...
    小船兒yz閱讀 213評(píng)論 0 0
  • 圖片發(fā)自簡(jiǎn)書(shū)App 01 “完成這個(gè)工作任務(wù)妆艘,你用了多長(zhǎng)時(shí)間彤灶?”部門(mén)主管問(wèn)新來(lái)的同事小羅。 “兩三個(gè)小時(shí)吧批旺』仙拢”小羅...
    小劇在成長(zhǎng)閱讀 356評(píng)論 0 5