Binary Kitchen

In the previous months I migrated lots of JavaScript code lines to jQuery. This for six websites and I can tell you, the file size of all these JavaScript files together have shrunk by 52.6% which is pretty impressive! Without doubt, these websites will benefit from a performance boost: Improved loading and response times, less duplications and less bugs.

For the migration process I refreshed my jQuery knowledge, produced some pretty code and gained some good insights into jQuery I want to share with the world.

Tip 1: Use Google's Free jQuery Distribution Network (CDN)

Probably you already know it. But I can't emphasize enough: Don't load your jQuery code from your webserver. Just load Google's JSAPI in the footer of your website and then add a JS inline block like this one to load jQuery remotely as a minified version which is delivered from Google's fast CDN:

google.load("jquery", "1.4.4");

Tip 2: Use Google's callback instead of jQuery's document.ready() handler

In most cases, we implement something like this to execute code when jQuery has been loaded:

$(document).ready(function() { // put all your jQuery goodness in here. });

Don't do that when you include jQuery with Google's loader (see Tip 1). Remember, when you load jQuery remotely then it's a question of your bandwidth when jQuery is ready for use. And since you load it with Google's loader, only Google's loader can tell you when it's ready (Law of Demeter!)

Don't use body.onload either since this can be easily destroyed by other runtimes. The solution is to use Google's setOnLoadCallback():

google.setOnLoadCallback(function() { // put all your jQuery goodness in here.});

Tip 3: How to open external links in new Windows within 5 jQuery code lines ?

Let me demonstrate the elegance of jQuery. For example one client wants to open all links with rel="external" in a new window. Here a nice example that requires no further explanation:

 google.setOnLoadCallback(function() {
$('a[rel*=external]').click(function() {
return !window.open($(this).attr('href'));
});
});

Tip 4: Don't worry if an element doesn't exist

In jQuery never write if conditions like these:

 var overlay = $('#overlay');if (overlay)
overlay.toggle(); 

The idea is to toggle element with the ID="overlay". But these code lines are completely wrong. In jQuery all elements are wrapped within jQuery containers, no matter if they exist or not. Therefore this if-condition always becomes true.

Ideally, you should always check for the .length attribute like this:

 var overlay = $('#overlay');if (overlay.length)
overlay.toggle(); 

But still, this idea isn't perfect. For the letters l-e-n-g-t-h you are wasting six bytes. Just write jQuery code lines short like this:

 $('#overlay').toggle(); 

End of story. Internally jQuery won't call toggle() on non-existing elements. Unlike other server-side programming languages jQuery is well protected against null-pointer crashes.

Tip 5: Swapping is missing

Currently jQuery comes without swapping functions. They are missed everywhere. After some research I came up with my own jQuery method swapWith():

 jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copyTo = $(to).clone(true);$(to).replaceWith($(this).clone(true));
$(this).replaceWith(copyTo);
});
};// Example usage:
$(content).swapWith($(targetContent)); 

You see, a new jQuery method called swapWith is added to jQuery's huge arsenal and can be applied to any jQuery container. In the example, the whole HTML of $(content) is swapped with $(targetContent). The method swapWith() uses one placeholder only to reduce memory usage.

PS: If you want to swap the event handlers as well, add a second parameter and set it to true in the replaceWith() methods.

That's all for now folks. Feel free to share your jQuery experience and trinks below.