Here’s a trick I learned from Valerio (author of Mootools) on how to handle options for classes and functions. After refactoring a couple of legacy scripts I thought I’d share for those of you who might not know it already. This example below uses the Mootools syntax for class creation, but the rest of it can be used even on its own I think.

So let’s say you have a class that takes numerous options but you want to set up some defaults. Even for the values that you don’t want to be default, you want to make sure they are defined. Here’s how you can write your code to do all of that clearly and easily:

var exampleObject = new Class ({
	initialize: function(options) {
		this.options = Object.extend({
			items: [],
			start: 0,
			stop: -1
		}, options || {});

		this.execute();
	},
	execute: function(){
		if(this.options.stop < 0 || this.options.stop > this.options.items.length) this.options.stop = this.options.items.length;
		//let's not use items.each here because we want to set a start and stop index
		for(i = this.options.start; i < this.options.stop; i++){
			alert(this.options.items[i]);
		}
	}
});

In this simple example, we could initialize one of these objects like so:

 var myObject = new exampleObject();

and nothing would happen because the items in the options are an empty array, but it wouldn’t break. If we did this instead:

var myObject = new exampleObject({
	items: ['one', 'two', 'three']
});

You’ll get an alert for one, two, and three. start remains at index 0, and stop defaults to the length of the array.

var myObject = new exampleObject({
	items: ['one', 'two', 'three'],
	start: 1
});

Now we’ll only get alerts for two and three.

var myObject = new exampleObject({
	items: ['one', 'two', 'three'],
	start: 1,
	stop: 2
});

And here we’ll only get an alert for two and three.

This entry was posted on Tuesday, November 14th, 2006 at 3:48 pm and is filed under Best Practices, CNET JS Standards, Code Snippets, Examples, MooTools, Optimization, Organizing Code, Reference. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.