Organizing jQuery Code

Organizing jQuery code is not easy. Up to now, especially on small/medium scale projects, I used to have a huge jQuery ready function and place all my code there. Some times if I needed to run something on specific elements I was just doing a quick test to check if the element was on the document.

$(document).ready(function(){
	//jQuery code...
	if ( $('.someClass').length ) { // if element exists then run the below code
		// Do something
	}
});Check out this Pen!

The above technique is not too bad, it works just fine for a small or medium sized site, but what happens with a larger site that uses heavy javascript code? The answer came from a presentation I watched recently (Simple JavaScript & CSS Management With Rack by Mr. Avand Amiri – I strongly encourage you to watch it as well). The solution is really clean and pretty smart. Just create a javascript file (actually you can break it to as many files as you want) that will hold all your main objects. Below is a very basic “Greetings” object.

var Greetings = {
	alertFn: function () {
		alert('OK');
	},
 
	john: {
		sayHelloToJohn: function() {
			alert ('Hello John!');
		}
	}
// do something else, etc.
}Check out this Pen!

At the example above the object “Greetings” contains two methods (functions). As you can see, I could go further and create nested objects with their own methods. The idea is to organize my methods as well as I can.

Then I only have to call them into our usual jQuery ready function like this.

$(document).ready(function(){
  Greetings.alertFn();
});
// or
$(document).ready(function(){
	Greetings.john.sayHelloToJohn();
});Check out this Pen!

Keep in mind that this way I can follow any code structure/organization I need, so for example I can follow my application’s controllers structure and naming convention, or whatever makes more sense for my app. This way we get a simple, more robust, well-organised jQuery code, and not the classic document ready soup…

One thought on “Organizing jQuery Code”

Leave a Reply