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

Question

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

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

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

Answer 1

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

如果您的代码位于 DOM 元素之前，例如在<head>标记中或在<body>某些 DOM 元素之前的部分的顶部或中间，并且该代码在首次初始化时确实尝试访问 DOM，则应将其放入$(document).ready()块中，以便在 DOM 准备好或应该移动 ` 标签之前不执行。

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

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

虽然您显然有 jQuery 可用，但您可以阅读此答案以获得更详细的描述：纯 JavaScript 等效于 jQuery 的 $.ready() 如何在页面/dom 准备好时调用函数。

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

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

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

另外，请记住，在何处声明函数并不重要。仅从何处调用函数才重要。因此，您可以在$(document).ready(). 您只需要确保不会过早调用任何访问 DOM 的函数。