MVC や MDV を使用する多くの JavaScript フレームワークは、ウェブ アプリケーション内で状態をモデル化するオブジェクトの変更に応答する必要があります。この機能は、データ バインディング モデルの基本部分です。
JavaScript オブジェクトと DOM プロパティを監視してなんらかのアクションをトリガーする方法はいくつかありますが、ほとんどの手法はパフォーマンスなどのさまざまな理由から理想的ではありません。
ウェブ アプリケーションのパフォーマンスを改善するために、ECMAScript（JavaScript）の開発を監督する標準化団体である TC39 に対して、Object.observe() という新しいメソッドが提案されました。
Object.observe() を使用すると、オブジェクトまたはそのプロパティが変更されるたびに呼び出される任意の JavaScript オブジェクトにリスナーを追加できます。
Chrome Canary バージョン 25 でお試しいただけます。
この機能を試すには、Chrome Canary で [試験運用版の 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 エンジンは多数の変更を自由にバッファして、コールバック関数への 1 回の呼び出しでそれらをすべて渡すことができます。これにより、コールバックの最適化に役立ちます。そのため、コードで JavaScript を多用しつつ、更新を一括して処理することで、少数のコールバックのみを処理できます。
プロパティが追加、変更、削除、再構成されると、コールバック関数がトリガーされます。
配列を監視する際のもう一つの利点は、配列に多数の変更が加えられている場合、Change Summary ヘルパー ライブラリを使用して最小限の変更セットを作成できることです。これにより、クライアント側の 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 プロパティはオブジェクトの状態を識別します。設定されるプロパティの例と、関連する 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 標準化団体がこの機能に関するフィードバックを求めています。ぜひお試しいただき、ご意見をお寄せください。