Organzing javascript / jQuery for multiple web pages

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

Pointy · Accepted Answer · 2012-03-12 17:19:45Z

2

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.

answered Mar 12, 2012 at 17:19

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2012-03-12 18:12:06Z

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

Diodeus - James MacFarlane · Accepted Answer · 2012-03-12 17:18:41Z

1

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.

answered Mar 12, 2012 at 17:18

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Comments

Risto Novik · Accepted Answer · 2012-03-12 17:24:41Z

1

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

answered Mar 12, 2012 at 17:24

Risto Novik

8,30511 gold badges52 silver badges67 bronze badges

1 Comment

redconservatory Over a year ago

I like this approach but how do I detect if the page is a home page or an about page? The other two methods detect by selector (which I am familiar with) but I am not as familiar with your method...

Collectives™ on Stack Overflow

Organzing javascript / jQuery for multiple web pages

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related