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

我用jQuery开发前端代码已经有一段时间了，因为我在rails中用partials实现了这个站点。我经常使用

content\u for:javascript

来包装一些特定于视图的代码

我的问题是，我最终得到了很多脚本标记，因为它们大多数是jquery代码，所以我键入了很多

$（document）.ready（function（）{}）

所以我的问题是，是否有必要将所有内容都包装在document.ready中，如果我有太多的
document.ready
会影响性能吗？
$（document）。ready（）
有一个目的——在DOM完成加载并准备好访问或修改后执行一些代码

如果您的代码位于DOM元素之前，例如在
标记中，或者在某些DOM元素之前的
部分的顶部或中间，并且该代码在首次初始化时尝试访问DOM，则应将其放入
$（document）.ready（）中
block，以便在DOM准备就绪或`标记移动之前不会执行它

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

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

虽然您显然有jQuery可用，但您可以阅读此答案以获得更详细的描述：


拥有多个
$（document）.ready（）
块就像为一个事件注册多个回调一样。这真的没什么大不了的。每一个都只需要对setup进行一对额外的函数调用，并且在执行时是一个额外的回调执行。如果这是编写代码最干净的方法，那么请务必使用多个
$（document）.ready（）
块


总之，在以下情况下，将代码放入
$（document）.ready（）
块中：

特定的代码块在首次运行时需要访问DOM，并且代码位于脚本标记中，该标记位于
标记的末尾之前，或者位于它可能需要访问的某些DOM元素之前
在以下情况下，无需将代码放入
$（document）.ready（）
块：

第一次初始化时运行的代码部分不访问DOM
代码被放置在它引用的DOM元素后面的
标记中
标记被标记为
defer
，因为这明确指示浏览器将此脚本标记的运行延迟到解析DOM之后

另外，请记住，函数在哪里声明并不重要。它只影响从何处调用函数。因此，您可以在
$（document.ready（）
之外定义任意数量的函数。您只需确保访问DOM的任何函数都不会被过早调用。
$（document）.ready（）
有一个目的——在DOM完成加载并准备好访问或修改后执行一些代码

如果您的代码位于DOM元素之前，例如在
标记中，或者在某些DOM元素之前的
部分的顶部或中间，并且该代码在首次初始化时尝试访问DOM，则应将其放入
$（document）.ready（）中
block，以便在DOM准备就绪或`标记移动之前不会执行它

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

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

虽然您显然有jQuery可用，但您可以阅读此答案以获得更详细的描述：


拥有多个
$（document）.ready（）
块就像为一个事件注册多个回调一样。这真的没什么大不了的。每一个都只需要对setup进行一对额外的函数调用，并且在执行时是一个额外的回调执行。如果这是编写代码最干净的方法，那么请务必使用多个
$（document）.ready（）
块


总之，在以下情况下，将代码放入
$（document）.ready（）
块中：

特定的代码块在首次运行时需要访问DOM，并且代码位于脚本标记中，该标记位于
标记的末尾之前，或者位于它可能需要访问的某些DOM元素之前
在以下情况下，无需将代码放入
$（document）.ready（）
块：

第一次初始化时运行的代码部分不访问DOM
代码被放置在它引用的DOM元素后面的
标记中
标记被标记为
defer
，因为这明确指示浏览器将此脚本标记的运行延迟到解析DOM之后

另外，请记住，函数在哪里声明并不重要。它只影响从何处调用函数。因此，您可以在
$（document.ready（）
之外定义任意数量的函数。您只需确保访问DOM的任何函数不会被过早调用。
如果您的代码确实访问了DOM元素，但将其放在
$（document）.ready（）
之外，它可能会
var listA = $('ul.myclass').children();
$(document).ready(function(){
    var listB = $('ul.myclass').children();
});

function manipulateDOM( el ) {
  document.getElementById(el).classList.add('myClass');
}

$(document).ready(function()){
  manipulateDOM('myEl');
});