A cross-browser object property observer uses ES6 proxy underneath and with fallback on dirty-checking.
npm i xobject-observe -S
Include dist/observe.browser.js into your page and use xObjectObserve() function.
- Uses ES6 proxy and fallback on dirty-checking for old browsers
- Extensible and configurable detection backends
- Complete life-cycle management (
observe()andobserve.stop()) - Automated cross-browser support through SauceLabs (IE 10+, Chrome 33+, Firefox 33+, Safari 5+)
- 100% code coverage
- Available build for non-commonjs environment
const observe = require('xobject-observe');
// create an empty object and observe it
const obj = observe({}, (property, oldValue, newValue, obj) => {
console.log('%s (%s -> %s)', property, oldValue, newValue);
})
obj.a = 1; // log: "a (undefined -> 1)" (adding)
obj.a = 2;// log: "a (1 -> 2)" (changing)
obj.b = {c:1}; // log: "b (undefined -> {c:1})" (removing)
observe.stop(obj); // stop observing- es6proxy: (fastest way in JS) leverage ES6 Proxy to detect changes made on an object. No need to configure anything.
- dirtyChecking: (slow but works everywhere) regulary check if properties of the observed object between the last check (shallow object clone) and now. The comparison is done through a strict equality thus changes on nested objects are not supported. The check interval (in ms) is configurable through
observe.config.DIRTYCHECK_DELAY = 1000.
Other backends can easily be setted at runtime as new attributes in observe.methods.
Object.observe is obsolete. It was deprecated in Chrome 49 and was entirely removed in Chrome 52. xobject-observe offers a cross-browser alternative to it with a slightly easier API.
xobject-observe leverage instead the ES6 Proxy object API underneath for modern browsers and fallback on dirty-checking.
- IE9 support
- IE8 support
- (bonus) Opera support
npm run update: update dependenciesnpm run changelog: update changelognpm run test-browser: test browser