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 エンジンは複数の変更をバッファに保存し、1 回の呼び出しですべてコールバック関数に渡すことができます。これにより、コールバックを最適化して、コードで JavaScript の操作を大量に実行しながら、更新をまとめてバッチ処理することで、コールバックを少数だけ処理できます。
コールバック関数は、プロパティが追加、変更、削除、再構成されるたびにトリガーされます。
配列を監視するもう 1 つの利点は、配列に多数の変更が加えられている場合、変更概要ヘルパー ライブラリを使用して最小限の変更セットを作成できることです。これにより、クライアントサイドの 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 を解放してこの機能を活用した機能を実装できることです。
開発に役立つもう 1 つの優れた機能は、Object.observe() を使用して、オブジェクトが変更されるたびにデバッガをトリガーできることです。そのためには、次のようなコードを使用します。
Object.observe(beingWatched, function(){ debugger; });
Object.observe() について詳しくは、こちらの動画をご覧ください。
TC39 標準化団体では、この機能に関するフィードバックを募集しています。ぜひお試しいただき、ご意見をお寄せください。