JavaScript Proxy Example

proxyExample.js

/*

JavaScript Proxy

First read this...
https://hacks.mozilla.org/2015/07/es6-in-depth-proxies-and-reflect/

Above is an old article, proxy is available, except in IE...
https://caniuse.com/proxy

Interesting ideas like using it for validation and updating aria
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

*/

// example
(function(){
	// represents our data model
	var data = {
		name : 'Joel',
		title : 'web dev'
	};

	// represents listener with code to do on change to our data model
	window.addEventListener("obj-set", function(ev) {
		// check that it's our data model that has changed
		if(ev.detail.target === data){
				console.log('a property of our data model has been set:');
				console.log(ev.detail);
		}
	});

	var dataProxy = getProxy(data);

	// alter data model
	dataProxy.favoriteColor = 'blue';

	// generic proxy util
	// will work for array instead of obj but the console dialog doesn't quite fit
	function getProxy(obj){
		return new Proxy(obj, {
		  get: function (target, key, receiver) {
		    console.log(`getting ${key}!`);
		    return Reflect.get(target, key, receiver);
		  },
		  set: function (target, key, value, receiver) {
		    console.log(`setting ${key}!`);
		
			// create and dispatch the event
			var event = new CustomEvent("obj-set", {
				detail : {
					target : target,
					receiver : receiver,
					key : key,
					value : value
				}
			});
			window.dispatchEvent(event);

		    return Reflect.set(target, key, value, receiver);
		  },
		  defineProperty: function (target, propertyKey, attributes){
		  	console.log(`defining property ${propertyKey} with:`);
			console.log(attributes);
		  	return Reflect.defineProperty(target, propertyKey, attributes);
		  },
		  deleteProperty: function (target, propertyKey){
		  	console.log(`deleting property ${propertyKey}`);
		  	return Reflect.deleteProperty(target, propertyKey);
		  },
		  preventExtensions: function (target){
		  	console.log(`preventing extensions for:`);
			console.log(target);
		  	return Reflect.preventExtensions(target);
		  },
		  setPrototypeOf: function (target, prototype){
		  	console.log(`set prototype to ${prototype}`);
		  	return Reflect.setPrototypeOf(target, prototype);
		  }
		});
	}
})();