javascript - 这些文档就绪类型之间有什么区别？何时使用它们？

Question

我环顾四周，并没有真正找到什么时候最好使用这些文档就绪类型的东西。我使用的主要是 $(document).ready(function() { ，因为语法对我来说很干净且易于阅读，但是使用或不使用它比以下有优势吗？

示例1:

$(document).ready(function() {

示例2:

(function($) { 
    // code here
  $(function() {
    // code here
  });
})(jQuery);

示例3:

$(window).load(function(){  
     //code here 
}); 

示例 4:

jQuery(document).ready( function(){

示例5:

jQuery(document).ready(function($) {
    //code here
});

示例 6:

$(function(){

我知道这里有一些关于此的问题，但我的问题是询问何时实际使用这些以及它将如何从其他人使用它中受益？

Answer 1

要理解ready()，你需要了解DOMContentLoaded事件。

DOMContentLoaded当文档被完全下载和解析，所有外部脚本和内部脚本被下载和执行并且 DOM 准备开始操作时，事件被触发。此事件不会等待样式表、图像和子框架完成加载。有一个load可用于检测完全加载的页面的事件。

如您所见here DomContentLoaded除 IE9 以下之外，几乎所有浏览器都支持该事件。有类似 readystatechange 的事件可用于模拟DOMContentLoaded在IE8和IE7中，我们需要调用doScroll()看是否抛出异常，一旦DOM加载就不会抛出任何异常。

您不必担心这些跨浏览器差异，ready() jQuery 抽象了传递回调以调用 DOMContentLoaded 的功能事件。

DOMContentLoaded 事件始于 FF，后来被 Chrome、Opera 和 IE 等所有主流浏览器采用，但在 HTML5 中标准化。仅当文档为 load 时才会触发此事件将在成功加载任何资源(例如<script> <img>)时触发。现在我们知道 DOMContentLoaded 之间存在差距。和load事件，许多人在加载其他资源时使用此事件的回调来执行一些 javascript 初始化。

您甚至可以使用 Chrome 中的 DeveloperTools 等工具查看这些事件

示例 2 和示例 1 的功能相同 - 用于传递 DOMContentLoaded 的回调。 ，除了在第二个中，您将 jQuery 作为参数传递，但将其读取为 $，因此该函数表达式内的所有函数都可以与 $ 一起使用，并且您仍然可以在外部使用其他一些库，使用 $ 作为具有其自己的函数的全局对象，这样使用相同 $ 作为全局对象的两个库之间的冲突就得到解决。

示例 1 和示例 4 相同，但在使用 $ 或 jQuery 作为全局对象方面存在细微差别，其他一些库可能在其代码中使用 $，但 jQuery 不太可能在其他库中用作全局对象(例如, AngularJS 有自己的全局对象 angular )

示例 5 再次在外部使用 jQuery，并在函数回调中使用 $。因此，与 $ 的命名空间冲突再次得到解决。

希望这能提供一些见解:)