关于javascript:jQuery document.ready vs自调用匿名函数

jQuery document.ready vs self calling anonymous function

这两者有什么区别。

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

  • (function(){ ... })();

  • 这两个函数同时被调用吗?
    我知道,当浏览器呈现整个HTML页面时会触发document.ready,但第二个函数(自调用匿名函数)会怎样。 是否等待浏览器完成呈现页面,或者只要遇到它就会调用它?


    • $(document).ready(function(){ ... });或短$(function(){...});

      DOM is ready意味着你可以开始查询元素时调用这个函数。 .ready()将在不同的浏览器上使用不同的方式来确保DOM确实准备就绪。

    • (function(){ ... })();

      这只不过是一个在浏览器解释ecma-/javascript时尽快调用自身的函数。因此,你不太可能在这里成功地对DOM elements采取行动。


    只要在Javascript中遇到(function(){...})();,就会执行(function(){...})();

    加载文档后将执行$(document).ready()$(function(){...});$(document).ready()的快捷方式,并完全相同。


  • $(document).ready(function() { ... });只是将该函数绑定到文档的ready事件,因此,正如您所说,当文档加载时,事件会触发。

  • (function($) { ... })(jQuery);实际上是Javascript的构造,所有这段代码都是将jQuery对象作为参数传递给function($)并运行该函数,因此在该函数内,$始终引用对象。这有助于解决命名空间冲突等问题。

  • 因此,#1在文档加载时执行,而#2立即运行,jQuery对象名为$作为速记。


    当DOM(Document对象模型)准备好执行JavaScript代码时,将执行以下代码。

    1
    2
    3
    $(document).ready(function(){
      // Write code here
    });

    以上代码的简写是:

    1
    2
    3
    $(function(){
      // write code here
    });

    下面显示的代码是一个自我调用的匿名JavaScript函数,并将尽快执行
    浏览器解释它:

    1
    2
    3
    (function(){
      //write code here
    })();   // It is the parenthesis here that call the function.

    下面显示的jQuery自调用函数将全局jQuery对象作为参数传递
    function($)。这使得$可以在自调用函数中本地使用而无需使用
    遍历定义的全局范围。 jQuery不是唯一使用$的库,所以这个
    减少潜在的命名冲突。

    1
    2
    3
    (function($){
      //some code
    })(jQuery);


    在DOM"构建"之后运行document.ready。自我调用函数立即运行 - 如果在构造DOM之前插入