相关疑难解决方法(0)

我的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? …

我正在启动一个新项目,我正在审查我的最佳实践,试图防止出现任何问题,同时也看看我遇到了什么样的坏习惯.

我对使用模块/子模块模式在Javascript中处理初始化序列的方式感到非常满意.

让我们说,我的代码最终会有类似的东西

FOO.init()
FOO.module1.init()
FOO.module2.init()
FOO.module3.init()
FOO.module4.init()

在全球范围内.

我本质上是这样做的(错误检查和细节因为简洁而被忽略):

var FOO = (function (me) {
    me.init = function () {
        for (var i in me.inits) {
            me.inits[i]();
        }
    }

    return me; 
}(FOO || {}));

var FOO = (function (parent) {
    var me = parent.module1 = parent.module1 || {};

    me.init = function () {
    }

    parent.inits.push(me.init);

    return parent;
}(FOO || {}));

$(document).ready(FOO.init);

用于初始化.

我知道我之前已经阅读过此内容,但我现在无法找到正确的搜索字词来查找文章.是否有经过深思熟虑和测试的模式处理像这样的情景中的初始化？

谢谢.

编辑:重读这个,我认为一些上下文将告知答案.

在我的例子中,每个模块/子模块都在自己的文件中.基本模块定义站点的基本功能,子模块启用不同的功能.例如,子模块可以在搜索框上连接自动完成,而另一个子模块可以将静态标题图像转换为旋转横幅.CMS启用/禁用子模块,因此我确实希望在基本模块内离开显式调用,以便CMS可以管理所有内容.我还有CMS特定的方法来实现这一点,但我寻找一个通用的Javascript模式来实现这一点,以提供可能使用不同CMS的项目之间的一致性和可重用性.