189p 프록시 패턴
- 하나의 객체가 다른 객체에 대한 인터페이스로 동작하는 패턴
- 프록시 패턴의 예시로 게으른 초기화(lazy initialization)이 있다.
- 초기화 하는데 비용이 많이 들지만, 실제로 초기화한 후 한번도 사용하지 않을 때 도움이 된다.
프록시 패턴을 이용해 한꺼번에 여러 동영상을 볼 때, 개별 요청을 병합시킴으로써 사용자 경험 속도를 개선할 수 있다.
최근 50밀리초 이내에 받아들인 동영상 ID를 대기열(queue)에 모았다가 http 객체를 호출하며 대기열을 비운다.(flush) 이때 자신의 콜백 함수도 전달한다.(videos.upddateList()) 콜백 함수는 한 개의 데이터만 처리하도록 되어 있다.
var proxy = {
ids: [],
delay: 50,
timeout: null,
callback: null,
context: null,
makeRequest: function (id, callback, context) {
// 큐에 추가한다.
this.ids.push(id);
this.callback = callback;
this.context = context;
// timeout을 설정한다.
if (!this.timeout) {
this.timeout = setTimeout(function () {
proxy.flush();
}, this.delay);
}
},
flush: function () {
http.makeRequest(this.ids, "proxy.handler");
// timeout과 큐를 비운다.
this.timeout = null;
this.ids = [];
},
handler: function (data) {
var i, max;
// 동영상이 한 개일 경우
if (pa rselnt(data.query.count, 10) === 1) {
proxy.callback.call(proxy.context,
data.query.results.Video);
return;
}
// 동영상이 여러 개일 경우
for (i = 0, max = data.query.results.Video.length; i < max; i += 1) {
proxy.callback.call(proxy.context,
data.query.results.Video[i]);
}
}
};
프록시의 새로운 cache 프로퍼티에 이전 요청의 결과를 캐시해두면 http 객체를 더욱 보호할 수 있다.
video 객체가 동일한 동영상 ID에 대한 정보를 다시 요청하면, 프록시는 캐시된 결과를 반환해서 네트워크 라운드트립을 줄인다.
p202 감시자 패턴
- mouseover, keypress와 같은 모든 브라우저 이벤트가 감시자 패턴의 예이다
- 커스텀 이벤트라고 불리기도 하며, 브라우저에서 발생하는 것이 아니라 프로그램에 의해 만들어진 이벤트라는 뜻이다.
- 발행자(publisher)또는 감시대상(subject)는 중요한 이벤트가 발생하면 모든 구독자를 호출한다.
- 이벤트와 이벤트 객체 형태로 메세지를 전달한다.
어떤 상황에서든 DOM 접근을 최소화 하는 것이 비용을 줄이는 일이다.
DOM 객체를 다룰 경우 변수에 저장하여 사용하는 방법이 훨씬 빠르다.
p217 DOM 조작
큰 서브 트리를 만들어야 한다면 서브 트리를 완전히 생성한 다음 문서를 추가해야 한다.
이를 위해 문서 조각 (document fragment)에 모든 하위 노드를 추가하는 방법을 사용할 수 있다.