Question

将jQuery DOM ready和自调用函数结合起来的正确方法是什么？我在网上看到了多种方法，但建议采用什么方法？

例如，您可以将DOM准备好放入自我调用函数

var app = (function($){

    // other stuff here

    init = function () {

    };

    $(function(){
        // DOM Ready stuff here
    });

    return {
        init: init
    }

})(jQuery);

app.init();

或者像这样

var app = (function(){

    // other stuff here

    init = function () {

    };

    return {
        init: init
    }

})();

$(function(){
    // DOM Ready stuff here
});

app.init();

或者根本不准备使用DOM？如果我是对的，这种方式还有一个尚未准备好的DOM的变化：

var app = (function($){

    var someElement = $("#foo"); // dom not ready?

    init = function () {

    };

    return {
        init: init
    }

})(jQuery);

app.init();

Answer 1

我想说的是：

//your jQuery is loaded before this script.

var app = (function(){
    // other stuff here
     var someElement = $("#foo"); //perfectly fine because dom is ready?
     init = function () {

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

jQuery(function($){  //<----here you can use $ safely
    app.init();
});

Answer 2

如果没有DOM Ready，您可能无法访问某些页面元素，这是正确的。虽然它取决于你加载你的脚本。如果将它放在结束体标记之前的底部，则不需要ready事件来访问元素。

（旁注：与DOM Ready事件图像一样，此时不会加载。为此你可以使用$（window）.load（）例如）。

我个人最喜欢第一个，但我也会将Dom Ready Code放在一个单独的功能中。实际上你不需要在调用函数后从外面调用app.init（），你可以在里面调用它。像这样：

var app = (function($){

    // Initialisation Functions (Don't forget var)
    var init = function () {
            // init stuff
        },
        domInit = function () {
            // DOM Ready stuff here
        };

    // Function calls
    init();

    $(function(){
        domInit();
    });

    // if you want to call those functions 
    // some time later from outside of app, 
    // return them:
    return {
        init: init,
        domInit: domInit
    }

})(jQuery);

Answer 3

DOM的使用完全取决于你的需要，如果你想访问DOM元素那么你应该使用DOM就好了，好像不使用它，那么当你访问任何节点并应用某些功能时可能会出现这种情况在它上面但尚未生成DOM元素。

使用自调用匿名函数是为了限制代码范围，使其更安全，更少全局并创建任何单例对象。

它类似于创建函数然后调用它。唯一的区别是这些函数没有任何名称，因此无法在其他任何地方访问/调用这些函数（因为它们没有名称）。

因此，您完全按照自己的意愿组织代码。

对于您的代码，第一种方法是最好的。

正确使用jQuery DOM ready和self invoking函数

3 个答案: