Question

I have a site that uses a javascript object to hold various functions and variable data.

var Site = {
    Page: {
    ...some functions...
    },
    Player: {
    ...more functions and variables...
    }
}

The problem I’m faced with is that the header file where the script resides has grown to around 500 lines of code. I would like to break the sections like Page and Player up into separate files for easier manipulation. An obstacle of this is that some of the functions rely on output from PHP, and must remain on the base page. Is there a way that I can include separate files into the object and preserve the structure already in place?

Answer 1

Note that by convention, variables starting with a capital letter are reserved for constructors.

File 1:

var Site = Site || {};

Site.Page = {     
    ...some functions...
}

File 2:

var Site = Site || {};

Site.Player = {
    ...more functions...
};

You can also use an extend function so that you declare an object literal, then copy the proerties and values to a base object. Or you can use an IIFE to assign functions. This is handy if you are doing feature detection and creating different functions depending on the outcome.

var Site = Site || {};

(function(global) {

  function Player() {
    // stuff
  }

  global.Site.Player = Player;

  if (test) {
    global.Site.someFn = function() {
      // stuff 1
    };

  } else {
    global.Site.someFn = function() {
      // stuff 2
    };
  }

  ...

}(this));

or some version of the above.