HTML / jQuery：如何正确包含外部 jQuery 文件答案

【问题标题】：HTML / jQuery: How to properly include external jQuery fileHTML / jQuery：如何正确包含外部 jQuery 文件
【发布时间】：2015-09-16 05:24:39
【问题描述】：

我是 JS 和一般编程的新手，希望有人可以帮助我。

我目前正在构建一个网站，其中每个页面都有其单独的 HTML / PHP 文件。 jQuery 和我的全局/通用 JS 函数通过单独的包含文件“footer.php”包含在所有这些页面的页脚中。

到目前为止，一切都按预期工作。

现在我有一些页面将使用特定的 jQuery 函数，所以我只想在加载了这样的页面时才加载相应的 JS。

为此，我将相应的代码保存在单独的 JS 文件中（例如 nameOfExternalJsFile.js）并将其中的所有内容包装在以下内容中：

$(document).ready(function(){
   // ...
});

然后我对相应的 PHP 页面进行了以下更新（示例）：

<head>
    <?php 
        require_once("includes/header.php");
    ?>

    <!-- here I want to include the specific jQuery functions -->
    <script src="includes/js/nameOfExternalJsFile.js"></script>
</head>
<!-- ... -->
<!-- here I include the main JS functions -->
<?php require_once("includes/footer.php"); ?>

我对此有两个担忧：

我不确定这是否是包含此类文件的正确方法，因为我需要准备好文件。
我将我的主要 JS 包含在页脚中，因为我被告知这会改进性能，但我可以在标题中包含 jQuery 函数吗？

有人可以告诉我这是否正确，或者我是否应该在这里更改任何内容？

非常感谢您对此提供的任何帮助。

【问题讨论】：

标签： javascript jquery html include document-ready

【解决方案1】：

将函数包装在$(document).ready 中会自动解决这个问题。来自JQuery documentation on document.ready。

在文档“准备就绪”之前，无法安全地操作页面。 jQuery 会为您检测到这种准备状态。内含代码 $( document ).ready() 只会运行一次页面 Document Object 模型 (DOM) 已准备好执行 JavaScript 代码。

从技术上讲，将脚本包含在页眉还是页脚中并不重要，只要先加载 JQuery，然后再加载脚本即可。

也就是说，通常建议将两个脚本都放在结束 body 标记之前，以按照您的建议提高性能。有一些文章讨论了这个问题，比如性能专家 Steve Souders 的 this post 和 Yahoo! 的 this guide表现出色的团队。

【讨论】：

非常感谢！ PHP页脚包含是我关闭body标签之前的最后一行，所以这应该没问题，对吧？关于文档就绪行，只要我先包含 jQuery 再包含此外部文件，我就可以将其保留在外部文件中，对吗？
这两点都是：-)

【解决方案2】：

你应该在加载 jQuery 之后加载$(document).ready(...) 的东西，也就是说，在页脚文件中，在 jQuery <script> 标记之后，像这样：

<script src="includes/js/jQuery.min.js"></script>
<script src="includes/js/nameOfExternalJsFile.js"></script>

【讨论】：

【解决方案3】：

最好将所有 JS 文件定位在正文末尾

<html>
<head></head>
<body>
... Some HTML
<script>SomeScripts</script>
</body>
</html>

</pre>

如果您想确保在页面加载后加载外部脚本，请使用： $(函数(){ /* 脚本中的代码 */ });

【讨论】：

【解决方案4】：

您可以将 footer.php 的内容更改为在页面底部手动包含 /nameOfExternalJsFile.js。这是最安全的方法，因为您可以在加载其他脚本之前加载 jquery。

【讨论】：