javascript - 使用自调用匿名函数和 $(document).ready

Question

我最近才了解到自调用匿名函数。我遇到的一些代码片段使用了自调用函数以及 $(document).ready。两者同时使用似乎是多余的或毫无意义的。

有没有你会使用的情况

(function(){
   $(document).ready();
})();

对比

$(document).ready(function(){
   (function(){})();
});

我认为您可能希望立即执行脚本或在加载 DOM 后执行脚本。我不明白你为什么要同时使用两者。

谢谢。

Answer 1

第一个示例肯定有一个用例。如果您在同一页面上加载了其他 JS 库/脚本，则无法保证它们不会覆盖 $ 变量。 (当您在同一页面上使用 Prototype 和 jQuery 时，这很常见)。

因此，如果 Prototype 使用 $，则您需要随时使用 jQuery 来使用 jQuery。这可能会变得非常丑陋:

jQuery(function(){
    jQuery('a', '#content').bind('click', function(){
        if(jQuery(this).attr('href') == 'www.google.com')
        {
            alert("This link goes to Google");
            jQuery(this).addClass('clicked'));
        }
    });
})

请记住，我们不能使用 $，因为它是全局范围内 Prototype 的一个方法。

但是如果你把它包在里面......

(function($){
    $(function(){

        // your code here

    });
})(jQuery);

$ 实际上会在内部引用 jQuery 库，同时仍然在外部引用 Prototype!这有助于整理您的代码:

(function($){
    $(function{}(
        jQuery('a', '#content').bind('click', function(){
            if(jQuery(this).attr('href') == 'www.google.com')
            {
                alert("This link goes to Google");
                jQuery(this).addClass('clicked'));
            }
        });
    ));
})(jQuery);

这是 jQuery 扩展的常见模式，以确保它们始终添加到 jQuery 对象中，但可以使用 $ 编写以保持代码整洁。