원글 페이지 : 바로가기
👽 Observer Pattern 옵저버 패턴(Observer Pattern)은 어떤 이벤트가 일어나는 것을 감시하는 패턴을 의미한다. 함수로 직접 요청한 적 없지만 시스템에 의해 발생하는 동작들을 이벤트라 하는데, 이러한 이벤트들을 감시하여 이벤트가 발생할 때마다 미리 정의해 둔 어떠한 동작을 즉각 수행하게 해 주는 프로그래밍 패턴을 옵저버 패턴이라 한다. 예시로 A 버튼이 클릭될 때마다 화면에 ‘안녕’을 출력하는 동작을 들 수 있다. 옵저버 패턴을 활용하면 다른 객체의 상태 변화를 별도의 함수 호출 없이 즉각적으로 알 수 있기 때문에, 이벤트에 대한 처리를 자주 해야 하는 프로그램이라면 매우 효율적인 프로그램을 작성할 수 있다. Model의 상태가 변경되면 이를 구독하고 있는 View의 렌더링 함수(or 등록해 놓은 함수)가 실행된다. 상태가 변경됨에 따라 View는 자동으로 렌더링이 되는 구조이다. 👽 Observer Pattern 코드 export default class Observer {
constructor() {
this._observers = new Set();
}
subscribe(observer) {
this._observers.add(observer);
}
notify() {
this._observers.forEach((observer) => observer());
}
} _observers: 각 View에서 등록한 render 메서드가 저장될 곳이다. subscribe: View에서 render 메서드를 등록하는 함수이다. notify: Model의 상태가 변경이 될 때, View가 등록한 render 함수들을 호출하는 함수이다. Model (위의 함수를 상속받음) export default class TextModel extends Observer {
constructor() {
super();
this.text = “hello world”;
}
getText() {
return this.text;
}
setText(text) {
this.text = text;
this.notify();
}
} getText: 현재 상태를 반환한다. setText: 현재 상태를 받은 인자로 변경시키고 등록된 render 함수들을 호출한다. View (위의 Model 구독) export default class TextView {
constructor({ model }) {
this.$target = document.createElement(“div”);
this.textModel = model;
this.textModel.subscribe(this.render.bind(this)); //Model에 구독
this.render();
}
render() {
const text = this.textModel.getText(); //Model의 상태를 가져와서 렌더링
this.$target.innerHTML = `
`;
} View 변경 버튼 export default class ChangeTextBtn {
constructor({ model }) {
this.$target = document.createElement(“div”);
this.textModel = model;
this.render();
this.$target.addEventListener(“click”, this.handleClick.bind(this));
}
render() {
this.$target.innerHTML = `
`;
}
handleClick({ target }) {
if (target.tagName !== “BUTTON”) return;
const input = this.$target.querySelector(“input”);
this.textModel.setText(input.value);
input.value = “”;
}
} 👽 Reference https://velog.io/@haero_kim/%EC%98%B5%EC%A0%80%EB%B2%84-%ED%8C%A8%ED%84%B4-%EA%B0%9C%EB%85%90-%EB%96%A0%EB%A8%B9%EC%97%AC%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4 옵저버 패턴 개념 떠먹여드립니다 🥄 네티즌들은 ‘개념을 이해 당해버렸다’ 등의 반응을 보였다. velog.io https://velog.io/@proshy/%EC%98%B5%EC%A0%80%EB%B2%84-%ED%8C%A8%ED%84%B4%EC%9C%BC%EB%A1%9C-%EB%B0%94%EB%8B%90%EB%9D%BCJS-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0 옵저버 패턴으로 바닐라JS 상태관리하기 바닐라 JS 옵저버 패턴 사용기 velog.io https://codesandbox.io/s/keulraeseuhyeong-objeobeopaeteon-ikkod?from-embed 클래스형 옵저버패턴 – CodeSandbox 클래스형 옵저버패턴 by hayoung123 using lodash, moment codesandbox.io