Question

我是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函数吗？

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

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

Answer 1

自动处理$(document).ready中的功能会自动解决此问题。来自JQuery documentation on document.ready。

在文档准备好之前，页面无法安全操作。＆＃34; jQuery为您检测这种准备状态。代码包含在里面 $（document）.ready（）只会运行一次页面Document Object 模型（DOM）已准备好执行JavaScript代码。

从技术上讲，只要首先加载JQuery并将脚本加载到第二个页面，是否在脚本或页脚中包含脚本并不重要。

也就是说，通常建议两个脚本都在关闭正文标记之前，以提高性能，如您所建议的那样。有一些文章讨论过这个问题，如性能专家Steve Souders的this post和雅虎的this guide。卓越的绩效团队。

Answer 2

只有在jQuery $(document).ready(...)标记之后加载jQuery（即页脚文件）之后才应加载<script>内容，如下所示：

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

Answer 3

将所有JS文件放在正文末尾是一种很好的做法




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



</pre>


If you want to be sure that your external scripts are loaded after page load use:
    
    $(function(){
        /* Your code from the scripts */
    });

Answer 4

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

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

4 个答案: