Custom Getters and Setters with MooTools

By  on  

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 MooTools

This 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.

Recent Features

  • By
    Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • By
    HTML5&#8217;s placeholder Attribute

    HTML5 has introduced many features to the browser;  some HTML-based, some in the form of JavaScript APIs, but all of them useful.  One of my favorites if the introduction of the placeholder attribute to INPUT elements.  The placeholder attribute shows text in a field until the...

  • By
    Get Slick with MooTools Kwicks

    When I first saw MooTools graphical navigation, I was impressed. I thought it was a very simple yet creative way of using Flash. When I right-clicked and saw that it was JavaScript, I was floored. How could they achieve such...

Discussion

  1. Gabe

    Hmm I like the idea. However, I feel like it would be more useful if external classes couldn’t access the class’s property/variable directly anyway; ‘private’ variables. I do love how this demonstrates the flexibility of Mootools framework.

  2. I implemented something like this some time ago for a custom MVC framework, as you mention a great feature is that you can spy on object properties. My main reason for doing this was for binding my views to property changes. It would be great to implement something like this with event listeners for properties so you could call something like

    myInstance.addEvent('change:value', function(obj, property, value){
      console.log(property + " has changed to: " + value);
    });  
    
  3. Sorry, define[GS]etter are the old deprecated methods. defineProperty is the new version. This is built in to the JavaScript language and provides a familar syntax for properties. Doing blah.value = 123 will call the setter for “value” if you’ve provided one.

    See https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Objects#Defining_getters_and_setters

  4. AFAIK none, <= IE8 still has a big chunk of marketshare.

  5. Patrick Welborn

    Thanks for sharing this. Can I use this code as a utility in my MooTools implementations? I like using get/set methods in my programming, and this most mirrors what I have seen in other languages. Seems like it should be part of MooTools More.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!