Javascript: лучший способ объявить функции, которые будут использоваться во всем мире?

Мой javascript файл становится довольно большим (3000+ строк), и я смущаюсь о том, как настроить мои файлы и функции delare, чтобы они могли вызывать в любом месте файла.

Подводя итог моему JS файлу, на данный момент немного похоже:

//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
}

У меня возникают проблемы с этим, так как некоторые функции, которые я вызываю в местах, как представляется, не объявляются во время вызова или недоступны для globaly. Все это сейчас очень запутанно!

Может ли кто-нибудь предложить лучший способ компоновки большого файла js/jquery с определенными функциями JS, объектами и переменными, доступными для ссылки в любом месте файла.

UPDATE:

Итак, чтобы упростить это правильно (см. мои комментарии)?

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

Ответ 1

Раздел модулей не определен правильно... вот немного приведённый пример.

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

Ответ 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 kick off the MainModule on $.ready
// I recommend you do this in your `html` with page specific data.
$(window.MainModule.init);

[[Отказ от ответственности]]. Это модуль псевдокода с некоторым стандартным кодом, исключенным для краткости.

Все, что объявлено с помощью var x внутри вашего основного закрытия, доступно во всей функции. Конечно, он не будет настроен на то, что вы ожидаете от него, если вы не установите его.

Чтобы контролировать загрузку и разделение кода разделения на то, что автоматически выполняется в вашем закрытии, и что нужно вручную inited вашим контроллером с параметрами страницы/пользователя.

Ответ 3

Вы можете объявить их в области "Окно":

window.variableName = myVariable;

или вы можете опустить var, что является тем же самым, что и объявление в области окна:

variableName = myVariable;