감시자(Observer) 패턴

🤠 감시자(Observer) 패턴을 갑자기 적는이유?

Angular를 하다보면 Rxjs를 사용하는 방법이 아주 많다. 그런데 Rxjs를 알아보다보면 Observer패턴을 이용했다고 하여 이번에 새롭게 공부해 보았다.

 

💈감시자(Observer) 패턴이란?

"A" 라는 객체가 "B"라는 객체의 메소드를 직접 호출하는 것이 아닌, "B"객체의 메소드를 감시하는 패턴이다.

 

🤐 필요한 객체들

• publish 객체 : 발행자의 기능을 가지고 있는 객체
• paper 객체 : 발행자의 기능을 상속(?)받는 객체
• maxGun객체 : paper객체의 구독자

 

🤩 publish 객체

var publisher = {
    //구독자를 관리하는 배열
    subscribers: {
        any: []// '이벤트 타입 : 구독자의 배열'
    },
    //구독추가
    subscribe(fn, type) {
        type = type || 'any';

        if (typeof this.subscribers[type] === 'undefined') {
            this.subscribers[type] = [];
        }

        this.subscribers[type].push(fn);
    },
    //구독 해제
    undescribe(fn, type) {
        this.visitSubscribers('undescribe', fn, type);
    },
    //구독자들이 등록한 메소드들을 호출
    publish(publication, type) {
        this.visitSubscribers('publish', publication, type);
    },
    visitSubscribers(action, arg, type) {
        var pubType = type || 'any',
            subscribers = this.subscribers[pubType],
            i,
            max = subscribers.length;
        
        for (i = 0; i < max; i += 1) {
            if (action === 'publish') {
                subscribers[i](arg);
            } else {
                if (subscribers[i] === arg) {
                    subscribers.splice(i, 1);
                }
            }
        }
    }
};

 

🚓 publish 프로퍼티 및 함수 설명

• subscribers : 구독자 리스트를 관리하고 있는 publish의 프로퍼티
• undescribe : 구독자 리스트를 순회하며, 구독해제
• publish : 구독자 리스트를 순회하며, 이벤트 타입 같은 함수 호출
• visitSubscribers : 구독자 리스트를 순회하는 함수

 

🤔발행자 생성

//발행자 생성
function makePublisher(o) {
    var i;
    for (i in publisher) {
        if (publisher.hasOwnProperty(i) && typeof publisher[i] === "function") {
            o[i] = publisher[i];
        }
    }

    o.subscribers = { any: [] };
}

발행자 생성을 통해 발행자의 메소드들를 상속 받도록 하는것이다.

 

🚓 Paper 객체 생성

//paper 객체 생성
var paper = {
    daily(){
        this.publish(`big news today`);
    },
    monthly(){
        this.publish(`interesting analysic`,`monthly`);
    }
}

발행자 객체를 만들었으며, daliy메소드와 , monthly메소드를 생성하였다. 여기서 this.pulish는 "publish" 객체에 존재하는 메소드이다. 즉 구독자들의 메소드를 호출 한다고 볼 수 있다.

 

🤩Paper 를 발행자로 만들기

//paper를 발행자로 만든다.
makePublisher(paper);

 

🚶‍♂️구독자 생성 및 발행자의 구독할 함수 추가

//Maxgun 구독자 생성
var maxGun = {
    drinkCoffee(paper){
        console.log(`${paper} 를 읽었습니다.`);
    },
    sundayPreNap(monthly){
        console.log(`잠들기 전에 ${monthly}를 읽고 있습니다.`);
    }
}

//발행자(paper)는 maxGun을 구독한다
paper.subscribe(maxGun.drinkCoffee);
paper.subscribe(maxGun.sundayPreNap, 'monthly');

 

위와 같이 만들 경우 객체들간의 관계가 느슨해졌다.  실무에서는 어떻게 만들어야할지 고민을 해봐야 겠다.