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

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

除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");
});

Answer 2

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

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

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

您无需担心这些 cross-browser 差异，jQuery 中的 ready() 抽象了传递回调以调用 DOMContentLoaded 事件的功能。

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

您甚至可以使用 Chrome

中的 DeveloperTools 等工具查看这些事件

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

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

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

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

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

Whats is the difference between these document ready types? When to use them?

javascript

jquery

dom

domdocument