3

我最近看到一些使用这种模式的网站：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  <script> 
    $(function (){...do some stuff with plugins...});
  </script>

</head>
<body>


  <script src="myplugin1.js"></script>
  <script src="myplugin2.js"></script>
  <script src="myplugin3.js"></script>
</body>
</html>

这让我想到了一些陷阱：

Question #1

document.ready解析插件（JS）后引发未执行的事件。

它在dom结构完成时执行。（注意：我没有说：“当所有资源都已下载”！）

因此，可能存在document. ready函数将尝试使用尚未完全下载的插件变量的情况。（这将导致错误）。

我对吗 ？

Question #2 这导致我： 在脚本引用位置之前“从不使用 document.ready” （我的意思是：在 document.ready 依赖于那些脚本变量的情况下）。

我对吗 ？

ps我不是在谈论window.load，它显然会在这里工作，但我将不得不等待更长的时间。

4

2 回答 2

2

如果您考虑页面中的所有类型的资源，许多资源可以与页面内容分开加载：例如图像和样式表。它们可能会改变页面的外观，但不能真正改变结构，因此单独加载它们是安全的。

另一方面，脚本有一个小东西document.write，可以给作品带来麻烦。如果我有一些这样的 HTML：

Who would <script>document.write("<em>");</script>ever</em> write like this?

然后浏览器会很好地解析它；document.write，如果像这样在顶层使用，则有效地在该位置插入 HTML 以进行解析。这意味着整个页面的其余部分都依赖于一个脚本元素，因此在该脚本加载之前，浏览器无法真正继续处理文档。

因为脚本可能会修改 HTML 并改变结构，所以浏览器迫不及待地加载它们：它必须在那个时刻加载它们，并且它不能说 DOM 已经准备好，因为脚本可能会修改它。因此，浏览器必须延迟 DOM 就绪事件，直到所有脚本都运行完毕。这使您可以安全地将依赖代码放在就绪处理程序的顶部。

但是，我建议您不要这样做，因为它不是很清楚。

于 2013-04-12T05:23:58.947 回答
1

$(document).ready等同于现代浏览器中的DOMContentLoaded事件（它回退到等同于相同场景的旧版浏览器中的其他一些事件）。

MDN 很好地总结了它：

DOMContentLoaded 事件在文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载（加载事件可用于检测完全加载的页面）。

因此，您的脚本将始终在执行时被解析。

于 2013-04-12T05:24:44.760 回答