jQuery 代码放置建议答案

【问题标题】：jQuery code placement suggestionjQuery 代码放置建议
【发布时间】：2012-05-24 16:56:59
【问题描述】：

我知道这听起来像是一个愚蠢的问题，但是当我通过示例学习 jQuery 时，我发现脚本和函数的位置因示例而异例子。举个例子，我在某处读到 .onReady 函数应该放在其他所有内容的下方，以确保整个 DOM 确实准备就绪，并且具有这种性质。

问题很简单，除了明显的脚本标签之外，PHP 文件 jquery 应该位于何处的最佳实践？一次性内联脚本呢？对于这种天真的性质感到抱歉，但我会以“正确”的方式尝试这些示例，因为我想知道如何将它们组合在一起。

这个网站似乎有一些非常有见地的人做出了贡献，所以提前感谢您的任何指导！ :)

显然它并没有我想象的那么愚蠢 - 感谢大家的见解 - 我对我试图从大局中理解的内容有了更清晰的认识。

【问题讨论】：

这是一个特别有趣的问题，因为像 ASP.Net MVC 这样将页面构建为一系列组件（也称为视图）的框架倾向于将 HTML 片段和作用于这些片段的脚本保留在相同的视图，导致生成的 JavaScript 分散在最终页面上。我以前想知道这种方法是否存在问题。
我与你同在...在我的职业生涯中使用过数十种不同的语言/框架，在不了解每一个如何工作的裸机方面，我也在思考这个问题我晚上开车回家，哈哈。

标签： php jquery

【解决方案1】：

AFAIK，没有.onReady

也许你指的是$(document).ready()？

.ready() 的要点是等待元素准备好。在这种情况下，文档。因此，在文档准备好之前，其中的任何内容都不会被执行。因此，您可以将其放在任何您想要的位置。

至于链接到 JS 文件的位置，但是出于性能原因，您希望在文档底部这样做：

http://developer.yahoo.com/performance/rules.html

【讨论】：

也许这是显而易见的，但以防万一，您需要在加载 jQuery 后添加您的 $(document).ready()，因此严格来说 anywhere 并不正确。
DA，将接受您的回答，因为它回答了我最广泛的担忧，而不仅仅是解决 .ready 方面。非常感谢您的洞察力和链接。
澄清一点，.ready()只能在document上调用，对普通元素不起作用，只会触发一次。
@KevinB。 ready 可以（不应该）使用您想要的任何参数（或没有任何参数）。您可以阅读源代码了解原因，或观看this DEMO。或 this DEMO 或 this DEMO
@KevinB。我问的是question here，你可以在那里阅读

【解决方案2】：

不了解 PHP，但是将每个 onReady 代码放在底部的说明 “确保整个 DOM 确实准备好了” 错误！

ready 事件的全部意义在于，您可以将它放置在您想要的任何地方，它仍然可以工作。

示例：

$('#foo').val() // undefined - the DOM isn't ready yet.

$(document).ready(function(){
    $('#foo').val() // bla - the DOM is ready now.
});
<input id="foo" value="bla" />

Live DEMO

注意$(callbackFunction) 等于详细语法$(document).ready(callbackFunction);

您应该阅读ready docs

【讨论】：

我不会说指令本身是错误的。这个推理肯定是错误的。

【解决方案3】：

您应该在关闭页面的<body> 标记之前包含您的<script type="text/javascript"></script>。这将确保您在其之前加载上述页面的所有静态部分。

【讨论】：

在一些框架如何从组件组成页面的问题下查看我的评论。为什么说“应该”。如果你不这样做会/会破坏什么？
出于性能原因，你应该把它放在那里——但是对于 jQuery，由于不需要等待 dom 的静态部分加载，所以不需要把它放在那里。（换句话说，是的，把它放在结束 BODY 标记之前，但出于其他原因）
此外，还有一些选项可以将代码绑定到由浏览器触发的某些事件，例如 .load、.ready 等。
@steve js 文件可以阻止并发下载，所以，是的，出于性能原因，您希望将指向 JS 文件的链接放在页面底部。
但是当您的代码需要完全加载图像等元素时，您应该为该元素使用 .load() 。更多信息请访问jQuery docs for .load()

【解决方案4】：

准备好的指令允许您将您的 javascript 代码放在任何地方。只有当文档准备好时才会执行。

语法如下：

$(document).ready(function() {
  // Put your code here.
});

或者这个：

$(function() {
 // Put your code here.
});

但要做出选择，出于性能原因，更喜欢页面底部，就在关闭之前