구독 및 관찰자 모드 게시

게시 구독 모드와 관찰자 모드

var dom= document.getElementById('dom'); dom.onclick = function(){}; Dom 레벨 이벤트는 관찰자 모드dom에 해당합니다.addEventListener('click',function(){}); Dom 2 레벨 이벤트는 구독을 게시하는 것과 같고, 등록된 리셋을 저장하는 이벤트 탱크가 있습니다.

관찰자 모드

관찰자 모드: 관찰자(Observer)가 직접 구독(Subscribe) 테마(Subject)에 가입하고, 테마가 활성화되면 관찰자의 이벤트를 터치합니다.
** 중점은 B 직접 구독 주제 A, AB 간 직접 의존 **

// 
var Observer = function(){
    this.notify = function(_fn){

    }
}
// 
var Publisher = function(_data){
    this.event = _data;
    this.subscribes = [];
    this.subscribe = function(_fn){
        this.subscribes.push(_fn);
    };
    this.unsubscribe = function(_fn){
        var arr = this.subscribes, len =arr.length;
        for (let index = 0; index < len; index++) {
            if(_fn === arr[index]){
                arr.splice(index,1);
            }
        } 
    }
    this.fire = function(_s){
        var arr = this.subscribes, len =arr.length;
        for (let index = 0; index < len; index++) {
            if(typeof( arr[index]) === 'function'){
                arr[index](this.event,...arguments);
            }
        }
    }
}

var pub =  new Publisher(' ， ');

//  
function notify1(_e,_e1){
    console.log(_e,_e1);
}

function notify2(_e,_e1){
    console.log(_e,_e1);
}

//  
pub.subscribe(notify1);

pub.subscribe(notify2);

후기도 관찰자를 대상으로 봉인할 수 있다. 더 이상 함수나 대상이 아니다. 그 중에서 notify 방법을 제공하여 자신에게 통지할 수 있다.

게시 구독 모드

구독자(Subscriber)는 구독하고 싶은 이벤트를 스케줄링 센터(Topic)에 등록하고, 게시자(Publisher)가 이 이벤트(Publish topic)를 스케줄링 센터, 즉 이 이벤트가 촉발될 때 스케줄링 센터에서 스케줄링 센터로 통일된 처리 코드를 등록합니다.

  var CallBack = function (_data) {
    this.event = _data;
    this.subscribes = {};
    this.subscribe = function (topic, _fn) {
        if (!this.subscribes[topic]) {
            this.subscribes[topic] = [];
        }
        this.subscribes[topic].push(_fn);
    };
    this.unsubscribe = function (topic, _fn) {
        var $topic = this.subscribes[topic], len = $topic.length;
        if ($topic) {
            for (let index = 0; index < len; index++) {
                if (_fn === $topic[index]) {
                    $topic.splice(index, 1);
                }
            }
        }else{
            console.log('not this topic =>'+topic)
        }

    }
    this.fire = function (topic,_s) {
        var $topic = this.subscribes[topic];;
        if ($topic) {
            var  len = $topic.length
            for (let index = 0; index < len; index++) {
                if(typeof($topic[index]) !== 'function')continue;
                $topic[index](this.event, ...arguments)

            }
        }else{
            console.log('not this topic =>'+topic)
        }
    }
}

var callBack = new CallBack(' ， ');

callBack.subscribe(' ',notify1);

callBack.subscribe(' ',notify2);