你什么时候需要使用$（document）.ready（）？

I'm curious what situations exactly require the use of jquery's $(document).ready() or prototype's dom:loaded or any other variant of a handler for this event.

我很好奇什么情况确实需要使用jquery的$(document).ready()或prototype的dom:loaded或者此事件的处理程序的任何其他变体。

In all the browsers i've tested, it's entirely acceptable to begin interacting with html elements and the DOM immediately after the closing tag. (e.g.

在我测试的所有浏览器中,在结束标记之后立即开始与html元素和DOM进行交互是完全可以接受的。 (例如。

<div id="myID">
 My Div
</div>
<script type="text/javascript">
$('#myID').initializeElement();
</script>

So at this point i'm wondering whether $(document).ready() is merely there to reduce the thinking involved in writing javascript code that runs during page load. In the case of using $(document).ready() there is regularly rendering issues such as popping and 'artifacts' between the browser first starting to draw the page and the javascript actually executing when the page is 'ready'.

所以在这一点上我想知道$(document).ready()是否只是为了减少编写在页面加载期间运行的javascript代码所涉及的思路。在使用$(document).ready()的情况下,在浏览器首先开始绘制页面和javascript实际执行页面“准备好”之间经常出现渲染问题,例如弹出和“工件”。

Are there any scenarios where $(document).ready() is required?

有没有需要$(document).ready()的场景?

Are there any reasons I shouldn't be writing initialization scripts as demonstrated?

是否有任何理由我不应该编写初始化脚本?

3 个解决方案

#1

The main reason is external files that are included in the head. When you include a file in your <head> it gets run immediately. This means if the JavaScript interacts with the DOM it needs to be wrapped in Dom Ready.

主要原因是头部包含的外部文件。当您在中包含文件时,它会立即运行。这意味着如果JavaScript与DOM交互,则需要将其包装在Dom Ready中。

It's also needed for unobtrusive JavaScript and separations of concerns. Ideally your JavaScript and HTML are in separate files. If you follow this you will not have any in-line script tags in your HTML at all.

它也需要不引人注目的JavaScript和关注点的分离。理想情况下,您的JavaScript和HTML位于不同的文件中。如果您按照此操作,则HTML中根本不会包含任何内嵌脚本标记。

The second is to defend yourself against obscure browser bugs when you make mistakes. There are cases where it's not save to go and manipulate DOM elements immediately afterwards. (I'm looking at you IE6!)

第二个是在出错时保护自己免受不明确的浏览器错误的侵害。有些情况下,以后不会立即去操作DOM元素。 (我在看着你的IE6!)

The third reason is to keep your code clean.

第三个原因是保持代码清洁。

Mixing script tags into your HTML makes spaghetti code.

将脚本标记混合到HTML中会产生意大利面条代码。

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

We have code about ten times worse then that. It's a right pain to read / maintain

我们的代码差了十倍。阅读/维护是一种正确的痛苦

#2

In the case of external scripts $(document).ready() could be the only option. As for inline script it is a little different.

在外部脚本的情况下,$(document).ready()可能是唯一的选择。至于内联脚本,它有点不同。

According to HTML 4.01 standard it seems a little ambiguous whether or not the initialization technique shown above is legal:

根据HTML 4.01标准,无论上面显示的初始化技术是否合法,似乎有点模棱两可:

http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.4

Scripts that are executed when a document is loaded may be able to modify the document's contents dynamically. The ability to do so depends on the scripting language itself (e.g., the "document.write" statement in the HTML object model supported by some vendors).

加载文档时执行的脚本可能能够动态修改文档的内容。这样做的能力取决于脚本语言本身(例如,某些供应商支持的HTML对象模型中的“document.write”语句)。

HTML documents are constrained to conform to the HTML DTD both before and after processing any SCRIPT elements.

在处理任何SCRIPT元素之前和之后,HTML文档都被约束为符合HTML DTD。

In the HTML 5 draft it seems very clear that this practice is fully supported:

在HTML 5草案中,似乎非常清楚这种做法得到了完全支持:

http://www.w3.org/TR/html5/scripting-1.html#scripting-1

The following sample shows how a script element can be used to define a function that is then used by other parts of the document. It also shows how a script element can be used to invoke script while the document is being parsed, in this case to initialize the form's output.

以下示例显示了如何使用脚本元素定义随后由文档的其他部分使用的函数。它还显示了在解析文档时如何使用脚本元素来调用脚本,在这种情况下,初始化表单的输出。

<script>
 function calculate(form) {
   var price = 52000;
   if (form.elements.brakes.checked)
     price += 1000;
   if (form.elements.radio.checked)
     price += 2500;
   if (form.elements.turbo.checked)
     price += 5000;
   if (form.elements.sticker.checked)
     price += 250;
   form.elements.result.value = price;
 }
</script>
<form name="pricecalc" onsubmit="return false">
 <fieldset>
  <legend>Work out the price of your car</legend>
  <p>Base cost: £52000.</p>
  <p>Select additional options:</p>
  <ul onchange="calculate(form)">
   <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
   <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
   <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
   <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
  </ul>
  <p>Total: £<output name=result></output></p>
 </fieldset>
 <script>
  calculate(document.forms.pricecalc);
 </script>
</form>

#3

Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

在加载DOM之后和加载页面内容之前,其中的所有内容都将加载。

The $(document).ready() function has a ton of advantages over other ways of getting events to work. First of all, you don't have to put any "behavioral" markup in the HTML

$(document).ready()函数比其他使事件工作的方式有很多优点。首先,您不必在HTML中添加任何“行为”标记

With $(document).ready(), you can get your events to load or fire or whatever you want them to do before the window loads.

使用$(document).ready(),您可以在窗口加载之前将事件加载或触发或者您希望它们执行的操作。

#1