3월 3주차 - 디자인 패턴 - 1.1.4 옵저버패턴

[Thegirlwholeaptthroughtime]

ㅇㅇ

[Thegirlwholeaptthroughtime]

1. 개념

행동/이벤트 카테고리
한 주제 객채의 상태가 바뀌면 다른 구독 객체들에게 상태와 변경을 알림

2. 옵저버패턴이 나온 이유? → 'Polling'

이벤트 카테고리
요구사항이 이루어졌는지 주제객체에게 다른객체들이 주기적으로 확인하는 방식

- 매우 비효율적이다 !!

3. 그래서...

이벤트 카테고리
요구사항이 이루어졌는지 주제객체에게 다른객체들이 주기적으로 확인하는 방식

관찰대상 : 주제객체
관찰하는 : 구독객체
구독객체는 자유롭게 주제객체를 등록/취소
한 주제 객체의 상태가 바뀌면 다른 구독객체들에게 상태와 변경을 알림

4. 코드

class Subject{
    constructor(){
        this.observers = []; //옵저버 리스트
    }
    getObserverList(){
        return this.observers; //초기화
    }
    subscribe(observer){
        this.observers.push(observer); //구독, 옵저버 받아서 리스트안에 푸쉬
    }
    unSubscribe(observer){
        this.observers = this.observers.filter((obs)=> obs !== observer) // 구독해제
    }
    notifyAll(){ // 구독자 리스트를 바탕으로 알림을 보내줌
        this.observers.forEach((subscriber) => {
            try{
                subscriber.update(this.constructor.name);
            }catch(err){
                console.log("Error",err)
            }
        });
    }
}




class Observer { //옵저버 클래스
    constructor(name){
        this.name = name; //필요한 정보 등록
    }
    update(subj){
        console.log(`${this.name}고객님 신간 입고되었습니다.`); 
    }
}


const subj = new Subject() //Subject 클래스를 인스터스화


// 테스트용 옵저버 생성
const a  = new Observer("a")
const b  = new Observer("b")
const c  = new Observer("c")

// 주제객체를 통해서 구독
subj.subscribe(a)
subj.subscribe(b)
subj.subscribe(c)

//구독자정보 출력
//console.log(subj.getObserverList());

//알림실행
//subj.notifyAll();

//구독취소
subj.unSubscribe(c)
//구독취소후 알림문자
subj.notifyAll()

참조
https://www.youtube.com/watch?v=1UxRkggQwbs&t=1s