JavaScript 使用 <script> 标记从外部 JS 文件引用的函数报告为 "not defined"

Question

编辑： 请参阅下面的回答，因为现在可以使用了:)

公平警告，我现在才用 JavaScript/JQuery 编写代码几个月，我觉得这只是我还没有掌握的简单内容。围绕 SO 和网络有很多类似的问题，但是 none 我找到的答案似乎对我有用。

我在 html 文件的 <head> 元素中引用了一些外部 JS 文件...

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script type="javascript" src="globalVars.js"></script>
  <script type="javascript" src="gatherInfo.js"></script>
</head>

我存储在 globalVars.js 中的变量工作正常。我可以毫无问题地访问它们。但是，我存储在 gatherInfo.js 中的函数在浏览器（Chrome 和 Firefox）的控制台中显示为 Uncaught ReferenceError: functionName is not defined。

gatherInfo.js 文件只是我用来 gather/parse 来自服务器的数据的一组函数。例如，这是 gatherInfo.js 文件中的第一个函数...

var getAuthInfo = function() {
  authInfo = $.ajax({
    type: 'POST',
    url: '/api/auth',
    data: {"type": "normal", "username": loginName, "password": loginPassword},
    success: setAuthToken,
    error: authFail,
    dataType: 'json',
    async: true
  });
};

如果我从 gatherInfo.js 文件中移动函数，并将它们直接放入 html 文件中，在 <body> 元素中，在 <script> 元素中，他们工作正常。

我愿意 post 我已经尝试过的一切，但这会变成一个相当冗长的问题...所以让我知道是否有任何其他信息会有所帮助。

编辑： @Derek 这让人困惑，所以请耐心等待……我觉得我在这里遗漏了一些东西。

这是我的外部 JS 文件的文件大小； gatherInfo.js = 4.4KB globalVars.js = 611B

现在，这是我在 Chrome Dev Tools 的网络选项卡中看到的每次加载尝试。（注意：我在每次尝试时都使用 "Empty Cache and Hard Reload" 加载页面）

我的 src 属性设置如下 src="/globalVars.js" 和 src="/gatherInfo.js"... 网络选项卡显示正在抓取的文件，但每个正在抓取的文件大小为1.5KB，这当然不匹配。

现在，我的 src 属性设置没有前导 /，就像 src="globalVars.js" 和 src="gatherInfo.js"... 正在抓取的globalVars.js文件为912B，正在抓取的gatherInfo.js文件为4.7KB。假设稍大的文件大小只是数据包开销，看起来它现在至少正在获取正确的文件。尽管函数调用仍报告为 not defined。

这就是我开始真正困惑的地方...... 如果我将 src 属性更改为 nonsensical/nonexistent，例如 src="/dub/mud/fub/globalVars.js"... 它仍然显示它正在成功获取文件，但它们的大小又回到了 1.5KB ......很明显这不是正确的文件。但它没有 return 找不到 404。

更进一步，如果我将 src 属性设置为一个不存在的文件名 src="fubar.js"... 它将返回 404 未找到错误。

我不知道为什么它表现得像在获取 globalVars.js 和 gatherInfo.js，即使我给它一个完全错误的路径，但它会在 [=91] 上返回 404 =]现有文件。

编辑：我继续设置了一个包含所有 3 个文件的要点。

https://gist.github.com/Eschin/317dc67a50a1297393d0

如您所见，在 overview.html 中，我在正文中注释掉了所有 JS 函数...如果我取消注释它们，它们就可以正常工作。它们在移动到 gatherInfo.js 文件时中断，并通过脚本标记引用。

Answer 1

我只是猜测您遇到的问题，但如果您的函数包含在 IIFE 中，使用 var 不会使这些变量成为全局变量。

我认为最好的办法是为您的代码添加一个全局命名空间。每个文件应具有以下模板代码：

(function(){

  if ( !window.myNamespace ) {
    window.myNamespace = {};
  } 

  myNamespace.function01 = function(){ /* add code here */ };
  myNamespace.function02 = function(){ /* add code here */ };

})();

在您的情况下，使用 getAuthInfo 而不是 function01，等等...然后当您调用函数时，请确保包含该命名空间。例如：

myNamespace.getAuthInfo();

Answer 2

好的，我弄清楚是什么导致了这个问题...原来是 NGINX 问题。

引自http://www.webreference.com/programming/javascript/external/2.html，为了使用外部 JS 文件...您的 Web 服务器必须设置为将“.js”文件扩展名映射到 MIME 类型"text/javascript."

我通过单击开发工具的“网络”选项卡中的文件名注意到，服务器实际上正在返回 Content-Type: application/x-javascript。

另外，在别处看到 application\javascript 是最新的 MIME 类型，我做了这个更改...

编辑服务器上的 /etc/nginx/mime.types 文件，并将 application/x-javascript js; 更改为 application/javascript js; 解决了问题。所有获取的外部文件现在都以 Content-Type: application/javascript 的形式返回，并且它们正在工作:)

看起来我有一些阅读要做，因为我总是忽略 MIME 类型...甚至不确定它到底是什么...但问题已解决！

JavaScript 使用 <script> 标记从外部 JS 文件引用的函数报告为 "not defined"

JavaScript functions referenced from external JS file using a <script> tag are reporting as "not defined"

html

javascript

jquery

nginx