Organize your jQuery with Object Literal Notation

by: Joe Watkins

  • 24 March 2015

A few years back I learned of a great way to organize JavaScript using Object Literal Notation. I use this method daily to keep my jQuery driven projects organized and easier to maintain.

First we need to wrap our heads around this truth about JavaScript:

Almost everything in JavaScript is an object.

What are some benefits of using Object Literals?

  • Makes our JavaScript easier to read
  • Makes our JavaScript easier to debug
  • Way less merge conflicts in Version Control
  • We can find code blocks quicker
  • Makes our code more portable
  • Plays nicely with minification

Ladies and Gentlemen start your Engines

To start things off we will setup the Engine object inside of the jQuery ready method. I like to throw a comment at the end of each object. As we add objects this can help keep track of where you are in the code.

$(document).ready(function(){

	var Engine = {

	}; // Engine

});

Creatively naming your objects helps with organization

I like to stick with a naming convention that makes sense to me when I’m creating new objects and functions. Let’s add a ui property that will house our first few methods inside of the Engine object. Spend some time thinking about naming here so when revisiting the code things make sense. These properties should be comma separated should you add more.

$(document).ready(function(){

	var Engine = {

		ui : {

		} // ui

	}; // Engine

});

Now I will add a method as a property of the ui object named helloWorld. This is my handy-dandy function I will later call using dot notation.

$(document).ready(function(){

	var Engine = {

		ui : {

			helloWorld : function(){
				alert("Hello World");
			} // helloWorld

		} // ui

	}; // Engine

});

How to trigger your functions

Now that we have created our app’s scaffolding and our helloWorld function is in place we can trigger it by simply using dot notation. e.g. Engine.ui.helloWorld(); Be sure to do this inside of the jQuery ready method so it fires when the document is ready.

$(document).ready(function(){

	var Engine = {

		ui : {

			helloWorld : function(){
				alert("Hello World");
			} // helloWorld

		} // ui

	}; // Engine

	Engine.ui.helloWorld();

});

Multiple functions with variables

Now we are ready to start rocking by adding more functions. Be sure to remember that these are objects and should be comma separated. These objects can be passed variables as well. Don’t forget to add your comments to each function as well.

$(document).ready(function(){

	var Engine = {

		ui : {

			helloWorld : function(){
				alert("Hello World");
			}, // helloWorld

			alertFun : function(phrase){
				/*
				I can even add comments here as well
				explaining what the heck this thing does
				*/
				alert(phrase);
			}, // alertFun

		} // ui

	}; // Engine

	Engine.ui.helloWorld();
	Engine.ui.alertFun("I like cats");

});

That’s basically it! Now you can quickly handle the order of when things are fired in your app, quickly turn on and off functions by simply commenting/uncommenting each function’s dot notation trigger, and sleep better knowing your doing your best to stay away from ol’ jQuery Spaghetti code that can be common with larger code bases.