jQuery, where to load functions best practice

Question

Hi All,

I am using jQuery and I am loading dynamic HTML via PHP. My question is, what is the best practice concerning elements/attributes that may or may not exist on any given page? Should I have one .js file containing all the possibilities (I would think this is inefficient) or should I use a bunch of script tags (that seems also inefficient)? Is there a "lazy" initialization way to do this?

For instance, say I have the following:

<div id="list">
   <ul>
      <li>some</li>
      <li>stuff</li>
      <li>here</li>
   </ul>
</div>

But this list is generated only if necessary, not on all pages. Should my global js file have the following:

$("#list").click( function(){ 
   $(this).removeClass('collapse').addClass('expand'); 
});

Or should I add it in a script tag just above the div that is being generated at the bottom of the page after creating the div is output via PHP?

Thanks SO, you guys are awesome. Can't wait until I know enough to start answering some questions!

Edit, just thought of a quick way to ask. Which is better, jQuery running with a bunch of selectors that don't match or passing javascript in script tags via PHP?

Answer 1

No need to have seperate files (if you want to, feel free to split it up of course). If you have a #list element, the jQuery code will only be applied if there is a #list class somewhere on your page. It would be too much work (at least for me) to move everything in seperate files.

I have seen this snippet to check if the element is really on the page

if($("body").hasClass("#link")) {
     //do something
}

Answer 2

2 Things:

Loading 1 big js file is faster than loading many small ones, as it avoids the overhead of many connections

If your can tell clients to cache the js then it will only be loaded on the first visit.

Also you say add it to the HTML just above the tag. When a web browser encounters JS it stops rendering until the JS is loaded and executed. So you want to put the JS at the bottom of the page, so your page appears to the user as soon as possible.

Not that I'm saying 1 big file is the way to go mind, it depends on many things. These are just things to bear in mind.

EDIT TO ADD: But I would definitely put it in external js and not HTML, so you can get client side caching working for you. And call those JS from the bottom of your page so as not to block rendering. Sorry, this is a bit of a messy answer but this is a big topic, there are many factors to consider and no right answer.

Answer 3

The answers here are good, but I thought I would offer another approach just for kicks. The browser will load a file as javascript no matter what the extension is, so you can for instance load js.php as a JS file and it will work just fine.

Using this, at one point I created a PHP method to load javascript file, so you can do something like

$this->loadJavascript('jquery1.4.js')->loadJavascript('util.js');  

When run this converts to a script tag that looks like:

<script type="text/javascript" src="js.php?file1=jquery1.4.js&file2=util.js"></script>

js.php is a php script that grabs the JS files requested combines them into one file, minifies it, saves it to a JS/cache directory with a name like jquery1.4.js-util.js, then outputs the contents (it obviously uses a cached version if it exists first.)

Then you can add a simple parameter like ?debugJS=true, which will bypass all of this and instead put all of the actual JS files being used on the page so that you can debug more easily.

The point is that this give you sort of a 'best of both worlds' fix.

This is all totally unnecessary, but it was a neat little trick for a site that was loading 10-15 JS files per page, which is obviously ties up all of the browsers http connections for a while.