Javascript jQuery，在何处加载函数最佳实践

我使用jQuery，并通过PHP加载动态HTML。我的问题是，关于任何给定页面上可能存在或可能不存在的元素/属性的最佳实践是什么？我应该有一个包含所有可能性的.js文件（我认为这是低效的），还是应该使用一堆脚本标记（这似乎也是低效的）？有没有一种“懒惰”的初始化方法可以做到这一点

例如，假设我有以下几点：

<div id="list">
   <ul>
      <li>some</li>
      <li>stuff</li>
      <li>here</li>
   </ul>
</div>

$("#list").click( function(){ 
   $(this).removeClass('collapse').addClass('expand'); 
});

或者我应该将它添加到一个脚本标记中，就在通过PHP创建div并输出后在页面底部生成的div的正上方

谢谢，你们真是太棒了。迫不及待地想知道我有足够的知识开始回答一些问题

---

编辑，只是想了一个快速的方式问。哪一个更好，jQuery运行时使用了一堆不匹配的选择器，或者通过PHP在脚本标记中传递javascript？

不需要有单独的文件（如果您愿意，当然可以将其拆分）。如果您有一个

#list

元素，那么只有当页面上的某个地方有一个

#list

类时，才会应用jQuery代码。要将所有内容移动到单独的文件中（至少对我来说）太麻烦了

我看到这个片段是为了检查元素是否真的在页面上

if($("body").hasClass("#link")) {
     //do something
}

2件事：

加载一个大js文件比加载许多小js文件更快，因为它避免了许多连接的开销

如果您可以告诉客户端缓存js，那么它只会在第一次访问时加载

您还可以说将其添加到标记上方的HTML中。当web浏览器遇到JS时，它会停止渲染，直到加载并执行JS。因此，您希望将JS放在页面底部，以便您的页面尽快向用户显示

我并不是说一个大文件是解决问题的方法，这取决于很多事情。这些都是需要记住的事情

---

编辑添加：但我肯定会将其放在外部js中，而不是HTML中，这样您就可以让客户端缓存为您工作。并从页面底部调用这些JS，以避免阻止渲染。对不起，这是一个混乱的回答，但这是一个很大的话题，有很多因素需要考虑，没有正确的答案。 这里的答案很好，但我想我会提供另一种方法，只是为了好玩。无论扩展名是什么，浏览器都会将一个文件作为javascript加载，因此您可以将js.php作为js文件加载，这样就可以正常工作

使用这个，我曾经创建了一个PHP方法来加载javascript文件，所以您可以执行以下操作

$this->loadJavascript('jquery1.4.js')->loadJavascript('util.js');  

运行时，此操作将转换为脚本标记，如下所示：

<script type="text/javascript" src="js.php?file1=jquery1.4.js&file2=util.js"></script>

js.php是一个php脚本，它获取请求的js文件并将其合并到一个文件中，将其缩小，保存到一个名为jquery1.4.js-util.js的js/cache目录中，然后输出内容（如果首先存在的话，它显然会使用缓存版本）

然后，您可以添加一个简单的参数，如？debugJS=true，它将绕过所有这些，而是将所有实际使用的JS文件放在页面上，以便您可以更轻松地进行调试

关键是，这给了你一种“两全其美”的解决方案

---

这完全没有必要，但对于一个每页加载10-15个JS文件的站点来说，这是一个巧妙的小把戏，它显然会暂时占用所有浏览器的http连接。

+1让我强调一下阻塞部分。如果你使用了很多If-inline

标记，它会反复阻止图像和其他内容，从而中断内容下载的流程。我一直忘记了内联脚本页面加载的事情（仍在学习）。谢谢。我已经看到（主要是通过打字…）如果在页面上找不到您的选择器，jQuery将不会执行，但我想知道是否将我的所有jQuery放在一个始终加载的文件中，该文件可以解释任何可能出现的选择器，或者，如果我应该通过带有内联脚本标记的PHP动态添加带有选择器的jQuery（在另一篇文章中，我会将其添加到底部，而不是中间）。我的想法是，JS必须进行一些数据处理，以确定页面是否包含相关的选择器，我最好在必要时才将其放在那里，对吗？