2014年10月11日土曜日

JS標準API Object.observe() でデータバインディング

オブジェクトの変更を監視できる Object.observe()Chrome 36 Beta から利用可能になりました。
これにより標準APIだけでデータ・バインディングが可能になります。データ・バインディングは、例えば、アプリの「設定」が変更された場合などに効率的に設定データをアプリに反映したいときなどに利用されます。これが標準APIとして利用できるようになったということは、ソースコードがシンプルになるという他にも、無駄なポーリングをする必要がなくなるのでパフォーマンスが改善されるというメリットもあります。
以下は Object.observe() を使ったサンプルコードです。

var model = {};

Object.observe(model, function(changes) {

  changes.forEach(function(change) {
    console.log("type: " + change.type + ", " +
      "name: " + change.name + ", " +
      "oldValue: " + change.oldValue);
  });

});

// test
model.a = "hoge";
model.a = "foo"; 
delete model.a;
model.b = "bar";
model.b = "baz"; 
delete model.b;

/* log
type: add, name: a, oldValue: undefined
type: update, name: a, oldValue: hoge
type: delete, name: a, oldValue: foo
type: add, name: b, oldValue: undefined
type: update, name: b, oldValue: bar
type: delete, name: b, oldValue: baz 
*/

change.type には変更タイプ(add, update, delete)、 change.name には変更されたプロパティ名、 change.oldValue には変更前の値が入ります。

2016/04/23追記:
最近ChromeでObject.observeを使っていると以下の警告が出るようになりました。
'Object.observe' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/6147094632988672 for more details.
これはObject.observeが今月あたりにChrome(M50〜)の標準から外されるという警告みたいです。マジですか・・・個人的には少し残念です。。。
すでにObject.observeを利用している場合はobject-observeのような外部ライブラリを使って回避する必要があります。まあ<script src="object-observe.js"></script> するだけでいいのは救いですけどね。

0 件のコメント:

コメントを投稿