在$（document）.ready（）函数中包装jquery代码有多重要？ [英] How important it is to wrap jquery code in $(document).ready() function?
问题描述
我一直用jQuery开发我的前端代码已经有一段时间了，因为我在rails中实现了部分内容。通常我会使用 content_for：javascript 来包含一些特定于视图的代码。
I have been developing my frontend code with jQuery for a while now, and since I am implementing the site with partials in rails. Often I would use content_for :javascript to wrap up some code that is specific for a view.
我的问题是，我最终得到了很多脚本标签，因为大多数都是jquery代码，我输入了很多 $（document）.ready（function（）{}）;
and my question is, I end up with a lot of script tags and since most of them are jquery code, I have typed up a lot of $(document).ready(function() {});
所以我的问题是，是否有必要将所有内容都包含在内document.ready，如果我有太多的 document.ready 会影响性能吗？
So my question is, whether it is necessary to wrap everything in document.ready, and if I have too many of document.ready will it affect the performance?
推荐答案
$（document）.ready（）有一个目的 - 在DOM加载完成后执行一些代码，现在可以访问或修改。
$(document).ready() has one purpose - to execute some code after the DOM has finished loading and is now ready for access or modification.
如果您的代码位于DOM元素之前，例如< head> 标记或在某些DOM元素之前< body> 部分的顶部或中间，并且该代码在首次初始化时尝试访问DOM，然后它应放入 $（document）.ready（）阻止所以在DOM准备好之前它不会执行或者应该移动`标签。
If your code is located before DOM elements such as in the <head> tag or in the top or middle of the <body> section before some DOM elements and that code does attempt to access the DOM upon first initialization, then it should be placed into a $(document).ready() block so it will not execute before the DOM is ready or the ` tag should be moved.
如果您的代码位于< body> < script> 标记内>那是在它需要访问的DOM元素之后，那么你的代码不需要在 $（document）.ready（）块中。
If your code is in a <script> tag within the <body> that is after the DOM elements that it needs to access then your code does not need to be in a $(document).ready() block.
或者，如果您的代码在初始化时未被调用（例如，它只会在其他事件后调用）或者您的代码在初始化时不会访问DOM，那么该代码不需要在 $（document）.ready（）中阻止。
Or, if your code is not called upon initialization (e.g. it's only called later upon other events) or your code does not access the DOM upon initialization, then that code does not need to be inside a $(document).ready() block.
虽然你明显有jQuery可用，你可以阅读这个答案以获得更详细的描述：纯JavaScript相当于jQuery的$ .ready（）如何调用函数时page / dom已准备就绪。
Though you obviously have jQuery available, you can read this answer for a more detailed description: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it.
多个 $（文件） .ready（） blocks就像为一个事件注册多个回调一样。这真的没什么大不了的。每个只需要额外的几个函数调用来设置，并且在执行时是额外的回调执行。如果这是编写代码最简洁的方法，那么一定要使用多个 $（document）.ready（） blocks。
Having multiple $(document).ready() blocks is just like registering multiple callbacks for an event. It's really no big deal. Each one just takes an extra couple function calls to setup and is an extra callback execution at execution time. If that's the cleanest way to write your code, then by all means use multiple $(document).ready() blocks.
总结一下，在以下情况下将代码放入 $（document）.ready（）块中：
To summarize, put code into a $(document).ready() block when:
- 特定代码块在首次运行时需要访问DOM，代码位于脚本标记之前，该标记位于结束之前。
< body>标记或放置在可能需要访问的某些DOM元素之前。
- A specific block of code needs to access the DOM when it is first run and the code is located in a script tag that is placed before the end of the
<body>tag or is placed before some DOM elements that it might need to access.
在以下情况下无需将代码放入 $（文件）.ready（）块中。
There is no need to put code into a $(document).ready() block when:
- 首次初始化时运行的代码部分无法访问DOM。
- 代码放入
< ;脚本>标记在它引用的DOM元素之后。 -
< script>标记被标记为defer，因为这明确指示浏览器延迟此运行脚本标记，直到解析DOM之后。
- The part of the code that runs at first initialization does not access the DOM.
- The code is placed into a
<script>tag that is after the DOM elements that it references. - The
<script>tag is markeddeferbecause this explicitly instructs the browser to delay the running of this script tag until after the DOM has been parsed.
另外，请记住声明函数的位置无关紧要。它只对调用函数的位置很重要。因此，您可以在 $（document）.ready（）之外定义任意数量的函数。您只需要确保访问DOM的任何函数都不会太快调用。
Also, keep in mind that it does not matter where functions are declared. It only matters where the functions are called from. So, you can define as many functions as you want outside of $(document).ready(). You just have to make sure that any functions that access the DOM are not called too soon.
这篇关于在$（document）.ready（）函数中包装jquery代码有多重要？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
