When using web components, a common task is to read attributes from the element.
The naive way is:
var Proto = Object.create(HTMLElement.prototype); _.extend(Proto, { attachedCallback: function(){ if(this.readAttributeAsJson('config-ready')){ //do something } }, readAttributeAsJson : function(name) { if(!this.hasAttribute(name)) { return false; } return JSON.parse(this.getAttribute(name)); } }); document.registerElement('vs-text', { prototype: Proto });
The better way is:
var Proto = Object.create(HTMLElement.prototype, { configReady: { get: function(){ return this.readAttributeAsJson('config-ready'); } } }); _.extend(Proto, { attachedCallback: function(){ if(this.configReady){ //do something } }, readAttributeAsJson : function(name) { if(!this.hasAttribute(name)) { return false; } return JSON.parse(this.getAttribute(name)); } }); document.registerElement('vs-text', { prototype: Proto });
Here we are using object getter and setters.
Another example where if you do a.id = 1, and then try to read a.id, you get 2
var _id = null; var a = {}; Object.defineProperty(a, "id", { get: function() { console.log("get!"); return _id; }, set: function(value) { console.log("set!"); _id = 2 * value; } });