All Articles

[JavaScript Patterns] 7.9 Observer

Observer (감시자) 패턴

구독자 = subscriber = observer
발행자 = publisher = subject

subscriber(구독자)/publisher(발행자) 패턴이라고도 한다.

JavaScript에서는 mouseover, keypress와 같은 모든 브라우저 이벤트가 감시자 패턴의 예다. 감시자 패턴은 custom event 라고 부르기도 하는데, 이는 브라우저가 발생시키는 이벤트가 아닌 프로그램에 의해 만들어진 이벤트를 뜻한다.

이 패턴의 주요 목적은 어떤 객체가 다른 객체의 메서드를 호출하는 대신, 객체의 특별한 행동을 구독해 알림을 받는다. subject(발행자)는 중요한 이벤트가 발생했을 때 모든 observer(구독자)에게 알려준다.

예제코드

typescript으로 된 좋은 영상을 만남!

interface Subject {
	addObserver(o: Observer);
	removeObserver(o: Observer);
	notifyObserver();
}

interface Observer {
	update(temp: number);
}

class WeatherSubject implements Subject {
	private temperature: number;
	private observers: Observer[] = [];

	setTemp(temp: number) {
		console.log('weather: ' + temp);
		this.temperature = temp;
		this.notifyObserver();
	}

	public addObserver(o: Observer) {
		this.observers.push(o);
	}

	public removeObserver(o: Observer) {
		let index = this.observers.indexOf(o);
		this.observers.splice(index, 1);
	}

	public notifyObserver() {
		for (let observer of this.observers) {
			observer.update(this.temperature);
		}
	}

}

class TemperatureObserver implements Observer {
	private subject: Subject;

	constructor(weatherSubject: Subject) {
		this.subject = weatherSubject;
		weatherSubject.addObserver(this);
	}

	public update(temp: number) {
		console.log('tempObserver - update');
	}
}

class Fan implements Observer {
	private subject: Subject;

	constructor(weatherSubject: Subject) {
		this.subject = weatherSubject;
		weatherSubject.addObserver(this);
	}

	public update(temp: number) {
		if (temp > 25) {
			console.log('fan');
		} else {
			console.log('nice');
		}
	}
}

let weatherSubject = new WeatherSubject();

let tempObserver = new TemperatureObserver(weatherSubject);
let fan = new Fan(weatherSubject);

weatherSubject.setTemp(20);
weatherSubject.setTemp(30);

reference

Published 22 Aug 2019