Javascript in the last years is growing in popularity, and this thaks to Ajax, but even more thanks to some frameworks such as Prototype and JQuery (and lot lot more…) that solved compatibility problems, and made JavaScript programming even funny.
Now I wanna speak about a problem where I felt into when using Prototype (but it would happen also with JQuery and company). This framework allows you to make rich classes in your code in a real easy way, but whenever you do this you usually got into the problem of handling options.
Let’s take a simple example. Assume you wanna create a Javascript Widget as GMaps, that let you to navigate around an image. Following the prototype way you should start writing something like this
/* Definition of MyMap Class */
var MyMap = Class.create({
initialize: function(options) {
/* initializazion of our object */
},
/* other code here */
})
As we can see, we are passing an object to our initialize function, in this specific case an object called option. In this object we will have some options, defined as follow.
/* Instance of MyMap creation */
var map = new MyMap {
container: 'container-id',
zoom_level: '1',
initial_position: {top: 10, left: 20}
/* and more others... */
}
With this code we are instancing a MyMap object, and we wanna pass some options, so next time we will use the map object, we can call tem using something like map.options. To do something like this we can modify our initialize method. The first time, I did something like this.
var MyMap = Class.create({
initialize: function(options) {
*/ check the presence of at least one option because
we could call MyMap also without options */
if (options) {
/* now I set the options */
this.options.container = options.container || 'default-container-id';
this.options.zoom = options.zoom || '0';
this.options.positions = options.positions || {top: 0, left: 0};
this.options.sizes = options.sizes || {height: 200, width: 200};
this.options.speed = options.speed || 10;
},
/* other code here */
})
It wasn’t bad, and it was quite clear, but reading some articles on the web I found something that took my attention. You can find the article here, and if you look at the code in the last part, you will find this way to initialize options.
initialize: function() {
this.options = Object.extend({
container: 'container'
}, arguments[0] || {});
this.initLinks();
},
/* other code here */
What took my attention the most was that Object.extend, so I tried to make some research about, and I found a better way to initialize my options. Let’s see how this mechanism works out. The Object#extend method copies all properties from the source to the destination object, so we can easily understand how that code works. Basically we define all our default options, and then through the extend method we can override those options that are defined from the user. Let’s see how could be our new code.
var MyMap = Class.create({
initialize: function(options) {
this.options = Object.extend({
container: 'default-container-id',
zoom: 0,
positions: {top: 0, left: 0},
sizes: {height: 200, width: 200},
speed: 10
}, options || {});
}
})
As you can see now the code is much less than before, and it looks much more clear. In addition to this we don’t have anymore the need to check the existence of the options argument with the if we used in a first glance. I Hope you will find these snippets of code useful and if there are any doubts, don’t hesitate to put some lines in the comments.
Give style to your code!
Javascript Sense Weblog 