MVC 또는 MDV를 사용하는 많은 JavaScript 프레임워크는 웹 애플리케이션 내에서 상태를 모델링하는 객체의 변경사항에 응답해야 합니다. 이 기능은 데이터 결합 모델의 기본적인 부분입니다.
JavaScript 객체와 DOM 속성을 모니터링하여 일종의 작업을 트리거하는 방법에는 여러 가지가 있지만 대부분의 기법은 성능 등의 여러 가지 이유로 이상적이지 않습니다.
웹 애플리케이션의 성능을 개선하기 위해 ECMAScript(JavaScript) 개발을 감독하는 표준 기관인 TC39에 Object.observe()라는 새로운 메서드가 제안되었습니다.
Object.observe()를 사용하면 객체 또는 속성이 변경될 때마다 호출되는 리스너를 JavaScript 객체에 추가할 수 있습니다.
지금 Chrome Canary 버전 25에서 사용해 볼 수 있습니다.
이 기능을 실험하려면 Chrome Canary에서 Enable Experimental JavaScript 플래그를 사용 설정하고 브라우저를 다시 시작해야 합니다. 이 플래그는 아래 이미지와 같이 'about:flags'에서 찾을 수 있습니다.
다음은 객체에 관찰자를 설정하는 방법의 간단한 예입니다.
var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
// do something
}
Object.observe(beingWatched, somethingChanged);
'beingWatched' 객체가 수정되면 객체에 적용된 변경사항 배열을 수신하는 콜백 함수 'somethingChanged'가 트리거됩니다.
따라서 JavaScript 엔진은 여러 변경사항을 버퍼링하고 콜백 함수에 단일 호출로 모두 전달할 수 있습니다. 이렇게 하면 코드가 많은 JavaScript 조작을 실행할 수 있지만 업데이트를 일괄 처리하여 콜백을 몇 개만 처리하도록 콜백을 최적화하는 데 도움이 됩니다.
콜백 함수는 속성이 추가, 수정, 삭제 또는 재구성될 때마다 트리거됩니다.
배열을 관찰할 때 또 하나의 유용한 점은 배열이 여러 번 변경된 경우 변경 요약 도우미 라이브러리를 사용하여 최소 변경 집합을 만들 수 있으므로 클라이언트 측 JavaScript가 각 항목을 확인하기 위해 배열을 수동으로 스캔하지 않아도 된다는 것입니다.
'somethingChanged' 콜백 함수에서 다음과 같이 하면 각 변경사항을 매우 쉽게 반복할 수 있습니다.
function whatHappened(change) {
console.log(change.name + " was " + change.type + " and is now " + change.object[change.name]);
}
function somethingChanged(changes) {
changes.forEach(whatHappened);
}
type 속성은 객체에 발생한 상황을 식별합니다. 설정되는 속성과 연결된 유형의 몇 가지 예는 아래 코드에서 확인할 수 있습니다.
beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new
이 기법의 장점은 모든 모니터링 스마트가 JavaScript 엔진 내에 있으므로 브라우저에서 이를 잘 최적화할 수 있고 JavaScript가 이 기능을 활용하는 기능을 구현할 수 있다는 점입니다.
개발을 위한 또 다른 유용한 기능은 Object.observe()를 사용하여 객체가 변경될 때마다 디버거를 트리거하는 기능입니다. 이렇게 하려면 아래 예와 같은 코드를 사용합니다.
Object.observe(beingWatched, function(){ debugger; });
Object.observe()에 관해 자세히 설명하는 유용한 동영상 소개를 참고하세요.
TC39 표준 기관에서 이 기능에 관한 의견을 모으고 있으니 사용해 보고 의견을 알려주세요.