관찰자 모드 (사용자 정의 이벤트)

시작 안내: js 에서 내 장 된 이벤트 감청 기 를 접 했 습 니 다. 예 를 들 어 우 리 는 버튼 의 클릭 이벤트 와 이벤트 처리 함 수 를 부 여 했 습 니 다. 단 추 를 눌 렀 을 때 이 내 장 된 감청 기 즉 onclick 을 촉발 하여 우리 가 부여 한 처리 함 수 를 실행 하기 시 작 했 습 니 다. 이 를 통 해 우 리 는 이런 사건 감청 기 를 우리 자신 이 정의 할 수 있 는 지 생각 할 수 있 습 니 다.사실 우 리 는 내 장 된 사건 의 감청 과 트리거 과정 을 모 의 하여 우리 가 필요 로 하 는 효 과 를 얻 을 수 있다. 업계 분야 에서 이것 은 관찰자 모델 이 라 고 불 리 며 코드 를 직접적 으로 실현 할 수 있다.

//      
let ObserverMode = {
        //         
        on: function(){
            //           ,      "    "
            if(!arguments || arguments.length < 2) return this.warningMessages.info1;
            
            //                
            let observes = arguments[0];
            
            //                    ,      "               "
            if(!this.isFistType(observes)) return this.warningMessages.info2;
            
            //                   
            let fn = arguments[1];
            
            //          ,      "         "
            if(!this.isSecondType(fn)) return this.warningMessages.info3;
            
            //           handler  ,          ,     
            if(!this.handler) this.handler = {};
            
            //                       ,         
            if(!this.handler[observes]) this.handler[observes] = [];
            
            //                       
            this.handler[observes].push(fn);
        },
        //        
        emit: function (){
            //      
            let observes = arguments[0];
            //    
            let params = arguments[1];
            //                    "       "
            if(!this.handler[observes] || !this.handler[observes].length) return this.warningMessages.info4;
            //                  
            else this.handler[observes].forEach(item =>{
                item(params);
            })
        },
        //        
        off: function(){
            //           ,      "    "
            if(!arguments || !arguments.length) return this.warningMessages.info1;
            
            //      
            let observes = arguments[0];
            
            //                       "               "
            if(arguments.length > 0 && !this.isFistType(observes)) return this.warningMessages.info2;
            
            //        1                     ,      "       "
            if(arguments.length == 1){
                if(Object.keys(this.handler).indexOf(observes) > -1){
                    delete this.handler[observes];return;
                } 
                else return this.warningMessages.info4;
            }
            
            //    
            let fn = arguments[1];
            //        1              "         "
            if(arguments.length > 1 && !this.isSecondType(fn)) return this.warningMessages.info3;
            else {
                //                     
                let index = this.handler[observes].indexOf(fn);
                //              ，    "                "
                index > -1?this.handler[observes].splice(index,1):console.log(this.warningMessages.info5);
            }
        },
        //                       
        isFistType: function(value){
            let type = typeof value;
            return (type == 'number') || (type == 'string');
        },
        //          
        isSecondType: function(value){
            return value.prototype && (value.__proto__ === Function.prototype)
        },
        //    
        warningMessages: {
            info1: "    ",
            info2: "               ",
            info3: "         ",
            info4: "       ",
            info5: "                ",
        }
}

이 사용자 정의 이벤트 가 실 현 됩 니 다. 위 코드 의 기능 은 내 장 된 이벤트 와 달리 대상 의 emit 트리거 를 수 동 으로 호출 해 야 합 니 다. 내 장 된 이벤트 의 모든 이벤트 이름 은 하나의 실행 함수 에 만 대응 합 니 다. 여기 서 사용자 정의 이 벤트 는 하나의 이벤트 목록 으로 여러 개의 동명 이벤트 함 수 를 동시에 처리 할 수 있 습 니 다.