在$（document）.ready（）函数中包装jquery代码有多重要？

我一直用jQuery开发我的前端代码已经有一段时间了，因为我在rails中实现了部分内容。通常我会使用content_for :javascript来包含一些特定于视图的代码。

我的问题是，我最终得到了很多脚本标签，因为大多数都是jquery代码，我输入了很多$(document).ready(function() {});

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

$(document).ready()有一个目的 – 在DOM完成加载后执行一些代码，现在可以访问或修改了。

如果您的代码位于DOM元素之前，例如在标记之前或部分的顶部或中间，在某些DOM元素之前，并且该代码在第一次初始化时尝试访问DOM，那么它应该被放置进入$(document).ready()块，这样在DOM准备好之前就不会执行，或者应该移动`标签。

如果您的代码位于中的标记中，该标记位于需要访问的DOM元素之后，那么您的代码不需要位于$(document).ready()块中。

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

虽然你明显有jQuery可用，你可以阅读这个答案以获得更详细的描述：纯JavaScript等同于jQuery的$ .ready（）如何在页面/ dom准备就绪时调用函数。

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

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

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

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

如果您的代码确实访问了您的DOM元素，但是您将其放在$(document).ready() ，则可能会导致失败或产生意外行为。请参阅以下示例：

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

从上面的简单代码片段开始，即使您的文档尚未完全加载或准备就绪，在加载脚本时会listB计算listB ，而在文档加载和准备好时计算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'); });