Working with Dojo all day and scoping out MooTools at night gives me a unique perspective; I get to constantly evaluate the two frameworks and mentally move functionalities from framework to framework. One small but handy feature within the Dojo Toolkit’s Dijit UI Framework is its set/get system. Dijit allows developers to add custom methods tied into simple get and set methods to allow manipulation properties into and on the way out of a class. I took a few moments to implement this system in MooTools.The idea is that a Class instance has properties:
var MyClass = new Class({
value: 10/*, more... */
});
Instead of simply setting and getting object properties directly, sometimes they need to be treated before coming in or going out. For setting, it can be a sort of internal formatting or validation. For getting, it’s mostly formatting. The method formats are _get[SomeAttrName]Attr and _set[SomeAttrName]Attr. With that in mind, it’s time to create the mixin class.JavaScript GetSet for MooToolsThis new functionality will be independently coded as a class meant as a Class mixin using the Implements property:
(function() {
// Turns "thisPropertyName" into "ThisPropertyName"
function getFunctionName(key, getSet) {
return "_" + getSet + key.charAt(0).toUpperCase() + key.slice(1) + "Attr";
}
// Implement the getter / setter
this.GetSet = new Class({
// A custom getter that looks for _get
get: function(key) {
var fn = this[getFunctionName(key, "get")];
return (fn && fn.call(this, key)) || this[key];
},
set: function(key, value) {
var fn = this[getFunctionName(key, "set")];
if(fn) {
fn.call(this, value);
}
else {
this[key] = value;
}
// Returning "this" to allow chaining
return this;
}
});
})();
The GetSet will feature two method, get and set, and will check for the presence of custom set and get methods; if so, those methods are called, and if not, the property is simply set or returned. Now let’s look at a sample usage:
// Create a test class
var TestClass = new Class({
// Implement the new class
Implements: [GetSet],
// The custom getter
_getValueAttr: function() {
return this.value / 10;
},
// The custom setter
_setValueAttr: function(value) {
this.value = value * 10;
}
});
// Create a test class instance
var inst = new TestClass({
value: 8
});
/*
inst.set("value", 20); // inst.value = 200
inst.get("value"); // inst.value = 20
*/
In this case, we’ve set custom get and set methods which will handle the class’ value property. On the way in, the value is multiple by 10 and then set on the object. On the way out, the value is divided by 10. Of course, not the most realistic of scenarios, but this example provides a very simple illustration of how these methods can be used.So what would be a more realistic scenario? As I said above, custom setters can be very useful as an internal validator. Both the getters and setters are valuable, however, because they also provide a way to “spy” on object properties and have multiple reactions to their changes.Custom Getters and Setters with MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.
