Norway


Watching for changes to an object’s property has always been a much sought after task; many shims have been used over the years to listen to object changes.  These days we have better methods for listening to object changes:  the Proxy API.  Sindre Sorhus has created on-change, a tiny JavaScript tool that allows you to listen for changes on JavaScript objects and arrays!

on-change JavaScript

Since the on-change code is so tiny, here it is in its full glory:

'use strict';

module.exports = (object, onChange) => {
	const handler = {
		get(target, property, receiver) {
			try {
				return new Proxy(target[property], handler);
			} catch (err) {
				return Reflect.get(target, property, receiver);
			}
		},
		defineProperty(target, property, descriptor) {
			onChange();
			return Reflect.defineProperty(target, property, descriptor);
		},
		deleteProperty(target, property) {
			onChange();
			return Reflect.deleteProperty(target, property);
		}
	};

	return new Proxy(object, handler);
};

The onChange function returns a proxy which you’ll use to make any object changes.

Using on-change

Pass onChange the object you’d like to spy on and a change handler function:

let j = {
    a: 1
};

// Upon change,  to server
let changeable = onChange(j, () => (j));

Then use that Proxy to change properties and get notified of changes:


// Make a change that would trigger changes
changeable.a = 2;

// save() is triggered!

// j.a === 2

Note that the original object’s values also change R; that’s the beauty of Proxy!  Also note that on-change doesn’t tell you which property changed; the use case, as Sindre describes, is an object (to server, etc.) when any part of an object changes.  You could also use ti for a library with a render function, re-rendering the content whenever a property changed!

This on-change library is really nice if you don’t need to know which property changed, just that something changed.

The post Watch for Object Changes with JavaScript appeared first on David Walsh Blog.

Watch for Object Changes with JavaScript - ba vlny16 pc20dwalsh 20160705 - Watch for Object Changes with JavaScript



Source link

No tags for this post.

LEAVE A REPLY

Please enter your comment!
Please enter your name here