将jquery代码包装在$(document）.ready(）函数中是多么重要

How important it is to wrap jquery code in $(document).ready() function?

本文关键字：函数 ready 包装 jquery document 代码      更新时间：2023-09-26

我已经用jQuery开发我的前端代码一段时间了，因为我正在用rails中的部分实现这个网站。通常，我会使用 content_for :javascript 来包装一些特定于视图的代码。

我的问题是，我最终得到了很多脚本标签，并且由于其中大多数是jquery代码，因此我输入了很多$(document).ready(function() {});

所以我的问题是，是否有必要将所有内容包装在document.ready中，如果我有太多document.ready会影响性能吗？

$(document).ready()有一个目的 - 在 DOM 完成加载并且现在准备好访问或修改后执行一些代码。

如果您的代码位于 DOM 元素之前，例如在 <head> 标记中或在某些 DOM 元素之前的<body>部分的顶部或中间，并且该代码确实在首次初始化时尝试访问 DOM，那么它应该放在一个 $(document).ready() 块中，这样它就不会在 DOM 准备就绪之前执行，或者应该移动 ' 标记。

如果您的代码位于<body>中<script>标记中，该标记位于它需要访问的 DOM 元素之后，则您的代码不需要位于 $(document).ready() 块中。

或者，如果您的代码在初始化时未被调用

（例如，它仅在其他事件时被调用），或者您的代码在初始化时不访问 DOM，则该代码不需要位于 $(document).ready() 块中。

虽然你显然有jQuery可用，但你可以阅读这个答案以获得更详细的描述：纯JavaScript相当于jQuery的$.ready（）如何在page/dom准备好时调用函数。

拥有多个$(document).ready()块就像为一个事件注册多个回调一样。 真的没什么大不了的。 每个函数只需要额外的几个函数调用来设置，并且在执行时是一个额外的回调执行。 如果这是编写代码的最干净方法，那么一定要使用多个$(document).ready()块。

总而言之，在以下情况下将代码放入$(document).ready()块中：

  1. 特定的代码块在首次运行时需要访问 DOM，并且代码位于脚本标记中，该脚本标记放置在 <body> 标记的末尾之前，或者放置在可能需要访问的某些 DOM 元素之前。

在以下情况下，无需将代码放入$(document).ready()块中：

  1. 首次初始化时运行的代码部分不访问 DOM。
  2. 代码被放置在它引用的 DOM 元素之后的 <script> 标记中。
  3. <script> 标记标记为 defer，因为这显式指示浏览器延迟此脚本标记的运行，直到解析 DOM 之后。

另外，请记住，声明函数的位置无关紧要。 只有从何处调用函数才重要。 因此，您可以在$(document).ready()之外定义任意数量的函数。 你只需要确保访问 DOM 的任何函数都不会被太快调用。

如果你的代码确实访问了你的 DOM 元素，但你把它放在$(document).ready()之外，它可能会失败或产生意外的行为。请参阅下面的示例：

var listA = $('ul.myclass').children();
$(document).ready(function(){
    var listB = $('ul.myclass').children();
});

从上面的简单代码片段来看，即使文档尚未完全加载或准备就绪，脚本加载时也会立即计算listA，而listB是在文档加载并准备就绪时计算的。

在这种情况下，listA和listB可能会有所不同，即使它们是从同一个 DOM 选择器计算的。

您可以初始化一些变量值或预加载一些与 document.ready() 之外的 UI 无关的值。但是，当您想初始化UI或在启动时访问DOM，请始终在文档完成加载时执行此操作（document.ready）。

我同意@jfriend00所说的一切，但也请记住，并非所有代码都需要在document.ready事件中。 我的意思是您可以随时创建函数，它们只需要在 document.ready 执行。 例如：

function manipulateDOM( el ) {
  document.getElementById(el).classList.add('myClass');
}
$(document).ready(function()){
  manipulateDOM('myEl');
});
相关文章：