使用自调用匿名函数和$（文档）.ready [英] Using Self Calling Anonymous Functions and $(document).ready

问题描述

我刚刚学会了自称匿名函数。我遇到的一些代码片段使用了自调用函数和$（document）.ready。使用两者似乎多余或毫无意义。

是否存在使用

<$ p的情况$ p> （function（）{
$（document）.ready（）;
}）（）;


vs。

  $（document）.ready（function（）{
（function（）{}）（）; 
}）; 
  

我认为您要么立即执行脚本，要么在DOM加载后执行。我不明白为什么你们两个都在一起使用。

谢谢。

解决方案

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

因此，如果Prototype使用 $ ，你需要在你想使用jQuery的时候使用 jQuery 。这可能会非常难看：

  jQuery（function（）{
 jQuery（'a'，'＃content'） ）.bind（'click'，function（）{
 if（jQuery（this）.attr（'href'）=='www.google.com'）
 {
 alert（ 此链接转到Google）; 
 jQuery（this）.addClass（'clicked'））; 
} 
}）; 
}）
  

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

但如果你把它包装在这个...

 （函数（$）{
 $（函数（）{
 
 //您的代码在这里
 
}）; 
}）（jQuery）; 
  

$ 实际上会引用jQuery库里面还在外面指的是Prototype！这有助于整理您的代码：

 （函数（$）{
 $（函数{}（$ b） $ b jQuery（'a'，'＃content'）。bind（'click'，function（）{
 if（jQuery（this）.attr（'href'）=='www.google.com' ）
 {
 alert（此链接转到Google）; 
 jQuery（this）.addClass（'clicked'））; 
} 
}）; 
））; 
}）（jQuery）; 
  

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

I just recently learned about self calling anonymous functions. Some snippets of code that I came across used the self calling function along with the $(document).ready. It seems redundant, or pointless, to use both.

Is there a case where you'd use

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

vs.

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

I figure that you'd either want the script to be executed right away or after the DOM loaded. I can't see why you'd use both together.

Thanks.

解决方案

There's definitely a use case for the first example. If you have other JS libraries/scripts loaded on the same page, there's no guarantee that they aren't overwriting the $ variable. (This is very common when you have Prototype and jQuery on the same page).

So if Prototype is using $, you would need to use jQuery anytime you wanted to work with jQuery. This can get quite ugly:

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

Remember, we can't use $ because that is a method from Prototype in the global scope.

But if you wrapped it inside of this..

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

        // your code here

    });
})(jQuery);

The $ would actually reference the jQuery library inside while still referring to Prototype on the outside! This can help tidy up your code:

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

This is a common pattern with jQuery extensions to ensure that they are always added to the jQuery object, but can be written using $ to keep the code tidy.

这篇关于使用自调用匿名函数和$（文档）.ready的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！