자바스크립트의 관찰자 패턴

이번에는 Javascript의 Observer 모드와 Javascript의 Observer 모드의 Notes에 대해 알아보겠습니다.

관찰자(게시-구독이라고도 함) 패턴은 객체 간의 일대다 종속 관계를 정의하므로 객체의 상태가 변경되면 이에 의존하는 모든 객체에 알림이 전송되고 자동으로 새로 고쳐집니다.

사용자가 웹 페이지에서 일부 작업(예: 클릭)을 수행할 때 미리 정해진 일부 이벤트(예: 양식 제출, 점프 페이지)를 수행해야 합니다.

장점: 게시자와 구독자 간의 결합 감소

단점 : 약화 객체 간의 관계가 코드 유지 및 이해에 도움이 되지 않음

구현 아이디어

게시자 결정

게시자 캐시 목록 정의, 저장콜백 기능구독자에게 알림

메시지 게시 및 캐시 목록 실행 순차적인 콜백 함수

간단한 구현

let event = {};
event.list = [];//增加订阅者event.listen = function(fn){
    event.list.push(fn);
}//发布消息event.trigger = function(){    for(var i = 0,fn; fn = this.list[i++];) {
        fn.apply(this,arguments); 
    }
}let click = function(){    console.log('event：click');
}let hover = function(){    console.log('event：hover');
}
event.listen(click);
event.listen(hover);
event.trigger();//打印：‘event：click’'event：hover'

완벽한 관찰자 모드

let Event = (function(){    var list = {},
        listen,
        trigger,
        remove;
    listen = function(key,fn){        list[key] = list[key]||[];        list[key].push(fn);
    };
    trigger = function(){        var key = Array.prototype.shift.call(arguments),
            fns = list[key];        if(!fns || fns.length === 0) {            return false;
        }        for(var i = 0, fn; fn = fns[i++];) {
            fn.apply(this,arguments);
        }
    };
    remove = function(key,fn){        var fns = list[key];        if(!fns) {            return false;
        }        if(!fn) {
            fns && (fns.length = 0);
        }else {            for(var i = fns.length - 1; i >= 0; i--){                var _fn = fns[i];                if(_fn === fn) {
                    fns.splice(i,1);
                }
            }
        }
    };    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }
})();
Event.listen('click', function(type) {
    console.log('event: ' + type +' click'); 
});
Event.trigger('click' , 'button');//打印'event: button click'

관찰자 모드는 모듈 간 통신, 사용자 이벤트 및 상태 구독, 해당 논리 처리 실행을 트리거하는 데 사용할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Javascript의 프록시 패턴

Javascript의 전략 패턴

위 내용은 자바스크립트의 관찰자 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!