Question

我的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
}

我遇到了这个问题，因为我调用的一些函数似乎在调用时没有被声明或者没有全局可用。这一切都非常令人困惑！

有人建议使用某些JS函数，对象和变量来布局大型js / jquery文件的最佳方法可以在文件中的任何位置引用。

更新

所以为了简化它是正确的（参见我的评论）？

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

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

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

[[免责声明]] ：这是一个伪代码模块，为简洁起见，不包括一些标准代码。

在整个函数中可以使用主闭包内的var x声明的任何内容。当然除非你设置它，否则它不会被设置为你期望的设置。

控制加载和流程拆分代码到自动执行闭包中自动执行的内容以及控制器需要手动inited的页面/用户特定参数。

Answer 3

您可以在Window范围中声明它们：

window.variableName = myVariable;

或者你可以省略var，这与在窗口范围内声明某些内容相同：

variableName = myVariable;

Javascript：声明要在全局使用的函数的最佳方法？

3 个答案: