22

可能重复：
在 HTML 文件中放置 Javascript 的位置？
我应该在 html 的主体还是头部编写脚本？

我一直想知道，主要是因为在创建页面时我总是遇到麻烦，基于以下几点：

你什么时候写你的javascript

  • 在里面<head>
  • 在里面<body>
  • 与$(document).ready()

我可能很愚蠢，但我有几次因为错误的位置或是或否doc.ready()命令而没有执行我的 JavaScript (/jQuery)。所以我真的很想知道。

jQuery 和 'var' 命令也是如此

4

3 回答 3

17

$(document).ready()只需确保在加载 javascript 之前加载所有 DOM 元素。

没关系的时候

无需等待此事件触发，您最终可能会操作页面上尚不存在的 DOM 元素或样式。DOM 就绪事件还允许您更灵活地在页面的不同部分运行脚本。例如：

<div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>

将运行，因为在脚本运行之前已经加载了地图 div。事实上，通过将脚本放在页面底部，您可以获得一些相当不错的性能改进。

什么时候重要

但是，如果您在<head>元素中加载脚本，则大部分 DOM 都没有加载。此示例将不起作用：

<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
<div id="map"></div>

不会，因为地图 div 尚未加载。

安全的解决方案

您可以通过简单地等待整个 DOM 加载来避免这种情况：

<script type="text/javascript">$(document).ready(function () { 
    document.getElementById('map').style.opacity = 0;
});
</script>
<div id="map"></div>

有很多文章解释了这一点，还有jQuery 文档本身。

于 2013-01-14T23:09:32.467 回答
12

通过现代“最佳实践”，它是这样的：

  • <head>在页面开始呈现之前将脚本放在它们应该发生的时间。例如 HTML 5 shim 库或 Modernizr。
  • 当对如何导入脚本的控制有限时，将脚本放在“就绪”处理程序中。可以包含在页面上以不显眼地添加功能的实用程序之类的东西通常使用“就绪”处理程序，因为它们无法确定如何使用它们。
  • <body>如果您在所有其他情况下都可以摆脱它，请将脚本放在末尾。

有时，您最终会在页面中产生依赖项，这些依赖项需要您希望在 body 元素末尾加载的内容。这是一个不受欢迎的情况，但如果你无法避免它可能会强制将脚本加载到 .<head>而不是<body>.

最好在文档末尾加载内容，因为浏览器<script>在加载标签时会评估它们的内容。（有一些“现代”方法可以避免这种情况，但这进入了更复杂的领域。）

何时使用“就绪”处理程序（或“加载”处理程序，就此而言）的决定与关于放置<script>标签的位置的决定略有不同。如果你有来自服务器端模板系统的页面内小部件生成（不受欢迎，但你能做什么？）例如 jQuery 引用，那么你需要在页面顶部导入 jQuery，即使其他代码可能会将初始化推迟到“就绪”处理程序。也就是说，关于何时使用“就绪”的决定与您的脚本是否愿意依赖于在正确的位置被导入到页面中，或者是否要确保无论在哪里都发生正确的事情有关它的<script>标签被放置。

于 2013-01-14T23:09:40.040 回答
7

这是您何时需要执行代码的问题。

如果您要操作 DOM 树（例如移动元素/显示隐藏等）并且将代码放在文档的头部，则在执行代码时您的元素将不存在，因此您的代码将无法工作.

在这种情况下，您可以将代码放在文档的头部，并在文档 DOM 准备好时调用它，使用$(document).ready()

很少需要将代码放在文档末尾，我能想到的一种情况是 google plus +1 按钮，这需要您在最后一个 +1 按钮之后放置脚本，因此您只需将其粘贴到文档末尾为了确定。

于 2013-01-14T23:11:33.197 回答