Question

How do you guys organise your javascript code? I know that it is good practice to store the code in an external .js file and this is fine for code that is run in multiple pages but how do you organise if you have, say 20 pages, and only 1 of them uses a particular function. Do you create a new external file for that 1 page or create the code inline?

Answer 1

I do two things:

1. I put all my site’s Javascript in one or more files;
2. I include that file or files on every page that uses any Javascript;
3. Those files are cached effectively such that they are only ever downloaded once (until they change); and
4. Pages call the functions they need from those external files.

If your site is one page then put it inline.

If your site is 20 pages and they all use a little bit of Javascript, put it all in one files, include it on every page and call the functions with inlien Javascript as necessary in each file.

I write about this and more in Supercharging Javascript in PHP. Sure it’s PHP-specific but the principles are universal.

Basically every extra HTTP request is a problem. So if you have 20 pages each with a different Javascript file then that’s a problem, even if those files are small. It’s better to combine all that Javascript in one file, download it just once (with effective caching) and just use what you need.

To give you an example. External JS file contains:

function delete_user(evt) { ...}
function suspend_user(evt) { ... }
function unsuspend_user(evt) { ... }

One of your Web pages contains:

$(function() {
  $("#delete").click(delete_user);
  $("#suspend").click(suspend_user);
  $("#unsuspend").click(unsuspend_user);
});

This way you get an external JS that contains all your site’s Javascript but none of it is actually used. Use comes from inline code in the pages. This way there is no overhead of having the larger JS file.

Whatever you do, don’t put in ALL initialization in your Javascript file. I once made this mistake and put a huge $(function() { … } function into the external file on the grounds that if the relevant IDs weren’t in the page, nothing would happen. There ended up being enough of this code to add nearly half a second to the page load time (and the site wasn’t that big).