5 Things You Are Doing Wrong With jQuery

If you haven't heard of jQuery, then you live under a rock. If you haven't used jQuery, then you're missing out. If you are already using jQuery, you're doing it wrong (maybe). Here are 5 things commonly done wrong with jQuery.

​Calling jQuery a Framework

jQuery is a great set of tools, built into a framework for tools. It is not, itself, a framework. A framework employs a development pattern to allow the developer to rapidly produce web sites and/or applications. jQuery provides several utility functions for querying and manipulating the DOM. If you consider jQuery your framework, especially for an application, chances are you have created a good deal of spaghetti code.

jQuery does a great job of complimenting frameworks, however. Give Backbone.js or Spine a try for MVC development, or Knockout.js for MVVM. Each library creates a nice framework for building web applications with varying degrees of abstraction.

Going Crazy With Plugins

jQuery makes is very easy to develop and use plugins that are capable of adding absolutely any additional functionality. However, not all plugins are created equal. Shop around for what you need and choose a plugin that does it perfectly. Make sure the code is lightweight, and the project is reasonably active. It can be a real pain in the butt to start using a plugin all over the place only to find out it is buggy, bloated, and no longer supported by the developer. There are many great quality plugins out there if you look for them. I'm partial to ezCookie and Plugin Loader myself (for obvious reasons).  If all else fails, it is easy to create your own plugin.

Not Using the Ready Event

jQuery fires an event as soon as the DOM has finished loading. This is the first moment that script can run dependably against the DOM, but before all of the images have finished loading, making it fire sooner than the onLoad event. Ideally, all script should be executed when the ready event fires. This is done by wrapping the scripts within the binding to the event:

1. $(function(){
2.     console.log("Hello World!");
3. });

Referencing Every Element By ID

In the beginning, there was document.getElementById("myElement"). jQuery uses a library that simplifies this to $("#myElement"), but it doesn't stop there. jQuery uses Sizzle to query for DOM elements using CSS3 selectors, along with a few home grown selectors CSS3 should have but doesn't. Be sure to check out jQuery's documentation on using selectors.

Not Using Callbacks

Most jQuery functions support an optional callback to be executed when the function is finished. This is most apparent and useful when calling AJAX functions:

1. $.getJSON("myfile.php",myParams);
2. console.log("I'm done!");

The code above looks like it will log to the console as soon as the AJAX call is finished, but it will actually log to the console after the AJAX call is first made, which will likely be long before any data is actually returned by the call. By passing in a callback, you can ensure that the callback code is not executed until the AJAX call has returned:

1. $.getJSON("myfile.php", myParams, function(response){
2.     console.log("Now I'm REALLY done!");
3.     console.log("Plus I have response data!");
4.     console.log(response);
5. });

jQuery is a great tool that I have grown to love using on a regular basis. As with any tool, however, it can be abused and mishandled. Combining jQuery with a solid framework, templating system, and plugins will result in lightweight, easy to read, and fast web applications.