[removed] Best way to declare functions to be used globally?

Question

My javascript file is getting pretty big (3000+ lines) and I\'m getting confused as to how to layout my file and delare functions so that they can called anywhere in the

Answer 1

You can either declare them in Window scope:

window.variableName = myVariable;

or you can omit the var, which is the same as declaring something in window scope:

variableName = myVariable;

Answer 2

// We always use closures don't we?
window.MainModule = (function($, win, doc, undefined) {
    var foo, bar, modules; // List of local variables. 

    var modules["foobar"] = (function() {
        var someFunction = function() { ... };

        ...

        return { 
            init: someFunction,
            ... 
        };
    }());

    // hoist a variable into global scope
    window.Global = someLocal;

    return { 
        init: function() {
            for (var key in modules) {
                modules[key].init();
            }
        }
    };
}(jQuery, this, document));

// Let's kick off the MainModule on $.ready
// I recommend you do this in your `html` with page specific data.
$(window.MainModule.init);

[[Disclaimer]]: This is a pseudo-code module with some standard code excluded for brevity.

Anything declared with var x inside your main closure is available throughout the entire function. Of course it won't be set to what you expect it to be set unless you set it.

To control loading and flow split code into what's automatically executed in your self executing closure and what needs to manually inited by your controller with page/user specific parameters.

Answer 3

The modules section isn't properly defined ... here's a slightly tidied up example.

window.MainModule = (function($, win, doc, undefined) {
    var modules = {};

    // -- Create as many modules as you need ...
    modules["alerter"] = (function(){
        var someFunction = function(){ alert('I alert first'); };

        return { 
            init: someFunction
        };
    }());

    modules["alerter2"] = (function(){
        var someFunction = function(){ alert('I alert second'); };

        return { 
            init: someFunction
        };
    }());

    return { 
        init: function(){
            for (var key in modules){
                modules[key].init();
            }
        }
    };
}(jQuery, this, document));

$(window.MainModule.init);