CODEWITHSUNDEEP
javascriptjquerymodule
redconservatory
redconservatory

Reputation: 21924

Organzing javascript / jQuery for multiple web pages

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...

Upvotes: 0

Views: 143

Answers (4)

adeneo
adeneo

Reputation: 318182

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
    }
});

Upvotes: 1

Risto Novik
Risto Novik

Reputation: 8295

You could use for each page object literals to get different scopes.

​var home = {

    other: function() {

    },

    init: function() {

    }
};

var about = {

    sendButton: function(e) {

    },        

    other: function() {

    },

    init: function() {

    }
}

var pagesToLoad = [home, about];
pagesToLoad.foreach(function(page) {
   page.init();
});​

Upvotes: 1

Pointy
Pointy

Reputation: 413712

One thing you could do would be to use classes on the <html> or <body> tag to establish the type of each page. The JavaScript code could then use fairly cheap .is() tests before deciding to apply groups of behaviors.

if ($('body').is('.catalog-page')) {
  // ... apply behaviors needed only by "catalog" pages ...
}

Even in IE6 and 7, making even a few dozen tests like that won't cause performance problems.

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

I ususally have an init() function that goes something like this:

function init() {

    if($('#someElement').length>1) {
         runSomeInitFunction()
    }
    ... more of the same for other elements ...

}

Basically just check to see if the element exists on the page, if it does, run its own initialization function, if not, skip it.

The whole JS codes is cached by the browser after the first page load anyway, so there's no point in fragmenting your JS file down into page-specific pieces. That just makes it a maintenance nightmare.

Upvotes: 1

Related Questions