SiteCrafting, Inc.

This blog entry shows you how to cache a jQuery object into a variable for future use. I present a naming convention that I have been using that visually separates jQuery objects from other JavaScript variables.Just wanted to get out a quick blurb about a jQuery convention I have been using lately. As a running example, I'll use a script were you want to center an inner element within an outer element.

A common practice to speed up jQuery scripts is to cache the jQuery object in a variable. This creates code that looks like this:

// Config
var outer = $('#outer');
var inner = $('#inner');

// Compute
var topPx = (outer.height() - inner.height()) / 2;
var leftPx = (outer.width() - inner.width()) / 2;

// Apply CSS
inner.css({
    top: topPx,
    left: leftPx
});

The piece you should notice is that there is no clear way to tell the difference between jQuery objects (which are a little special in that they can run jQuery functions) and other variables (such as the border above).My solution is to append a $ in front of any variable name which is intended to be a jQuery object. The results are below:

// Config
var $outer = $('#outer');
var $inner = $('#inner');

// Compute
var topPx = ($outer.height() - $inner.height()) / 2;
var leftPx = ($outer.width() - $inner.width()) /2;

// Apply CSS
$inner.css({
    top: topPx,
    left: leftPx
});

The difference is you can pick out a jQuery object just by looking at it's variable name. This is powerful stuff when scanning someone else's code. jQuery is such a difference beast that this form of caching shows these differences at a glance. This convention also is useful when using the 'this' variable. You can cache it like this:

var $this = $(this);

I have started doing this in the majoring of the functions where I use 'this'. You can see how useful it is with this jQuery centering extention:

$.fn.centerInParent = function() {
    // Config
    var $this = $(this);
    var $parent = $this.parent('div');

    // Compute
    var topPx = ($parent.height() - $this.height()) / 2;
    var leftPx = ($parent.width() - $this.width()) / 2;

    // Apply CSS
    $this.css({
        top: topPx,
        left: leftPx
    });

    return this;
};

Notice that I don't have to rewrap 'this' in jQuery because it is already cached. And I can return the original 'this' because I haven't done anything to it. Also notice how quickly you can see what variables are jQuery and what are simple application state (or configuration).