es7-object-observe
Introduction
es7-object-observe is Object.observe polyfill without dirty-checking.
const oo = ; const obj = foo: 0 bar: 1 ; ooObject; objfoo = 'hello';objbar = 'world';// [// {name: 'foo', object: <obj>, type: 'update', oldValue: 0},// {name: 'bar', object: <obj>, type: 'update', oldValue: 1},// ]
const arr = 'a' 'b' 'c'; ooArray; arr1 = 'B';arr;// [// {type: 'update', object: <arr>, name: '1', oldValue: 'b'},// {type: 'splice', object: <arr>, index: 1, removed: ['B', 'c', 'd'], addedCount: 3}// ]
Install
npm install es7-object-observe
Caveats
es7-object-observe(oo) is based on spec proposal and almost the same as chrome implementation, but there are some differences.
1. Wrap object in oo.Object or oo.Array.
const obj = oo;
2. Use oo.Object.method to oo-object.
{ console;} ooObject; ooObject;ooObject;// [// { object: obj, type: 'reconfigure', name: 'a' },// { object: obj, type: 'preventExtensions' }// ] ooObject;
3. Use special methods 'set' and 'delete' to notify 'add' and 'delete'.
// Bad example; they can't deliver changes.obja = 'b';delete obja;
obj;obj;// [// { object: obj, type: 'add', name: 'a' },// { object: obj, type: 'delete', name: 'a', oldValue: 'b' }// ]
I prefer to use oo-object with oo.Object.seal, because it can eliminates the need for uncool 'set' and 'delete'.
ooObject; // Another exampleObject { superx y width height; ooObject; } { Square; } static { return ooObject; }
4. oo.Array is not 'array' but 'array-like object'.
const arr = oo; // arr is not array.arr instanceof Array !== true // But you can use all methods of Array.arr; // You can use for-loop on a browser supporting iterator.for let i of arr // not working on IE and Safari... // arr.method which returns 'array' returns 'array', not 'oo-array'.arr; // returns 'normal' array