Question

我正在使用jQuery，我正在通过PHP加载动态HTML。我的问题是，在任何给定页面上可能存在或不存在的元素/属性的最佳实践是什么？我应该有一个包含所有可能性的.js文件（我认为这是低效的）或者我应该使用一堆脚本标签（这看起来效率也很低）？是否有“懒惰”的初始化方法来执行此操作？

例如，说我有以下内容：

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

但是此列表仅在必要时生成，而不是在所有页面上生成。我的全局js文件是否应具有以下内容：

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

或者我应该在创建div后通过PHP输出在页面底部正在生成的div 之上的脚本标记~~中添加它吗？~~

非常感谢，你们真棒。不能等到我知道足够开始回答一些问题了！

编辑，想到了一个快速的问题。哪个更好，jQuery与一堆不匹配的选择器运行或通过PHP在脚本标签中传递javascript？

Answer 1

2件事：

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

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

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

不是说我说一个大文件是想办法的方式，这取决于很多事情。这些只是要记住的事情。

编辑添加：但我绝对会把它放在外部js而不是HTML中，所以你可以让客户端缓存为你工作。并从页面底部调用这些JS，以免阻止渲染。对不起，这是一个混乱的答案，但这是一个很大的话题，有很多因素要考虑，没有正确的答案。

Answer 2

无需拥有单独的文件（如果您愿意，可以随意拆分）。如果您有#list元素，则只有在页面某处有#list类时才会应用jQuery代码。将所有内容都移到单独的文件中会是太多的工作（至少对我而言）。

我已经看过这个片段来检查元素是否真的在页面上

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

Answer 3

这里的答案很好，但我想我会为踢球提供另一种方法。无论扩展名是什么，浏览器都会将文件作为javascript加载，因此您可以将js.php加载为JS文件，它可以正常工作。

使用这个，我一度创建了一个加载javascript文件的PHP方法，所以你可以做类似的事情

$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连接一段时间。