MVC 또는 MDV를 사용하는 많은 JavaScript 프레임워크는 웹 애플리케이션 내에서 상태를 모델링하는 객체의 변경에 응답해야 합니다. 이 기능은 데이터 결합 모델의 기본적인 부분입니다.
일종의 작업을 트리거하기 위해 JavaScript 객체와 DOM 속성을 모니터링하는 방법에는 여러 가지가 있지만, 대부분의 기술은 성능 등의 다양한 이유로 적합하지 않습니다.
웹 애플리케이션의 성능을 개선하기 위해 ECMAScript(자바스크립트) 개발을 감독하는 표준 기관인 Object.observe()라는 새로운 메서드가 TC39에 제안되었습니다.
Object.observe()를 사용하면 객체 또는 속성이 변경될 때마다 호출되는 JavaScript 객체에 리스너를 추가할 수 있습니다.
이제 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가 각 항목을 확인하기 위해 배열을 수동으로 스캔할 필요가 없다는 것입니다.
'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 표준 기구에서는 이 기능에 관한 의견을 기다리고 있습니다. 사용해 보시고 의견을 알려주세요.