Javascript : Best way to declare functions to be used globally?
<p><strong>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 file.</strong></p>

<p>To summarise my JS file looks a little like this at the moment:</p>

<pre><code>//ALL GLOBAL VARIABLES FIRST DECLARED HERE
var var1 , var2 ,var3

$(document).ready(function(){

//JQUERY STUFF

});

//ALL FUNCTIONS THAT NEED TO BE GLOBAL DECLARED HERE
function myFunction(){
//do some stuff here
}
</code></pre>

<p>I am running into problems with this as some functions I call in places don't seem to be declared at the time of calling or aren't available globaly. It's all very confusing now! </p>

<p><strong>Could someone suggest the best way to layout a big js/jquery file with certain JS Functions, Objects and Variables available to be referenced anywhere in the file.</strong></p>

<p><strong>UPDATE:</strong></p>

<p>So to simplify it this correct (see my comments)?</p>

<pre><code>window.MainModule = (function($, win, doc, undefined) {//WHAT IS BEING PASSED IN HERE?
    var foo, bar, modules; //VARIABLES ACCESSIBLE ANYWHERE

    var modules["foobar"] = (function() {//WHAT IS A MODULE? WHEN WOULD I USE A SEPERATE MODULE?
        var someFunction = function() { ... };//DECLARING MY FUNCTIONS?

        ...

        return { 
            init: someFunction,//IS THIS WHERE I USE/BIND MY FUNCTIONS TO EVENTS AND ELEMENTS?
            ... 
        };
    }());

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

    return { 
        init: function() {//FUNCTION TO INIT ALL MODULES?
            for (var key in modules) {
                modules[key].init();
            }
        }
    };
}(jQuery, this, document));
</code></pre>
