Question

为什么链接的JavaScript文件有时不起作用，当它包含在页面顶部而不是底部时？

<script type="text/javascript" src"..."></script>

Answer 1

例如，如果您想操纵DOM项目，而这些项目尚未存在，那么它将无法工作。如果头文件中包含JavaScript文件，则主体尚未存在，但如果您将其包含在正文的末尾，则这些项目有效。

如果您不想依赖此行为，则可以在文档准备好时（即已加载整个DOM时）定义一个运行的回调。

这就是例如jQuery实现$(document).ready(function() {})或更快$(function () {});。在vanilla JavaScript中（使用现代浏览器，IE9 +），可以使用

实现

document.addEventListener("DOMContentLoaded", function() {
    // code...
});

Answer 2

了解它为什么不起作用的最好方法是检查JS错误。尝试找出当脚本被包含在顶部时你会得到什么错误。正如在其他响应中所提到的，它可能是因为DOM项目。您可以通过添加＆＃34;延迟＆＃34;来解决此问题。标记到脚本。

也可能是因为在运行此脚本时，您希望存在一些JS对象。例如，如果您的脚本标记正在提供JSONP请求，那么您必须具有处理数据的函数。否则你会得到一个＆＃34;未定义的函数＆＃34;脚本运行时出错。

Answer 3

JS代码从上到下按指令执行。

调用函数的代码需要在函数定义下。

此代码有效：

  var func = function()
  {
    alert('it works');
  };

  func();

虽然这不是：

  func();

  var func = function()
  {
    alert('it works');
  };

它会抛出一个未定义的错误。原因是JS编译器在尝试调用它时不知道func定义。

HTML页面中包含的JS文件也是如此。只要上面的部分没有依赖关系，或者如果他们在页面加载之前没有尝试操作HTML代码，您可以将它们包含在底部。