The goal of this article is to educate budding jQuery developers (who do not have much exposure to JavaScript), to write clean, readable, maintainable code. This is in fact, a pointer to articles written by several JavaScript gurus.
For a jQuery developer, who does not have good expertise of JavaScript object oriented programming concepts, the entire code of a JavaScript file would reside in the "$(document).ready()” function. This includes various events, ajax calls, their call backs, UI effects etc.
In the case of a large scale business application (having hundreds of JavaScript files, each file having few thousands of lines), this would mean a lot of effort during reviews, white box testing and especially maintenance. Therefore, apart from learning the library, knowledge of good practices of core JavaScript language is a must.
Here is a collection of some of the best links, which would change the way you code. Read them in this sequence :)
1. JavaScript Best Practices by Christian Heilmann - http://dev.opera.com/articles/view/javascript-best-practices/
2. Show love to the object literal - http://www.wait-till-i.com/2006/02/16/show-love-to-the-object-literal/
3. Closures and lexical scoping in JavaScript - http://mark-story.com/posts/view/picking-up-javascript-closures-and-lexical-scoping
4. Private Members in JavaScript by Douglas Crockford - http://www.crockford.com/javascript/private.html
5. JavaScript programming patterns - http://www.klauskomenda.com/code/javascript-programming-patterns
6. Five things to do to a script before handing it over to the next developer - http://www.wait-till-i.com/2008/02/07/five-things-to-do-to-a-script-before-handing-it-over-to-the-next-developer/
Out of all the JavaScript design patterns in link #5, these are quite popular:
a. Singleton pattern [Thanks to HB Stone for explaining the concept in simpler terms]
b. Module pattern [Thanks to Christian Heilmann for the contribution]
c. Revealing module pattern [An updation to module pattern by Christian Heilmann]
I have tried these and like many others, I fell in love with the Revealing module pattern. The core of these patterns is the concept of closures. So make sure you are good at the basics!
Before trying out patterns, my jQuery code was like this:
$(document).ready(function() {
//page load ajax call
$.ajax({
type: "POST",
url: "CTypesHandler.ashx",
data:"{}",
success: callBackFunction,
error: function(){}
});
//ajax success callback function
callBackFunction(response)
{
//process ajax response here...
}
//form validation code
$('#FormId').validate(){
//code for validation
}
//click events
$('#submitButton').click(function(){
//code for submit click event
});
$('#saveButton').click(function(){
//code for save click event
});
});
After trying out Revealing Module pattern, my jQuery code is very clean like this:
var mySamplePage=function(){
var counter=0;
var callBackFunction = function(response)
{
//process ajax response here...
};
var pageLoadAjaxCalls=function(){
$.ajax({
type: "POST",
url: "CTypesHandler.ashx",
data:"{}",
success: callBackFunction,
error: function(){}
});
};
var bindEvents=function(){
$('#submitButton').click(function(){
//code for submit click event
counter++;
});
$('#saveButton').click(function(){
//code for save click event
});
};
var validate=function(){
$('#FormId').validate(){
//code for validation
};
};
var pageLoadOperations=function(){
validate();
pageLoadAjaxCalls();
bindEvents();
};
return{
init:pageLoadOperations
};
}
$(document).ready(function(){
vare page= new mySamplePage();
page.init();
});
To explain the differences in short, the first snippet has all code in document.ready function. This means, all variables, functions used are global. There is no modularization in the code. So if new events, UI logic are to be added, they add up to the mess.
In the case of patterns snippet, the code is clearly modularized. There are no global variables/functions. All members, functions are private. Only certain methods are exposed(by adding pointer in return statement). If new code has to be added in future, it can be added to the respective functions (like pageLoadAjaxCalls, bindEvents etc). Our document.ready is now very clean, and has control on what to be done, with ease.
Using good jQuery selectors gives optimized code; Using JavaScript design patterns gives clean and maintainable code. Happy coding :)