Chrome的新玩具---Object.observe

javascript

前言

关于双向绑定，在前端MV*框架中非常常见，比如谷歌出品的angularjs。而angular通过dirty-check实现，性能上存在明显瓶颈，需要大量变量监听时，性能掉的非常厉害。chrome 35之后引入Object.observe则可以很好的处理，而且之后会作为ES标准，无需担心通用性问题。

功用梳理

• Object.observe()
• Object.unobserve()
  前者用以监听对象，后者用以取消监听。

love = {};
function observer(changes) {
  changes.forEach(function(change) {
    console.log(change);
  });
}
Object.observe(love, observer);

对象改变之后，就会调用observer，传递参数为数组，元素为变化描述对象。常规的变化描述对象结构为：

{
  name: '',
  type: '',
  oldValue: '',
  object: ''
}

name表示值变化的键，type表示变化类型，常用的有add, update, delete，oldValue表示变化前的值，object可以理解为被监听的对象。

如果希望在值变化时立刻执行相关操作，或者需要额外的变化描述对象属性，就需要自己动手。

dark = {};
_darkKnight = '';
Object.defineProperty(dark, 'knight', {
  get: function() {
    return _darkKnight;
  },
  set: function(val) {
    console.log('passed value is %s', val);
    Object.getNotifier(this).notify({
      format: 'access_log',
      name: 'knight',
      type: 'update',
      oldValue: _darkKnight
    });
    _darkKnight = val;
  }
});
Object.observe(dark, observer);

通过定义对象相应键的“访问器”，在变量变化时执行相关代码，然后使用notifier.notify()传递变化描述对象给observer，该对象此处可以有自定义字段。如果采取此种方式，必须显示调用notify()函数，否则observer无法得知键值变化。