这些文档准备类型之间有什么区别？什么时候使用它们？

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事件，但下面＆lt; IE9。有像readystatechange之类的事件可以用来模拟IE8和IE7中的DOMContentLoaded，我们需要调用doScroll（）并查看是否抛出异常，一旦DOM出现，它就不会抛出任何异常加载。

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

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

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

示例2和示例1在功能方面都是相同的 - 用于传递DOMContentLoaded的回调，除了在第二个中，你将jQuery作为参数传递但是将其读作$，所以所有函数表达式中的函数可以使用$，你可以使用$作为具有自己的函数的全局对象外部的其他库，这样就解决了使用相同$作为全局对象的两个库之间的冲突。

示例1＆amp; 4是相同但使用$或jQuery作为全局对象的细微差别，其他一些库可能使用$代码，但jQuery在其他库中用作全局对象的可能性很小（例如，AngularJS有自己的全局对象）对象angular）

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

希望这能提供一些见解：）

Answer 2

除了3之外，一切都完全相同。

来自jQuery - What are differences between $(document).ready and $(window).load?

$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});