Hello everyone,
During this weekend I watched a couple of sessions in channel 9 recorded during the MIX 11 event. I really liked Elijah Manor’s talk whose title is Good JavaScript Habits for C# Developers. In addition to simple tips on JavaScript programming, such as False-y Values and Comparison Operators, Elijah showed some techniques that not every JavaScript programmer is aware of. One of them is using Immediate Functions for creating objects in modularized applications. Today, I will share how to do that.
First of all, let’s understand what the term Immediate Function refers to. It is a sintax that enables you to execute a function as soon as it is defined. This pattern is used to wrap an amount of work without leaving any global variables behind. Here is an example:
example1.js
Using this pattern we are able to instantiate JavaScript objects without polluting global space with temporary variables. Moreover, the pattern supports the creation of modularized apps by extending existing objects on demand. Let me illustrate it with an example. Imagine we are creating a bookstore. For now, we just need add, remove and getAll operations. Here is the first version of the bookstore object:
bookstore.js
Notice the bookstore parameter in line 1. We use this variable thoughout the Immediate Function to append new operations to it. In line 25 we pass a new object to the bookstore and keep it in a global variable window.bookstore, which enables us to access bookstore anytime in our application. In addition, after the function is executed the variable books is discarted maintaining the global space clear.
Now, imagine later on the project we need additional operations such as sortByTitle and filterByAuhtor. This can be easily done by creating a new file and appending new operations to the bookstore object, such as the example below:
bookstore-extensions.js
This piece of code is similiar to the last one, except by the parameter passed to the Immediate Function in line 11, which uses the existing bookstore instance. That way, new operations are added to the bookstore object and all temporary variables are discarted after the function is executed. Later, we can combine all the JavaScript files and deploy it as a single bookstore.
This pattern is also useful to avoid variable overlapping between different libraries. A very common example is the dollar sign ($) which is used by different existing JavaScript libraries. To make sure the sign refes to jQuery library, for example, we make it a parameter in the Immediate Function and pass the jQuery instance in the initizalization. See the example below:
bookstore-ajax.js
That’s it guys.
For more tips on JavaScript programming, take a look at Elijah Manor’s talk, there are lots of others stuff there. Also, if you are looking for a good JavaScript reference, I strongly recommend the JavaScript Patterns book by Stoyan Stefanov which includes lots of samples of how to create JavaScript code for large ans scalable applications.
See you,
Fernando