MVC 또는 MDV를 사용하는 많은 JavaScript 프레임워크는 웹 애플리케이션 내에서 상태를 모델링하는 객체의 변경사항에 응답해야 합니다. 이 기능은 데이터 결합 모델의 기본 부분입니다.
자바스크립트 객체와 DOM 속성을 모니터링하여 일종의 작업을 트리거하는 다양한 방법이 있지만, 대부분의 기법은 성능 등과 같은 다양한 이유로 이상적이지 않습니다.
웹 애플리케이션의 성능을 개선하기 위해 ECMAScript(자바스크립트) 개발을 감독하는 표준 기구인 Object.observe()라는 새 메서드가 TC39에 제안되었습니다.
Object.observe()를 사용하면 객체 또는 속성이 변경될 때마다 호출되는 자바스크립트 객체에 리스너를 추가할 수 있습니다.
지금 Chrome Canary 버전 25에서 사용해 볼 수 있습니다.
이 기능을 실험하려면 Chrome Canary에서 실험용 자바스크립트 사용 설정 플래그를 사용 설정하고 브라우저를 다시 시작해야 합니다. 플래그는 아래 이미지와 같이 '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 조작을 할 수 있지만 업데이트를 함께 일괄 처리하여 적은 수의 콜백만 처리할 수 있습니다.
콜백 함수는 속성이 추가, 수정, 삭제 또는 재구성될 때마다 트리거됩니다.
배열을 관찰할 때 또 다른 좋은 점은 배열에 많은 변경사항이 있는 경우 변경 요약 도우미 라이브러리를 사용하여 최소 변경사항 세트를 만들 수 있다는 것입니다. 그러면 클라이언트 측 자바스크립트가 각 항목을 확인하기 위해 수동으로 배열을 스캔할 필요가 없습니다.
'discoverChanged' 콜백 함수에서 다음과 같은 작업을 수행하면 각 변경사항을 매우 쉽게 반복할 수 있습니다.
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
이 기법의 가장 큰 장점은 모든 모니터링 기능이 자바스크립트 엔진 내부에 있다는 것입니다. 이를 통해 브라우저가 최적화를 제대로 수행하고 자바스크립트가 이 기능을 활용하는 기능을 구현할 수 있습니다.
개발에 매우 유용한 또 다른 기능은 Object.observe()를 사용하여 객체가 변경될 때마다 디버거를 트리거하는 기능입니다. 그러려면 아래 예와 같은 코드를 사용합니다.
Object.observe(beingWatched, function(){ debugger; });
Object.observe()에 관한 자세한 설명은 이 동영상 소개에서 확인하세요.
설명이 잘 되어 있는 도움말과 실제 예시도 확인해 보세요.
TC39 표준 기구에서 이 기능에 대한 의견을 기다리고 있습니다. 사용해 보시고 의견을 보내주세요.