Question

Currently now I’m organising my JavaScript functions as follows:

var websiteName = {
    options: {
        optionOne: "Boom!",
        optionTwo: "Hello World!"
    },
    init: function () {
        websiteName.homepageOnlyFunction();
        websiteName.anotherFunction();
    },
    homepageOnlyFunction: function() {
        // A function only used on the homepage
    },    
    anotherFunction: function() {
        /*
        A function that is used
        throughout the site.
        */
    }
}
$(document).ready(function() {
    websiteName.init();
});

I would like some insight on what the best practice is for organising javascript.

Answer 1

I personally arrange my code as a set of modules (one module per file). Each module is an object that generally does one thing.

// x.js
...

module.exports = {
  ...
}

These modules are packaged together by a module packer like browserify and then bootstrapped and initialized in some fashion.

I personally use a dependency injection library like ncore to bootstrap my modules.

As for organization within a module, do whatever you want, have some module scoped functions, have some variables, have some objects, etc.