TypeScript 디자인 모드 의 관찰자 모드

오늘 은 TypeScript 디자인 모델 의 관찰자 모델 을 배 워 보 겠 습 니 다!
관찰자 모드: 관찰자 모드 에서 대상 간 의 다 중 의존 관 계 를 정의 합 니 다. 한 대상 의 상태 가 바 뀌 었 을 때 그 대상 에 의존 하 는 대상 은 모두 통 지 를 받 고 자동 으로 업 데 이 트 됩 니 다.
관찰자 모드 의 구조
  • 클 라 이언 트: 클 라 이언 트
  • 제목: 알림
  • Observer: 관찰자
  • 관찰자 모드 의 장단 점
    이익:
  • 관찰자 와 피 관찰 자 는 추상 적 인 결합 이다.
  • 트리거 메커니즘 을 구축한다.

  • 폐단:
  • 피 관찰자 대상 에 직접적 이 고 간접 적 인 관찰자 가 많다 면 모든 관찰 자 를 통지 하 는 데 많은 시간 이 걸 릴 것 이다.
  • 관찰자 와 관찰자 의 목표 사이 에 순환 의존 이 있 으 면 관찰 목 표 는 그들 사이 에 순환 호출 을 촉발 하여 시스템 붕 괴 를 초래 할 수 있다.

  • 다음 에는 말 을 많이 하지 않 고 바로 코드 를 올 립 니 다.
    관찰 모드 에 대한 예
    다음 의 예 는 제 가 최근 에 발견 한 Typescript 이벤트 알림 체제 입 니 다. 사용 하 는 모델 은 관찰자 모드 입 니 다.
    
    
    /**
     * s  
     */
    class Events {
        //    
        private static listeners = {};
    
        /**
         *     
         * @param name     
         * @param callback     
         * @param context    
         */
        public static register(name: string, callback: Function, context: any) {
            let observers: Observer[] = Events.listeners[name];
            if (!observers) {
                Events.listeners[name] = [];
            }
            Events.listeners[name].push(new Observer(callback, context));
        }
    
        /**
         *     
         * @param name     
         * @param callback     
         * @param context    
         */
        public static remove(name: string, callback: Function, context: any) {
            let observers: Observer[] = Events.listeners[name];
            if (!observers) {
                return "remove";
            }
            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 Events.listeners[name];
            }
        }
    
        public static emit(name: string, ...args: any[]) {
            let observers: Observer[] = Events.listeners[name];
            if (!observers) {
                return "emit";
            }
            let length = observers.length;
            for (let i = 0; i < length; i++) {
                let observer = observers[i];
                observer.notify(name, ...args);
                
            }
        }
    }
    
    //   
    class Observer {
        //    
        private callback: Function = null;
        //   
        private context: any = null;
    
        constructor(callback: Function, context: any) {
            let self = this;
            self.callback = callback;
            self.context = context;
        }
    
        /**
         *     
         * @param args     
         */
        notify(...args: any[]):void {
            let self = this;
            self.callback.call(self.context, ...args);
        }
    
        /**
         *      
         * @param context    
         */
        compar(context: any): boolean {
            return context == this.context;
        }
    }
    

    테스트 코드:
    
    class Test {
        constructor () {
            Events.register("hello",this.test,self);
        }
    
        public test (eventName:string, args1: string, args2: number) {
            console.log(eventName,args1,args2);
            console.log(arguments);
        }
    }
    
    let a = new Test();
    Events.emit("hi","hhh",1);
    

    좋은 웹페이지 즐겨찾기