javascript 구독 발표

참고 자료

게시 / 구독:http://zh.wikipedia.org/wiki/%E5%8F%91%E5%B8%83/%E8%AE%A2%E9%98%85

사용자 정의 이벤트 1:https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

사용자 정의 이벤트 2:https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent

QR 코드
머리말

전단 비동기 프로 그래 밍 은 주로 리 셋 함수, 사건 감청, promise / defer 를 포함한다.

전단 비동기 프로 그래 밍 을 바탕 으로 게시 / 구독 (Publish / subscribe) 메시지 패 러 다 임 을 실현 할 수 있 습 니 다.메시지 의 발송 자 (게시 자) 는 특정 수신 자 (구독 자) 에 게 메 시 지 를 보 낼 계획 이 아니다.구독 자 는 하나 이상 의 유형 에 관심 을 가지 기 때문에 관심 있 는 소식 만 받 고 어떤 게시 자가 발표 하 는 지 알 필요 가 없다.이러한 게시 자 와 구독 자의 디 결합 은 더욱 확장 가능 하고 동적 인 네트워크 토폴로지 를 허용 할 수 있 습 니 다.

게시 / 구독 모드 에 따라 Event loop 높이 와 비슷 하여 DOM 이벤트 에 기반 하여 이 루어 집 니 다.

관심 있 으 시 면 공동 coding 에 가입 하여 함께 성장 하 세 요.https://github.com/bornkiller/subscriber.git

코드 구현

게시 / 구독 구조 함수 정의

    function SourceCribe () {
        //     /   DOM  
        var body = document.querySelector('body');
        if (!document.querySelector('.magazine')) {
            var element = document.createElement('mark');
            element.setAttribute("class", "magazine");
            body.appendChild(element);
        }
        this.magazine = document.querySelector('.magazine');

        //       
        this.publish = function (source, data) {
            if (!typeof source === 'string') {
                return false;
            }
            var oEvent = new CustomEvent(source, {
                bubbles: true,
                cancelable: false,
                detail:data
            });
            this.magazine.dispatchEvent(oEvent);
        };

        //     ，handler          ，        
        this.subscribe = function (source, handler) {
            if(!typeof source === 'string' || !typeof value === 'function') {
                return false;
            }

            this.magazine.addEventListener(source, handler, false);
        };

        //     
        this.unsubcribe = function (source, handler) {
            if(!typeof source === 'string' || !typeof value === 'function') {
                return false;
            }

            this.magazine.removeEventListener(source, handler, false);
        };
    }

실제 호출

(function(window){
    window.addEventListener('load',function(evt){

        var sourceCribe = new SourceCribe();

        var loveHandlerAlways = function (evt) {
            console.log("always " + evt.detail);
        };
        var loveHandlerEver = function (evt) {
            console.log("ever " + evt.detail);
        };

        sourceCribe.subscribe('love', loveHandlerAlways);
        sourceCribe.subscribe('love', loveHandlerEver);

        sourceCribe.publish('love','500 days with summer');

        sourceCribe.unsubcribe('love', loveHandlerAlways);
        sourceCribe.publish('love','500 days with summer');
    });

})(window)

후속

호환성, 특히 IE10 - 전선 을 잘 처리 합 니 다.

현재 주 제 를 바탕 으로 하 는 실현 은 내용 을 바탕 으로 혼합 게시 / 구독 을 실현 할 것 이다.

최종 적 으로 AMD 모듈 로 발표

연락처
QQ / 이메일: 491229492