Angular之打造自己的事件總線

一 : EventMessage.ts (事件消息)

// module Aonaufly.event{
    import {EventDispatch} from "./EventDispatch";

/**
     *
     */
    export class EventMessage<DATA> {
        private _type : string = null;
        private _data : DATA = null;
        private _dispacther : EventDispatch = null;
        public constructor( $type : string , $data : DATA , $dispatcher : EventDispatch ){
            this._type = $type;
            this._data = $data;
            this._dispacther = $dispatcher;
        }
        public get type( ) : string{
            return this._type;
        }
        public get data( ) : DATA{
            return this._data;
        }
        public get dispatcher() : EventDispatch{
            return this._dispacther;
        }
    }
// }

其中DATA泛型為 , 傳遞數據的類型.

二 : EventDispatch.ts (發送事件消息 , 注冊事件偵聽 , 移除事件偵聽)

// module Aonaufly.event{
    import {EventMessage} from "./EventMessage";

export class EventDispatch{
        private _list_listener : Array< I_EventDispatch_Callback<any,any> > = null;
        public constructor(){
            this._list_listener = [];
        }
        public dispatch<DATA>( $event : EventMessage<DATA> ) : void{
            let $arr : Array< I_ARR_LISTENERS< DATA , any> > = this.getEventListener( $event.type );
            if( $arr && $arr.length > 0 ){
                let $cell : I_ARR_LISTENERS< DATA  , any> = null;
                for( let $i : number = 0 , $j : number = $arr.length ; $i < $j ; $i ++ ){
                    $cell = $arr[$i];
                    $cell.$callback.call( $cell.$listener , $event );
                }
            }
        }

        public addEventListener<DATA>( $type : string , $callBack : ( $e : EventMessage<DATA> ) => void , $caller : any  ) : void{
            if( !this.hasEventListener( $type , $caller ) ){
                let $arr : Array< I_ARR_LISTENERS< DATA , any> > = this.getEventListener( $type );
                let $listener : I_ARR_LISTENERS< DATA , any> = {
                    $callback : $callBack,
                    $listener : $caller
                };
                if( $arr ){
                    $arr.push( $listener );
                }else{
                    let $data : I_EventDispatch_Callback<DATA , any> = {
                        $type : $type,
                        $listeners : [ $listener ]
                    };
                    this._list_listener.push( $data );
                }
            }
        }

        public removeEventListener<DATA>( $type : string , $callBack : ( $e : EventMessage<DATA> ) => void , $caller : any ) : void{
            if( this.hasEventListener( $type , $caller ) ){
                let $arr : Array< I_ARR_LISTENERS< DATA , any> > = this.getEventListener( $type );
                let $cell : I_ARR_LISTENERS< DATA , any> = null;
                for( let $i : number = 0 , $j : number = $arr.length ; $i < $j ; $i ++ ){
                    $cell = $arr[$i];
                    if( $cell.$listener == $caller ){
                        $arr.splice( $i , 1 );
                        if( $arr.length == 0 ){
                            let $dis : I_EventDispatch_Callback< DATA , any> = null;
                            for( let $n : number , $m : number = this._list_listener.length ; $n < $m ; $n ++ ){
                                $dis = this._list_listener[$n];
                                if( $dis.$type == $type ){
                                    this._list_listener.splice( $n , 1 );
                                    break;
                                }
                            }
                        }
                        break;
                    }
                }
            }
        }

        private getEventListener<DATA>( $type : string ) : Array< I_ARR_LISTENERS< DATA , any> >{
            if( this._list_listener.length > 0 ){
                let $cell : I_EventDispatch_Callback<DATA , any> = null;
                for( let $i : number = 0 , $j : number = this._list_listener.length ; $i < $j ; $i ++ ){
                    $cell = this._list_listener[$i];
                    if( $cell.$type == $type ){
                        return $cell.$listeners;
                    }
                }
            }
            return null;
        }

        public hasEventListener( $type : string , $caller : any ) : boolean{
            if( this._list_listener.length > 0 ){
                let $cell : I_EventDispatch_Callback<any , any> = null;
                for( let $i : number = 0 , $j : number = this._list_listener.length ; $i < $j ; $i ++ ){
                    $cell = this._list_listener[$i];
                    if( $cell.$type == $type && $cell.$listeners && $cell.$listeners.length > 0){
                        let $cell_2_listener : I_ARR_LISTENERS< any , any> = null;
                        for( let $n : number = 0 , $m : number = $cell.$listeners.length ; $n < $m ; $n ++ ){
                            $cell_2_listener = $cell.$listeners[$n];
                            if( $cell_2_listener.$listener == $caller ){
                                return true;
                            }
                        }
                    }
                }
            }
            return false;
        }
                public destroy() : void{
            this._list_listener = null;
        }
    }

    export interface I_EventDispatch_Callback< DATA , LISTENER>{
        $type : string;
        $listeners : Array< I_ARR_LISTENERS< DATA , LISTENER> >;
    }
    export interface I_ARR_LISTENERS< DATA , LISTENER>{
        $callback : ( $e : EventMessage<DATA> ) => void;
        $listener : LISTENER;
    }
// }

三 : 測試

① , UserVo.ts (繼承自EventDispatch.ts)

import {EventDispatch} from "../lib/EventDispatch";
import {EventMessage} from "../lib/EventMessage";

export class UserVo extends EventDispatch{
    private name : string = "Aonaufly";

    public change( $name : string ): void{
        this.name = $name;
        let $event : EventMessage<string> = new EventMessage( "NAME_CHANGE" , this.name , this );
        this.dispatch<string>( $event );
    }
}

使用dispatch發送事件消息.
② , 監聽事件

③ , 結果