Question

To keep organized, I’d like to keep all the javascript for my site in a single file:

scripts.js

However, some of my scripts are only used on on some pages, other scripts are only used on other pages.

In my document-ready function it looks like this:

function home_page() {
  // image rotator with "global" variables I only need on the home page
}

$('#form')... // jQuery form validation on another page 

The problem with this, is that I am getting javascript to execute on pages it’s not even needed. I know there is a better way to organize this but I’m not sure where to start…

Answer 1

I usually do something like this, or some variation (a little pseudo code below) :

var site = {
    home: {
       init: function() {
           var self=this; //for some reference later, used quite often
           $('somebutton').on('click', do_some_other_function);
           var externalFile=self.myAjax('http://google.com');
       },
       myAjax: function(url) {
           return $.getJSON(url);
       }
    },
    about: {
       init: function() {
           var self=this;
           $('aboutElement').fadeIn(300, function() {
               self.popup('This is all about me!');
           });
       },
       popup: function(msg) {
           alert(msg);
       }
    }
};
$(function() {
    switch($('body').attr('class')) {
       case 'home':
          site.home.init(); 
       break;
       case 'about':
          site.about.init();
       break;
       default: 
          site.error.init(); //or just home etc. depends on the site
    }
});