[자바스크립트 디자인 패턴] 옵저버 패턴

목록

• 싱글톤 패턴 (Singletpm Pattern)
• 모듈 패턴 (Module Pattern)
• 옵저버 패턴 (Observer Pattern)
• 프로토타입 패턴 (Prototype Pattern)

---

상대 클래스나 객체에 의존하지 않으면서 데이터 변경을 통보하고자 할 때 사용합니다.

1. Subject, Observer 를 선언합니다
   - Subject : 변경과 감지를 통보하여 Observer들을 관리하는 역할
   - Observer : 변경과 감지를 통보받는 역할

작성코드

var Subject = function() {
    var observers = [];
    
    return {
        subscribeObserver: function(observer) {
            observers.push(observer);
        },
        unsubscribeObserver: function(observer) {
            var index = observers.indexOf(observer);
            if(index > -1) {
                observers.splice(index, 1);
            }  
        },
        notifyObserver: function(observer) {
            var index = observers.indexOf(observer);
            if(index > -1) {
                observers[index].notify(index);
            }
        },
        notifyAllObservers: function() {
            for(var i = 0; i < this.observers.length; i++){
                observers[i].notify(i);
            };
        }
    }
}

var Observer = function() {
    return {
        notify: function(index) {
            console.log("Observer " + index + " is notified!");
        }
    }
}

 

사용코드

// Subject 객체 생성
var subject = new Subject();

// Observer 객체 생성
var observer1 = new Observer();
var observer2 = new Observer();
var observer3 = new Observer();
var observer4 = new Observer();

// Subject 객체 생성
subject.subscribeObserver(observer1);
subject.subscribeObserver(observer2);
subject.subscribeObserver(observer3);
subject.subscribeObserver(observer4);

// Observer 2번에 통보
subject.notifyObserver(observer2);

// Observer 전체에 통보
subject.notifyAllObservers();