주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴
이벤트 기반 시스템에 사용하며 MVC(Model-View-Controller) 패턴에도 사용됨 // TODO: 이벤트 기반 시스템 찾아보기
JS에서 옵저버 패턴은 프록시 객체를 통해 구현할 수도 있음
프록시 객체? 어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체
프록시 객체를 이용한 옵저버 패턴
function createReactiveObject(target, callback) {
const proxy = new Proxy(target, {
set(obj, prop, value) {
if(value !== obj[prop]) {
const prev = obj[prop]
obj[prop] = value
callback(`${prop}가 [${prev}] >> [${value}]로 변경되었습니다.`)
}
return true
}
})
return proxy
}
const a = {
"June" : "Developer"
}
const b = createReactiveObject(a, console.log)
b.June = "Developer"
b.June = "Front Developer"
// June가 [Developer] >> [Front Developer] 로 변경되었습니다.
Vue.js 3.0의 옵저버 패턴
이터레이터를 사용하여 컬렉션의 요소들에 접근하는 디자인 패턴
이터레이터라는 하나의 인터페이스로 순회가 가능
const mp = new Map()
mp.set('a', 1)
mp.set('b', 2)
mp.set('c', 3)
const st = new Set()
st.add(1)
st.add(2)
st.add(3)
for(let a of mp) console.log(a)
for(let b of st) console.log(b)
// 아래와 같은 결과가 나옴
['a', 1]
['b', 2]
['c', 3]
1,
2,
3
=> 이것도 하나의 패턴이었구나... js에서 자연스럽게 사용하고 있어서 몰랐다.
즉시 실행 함수를 통해 private, public 같은 접근 제어자를 만드는 패턴
해당 패턴을 기반으로 만든 JS 모듈 방식으로는 CJS(commonJS) 모듈 방식이 있음
참고
=> 디자인 패턴을 공부하면서 느낀 건데, js에서는 나름대로 충실히 객체 지향을 하려고 노력하는 것 같다. 객체 지향의 대표 격인 java에 있는 기능을 구현하려고 노력한 흔적이 많이 보인다. 👀 (반박시 님의 말이 맞습니다...)