'Activating' JavaScript for each page in large web sites

Question

Hi there,

I am working on a medium size web site that has plenty of custom JavaScript written for it.

At present all the script is stored in seperate JS files for each area of functionality. These are then minified and combined into a single, large JS file during our build process.

For each page, the relevant JavaScript is usually executed based on the presence of an element with a particular class on the page. For example:

$(document).ready(function()
{
    var foo = $("div.dostufftome")
    if(foo)
    {
         // dostuff
    }
}

I'm concerned that this approach seems a little fragile, and also potentially quite slow.

The only other alternative I can see is to put the 'activation' code inline in the HTML in a CData section, with the bulk of the code in the attached JS file.

Grateful for any advice.

Answer 1

If you're concerned about performance, it's better to trigger behavior off of elements with "id" values. In my experience, unless there are many hundreds of such checks that your code needs to make, there's no noticeable performance drag.

You can possibly help even more by having more than one level of check. Give some pages with relatively unique needs a special class on the body tag, and then you can nest a bunch of tests within a test for that class. That way, pages that can be ruled out for some Javascript functionality will only require a single check.

Answer 2

Less fragile than the actual contents would be if you gave the body tag a class (or ID). For big blocks of stuff a simple, one-line if works:

if( $("body").hasClass("doStuff") )

and for anything outside of that area you can just use $("body.doStuff div.example").hide() and suchlike.

Answer 3

This is a perfectly valid way of doing things. As long as your selectors are quick this is certainly not fragile, nor slow. Once you JS file is loaded, it's cached.

You could optimize this a bit as follows:

$(document).ready(function()
{

    if($("div.dostufftome"))
    {
         // dostuff
    }
}