[Wecode 80일차] 디자인패턴(Observer patterns)

77일 인줄알았는데 80일 이라니.. 잃어버린 3일은 어디로?!

 

1. 디자인 패턴이란?

   소프트웨어 디자인 패턴은 소프트웨어 공학에서 소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에  대해 재사용이 가능하도록 도와주는 패턴이다.

 

2. 옵져버 패턴

    1) 정의 : 관찰자(Observer)가 관찰대상을 선택하고 지켜보고있다가 관찰대상의 상태값이 변하면 관찰자들에게 알림

                을 주고,  알림을 받은 옵져버들은 특정 행위를 수행한다.

    2) 용도 : 이벤트 처리 및 위임

    3) 예시 : addEventListener, 구독과 알림(카톡플러스 친구 구독, 플친내용 변경시 구독자들에게 알림)

    4) 장점 : 상태값들을 연결되어있는 객체들에게 전달해주어 동적으로 변화시킬 수 있다.

                    (객체간 연결도를 느슨하게 해주어 유지보수에 큰 장점이 있다)

    5) 단점 :  예측불가능한 순서, 첫번째 이벤트 소실, 지저분한 상태, 캡슐화문제, 스레드 안전문제, 콜백누수, 의도치 않은 재귀 등

 

* 참고자료 : https://hamait.tistory.com/885

굿바이~ 옵저버 패턴 and FRP

Subject는 옵져버들을 등록, 제거, 알람공지 할 수 있는 함수를 가지고 있고, 옵져버는 알람을 받았을 때,

행동해야하는 함수를 가지고 있다.

옵져버를 subject에 register하고 먼저 pull을 받아도 되고, 수동적으로 알람올때까지 기다려도 된다.

 

3. 예시

function Subject() {
    this.observers = []; // Observers listening to the subject
    
    this.registerObserver = function(observer) {
        // Add an observer if it isn't already being tracked
        if (this.observers.indexOf(observer) === -1) {
            this.observers.push(observer);
        }
    };

    this.unregisterObserver = function(observer) {
        // Removes a previously registered observer
        var index = this.observers.indexOf(observer);
        if (index > -1) {
            this.observers.splice(index, 1);
        }
    };

    this.notifyObservers = function(message) {
        // Send a message to all observers
        this.observers.forEach(function(observer) {
            observer.notify(message);
        });
    };
}

function Observer() {
    this.notify = function(message) {
        // Every observer must implement this function
    };
}

//위의 옵져버부분을 Employee로 대체
function Employee(name) {
    this.name = name;

    // Implement `notify` so the subject can pass us messages
    this.notify = function(meetingTime) {
        console.log(this.name + ': There is a meeting at ' + meetingTime);
    };
}

var bob = new Employee('Bob');
var jane = new Employee('Jane');
var meetingAlerts = new Subject();
meetingAlerts.registerObserver(bob);
meetingAlerts.registerObserver(jane);
meetingAlerts.notifyObservers('4pm');

// Output:
// Bob: There is a meeting at 4pm
// Jane: There is a meeting at 4pm