Question

我很好奇在什么情况下需要使用jquery的$（document）.ready（）或prototype的dom：loaded或此事件的处理程序的任何其他变体。

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

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

所以在这一点上我想知道$(document).ready()是否仅仅是为了减少编写在页面加载期间运行的javascript代码所涉及的思路。在使用$(document).ready()的情况下，浏览器首先开始绘制页面时会定期呈现弹出和“工件”等问题，而当页面“准备就绪”时，实际执行的是javascript。

是否存在需要$(document).ready()的情况？

有没有理由我不应该编写初始化脚本？

Answer 1

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

对于不引人注目的JavaScript和关注点的分离也需要它。理想情况下，您的JavaScript和HTML位于不同的文件中。如果您这样做，您的HTML中根本就没有任何内联脚本标记。

第二种方法是在出错时保护自己免受不明确的浏览器错误的侵害。在某些情况下，不能保存以后立即操作DOM元素。（我在看你IE6！）

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

将脚本标记混合到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>

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

Answer 2

对于外部脚本，$（document）.ready（）可能是唯一的选择。至于内联脚本，它有点不同。

根据HTML 4.01标准，上面显示的初始化技术是否合法似乎有点模糊：

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

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

以前，HTML文档都被约束为符合HTML DTD   并且在处理任何SCRIPT之后   元件。

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

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

以下示例显示了如何   script元素可用于定义   然后由其他人使用的函数   部分文件。它也表明   如何使用脚本元素   文档时调用脚本   被解析，在这种情况下   初始化表单的输出。

<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>

Answer 3

加载DOM后和加载页面内容之前，其中的所有内容都会加载。

$（document）.ready（）函数比其他使事件工作的方式有很多优点。首先，您不必在HTML

中添加任何“行为”标记

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

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

3 个答案: