Question

编辑：请参阅下面的答案，因为现在可以使用：）

＆＃xA;＆＃xA;

公平警告，我只使用JavaScript编码/ JQuery已经有几个月了，我觉得这只是一些简单的事情，我还没有接受过。关于SO和网络有很多类似的问题，但我找到的答案似乎都没有为我工作。

＆＃xA;＆＃xA;

我引用的是我的html文件的＆lt; head＆gt; 元素中很少有外部JS文件......

＆＃xA;＆＃xA;

 ＆lt; head＆gt;＆＃xA ; ＆lt; script type =“text / javascript”src =“https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script type =“javascript”src =“globalVars.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script type =“javascript”src =“gatherInfo.js”＆gt;＆lt; / script＆gt;＆＃xA;＆lt; / head＆gt;＆＃xA;

＆＃xA;＆＃xA ;

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

＆＃xA; ＆＃xA;

gatherInfo.js文件只是我用来从服务器收集/解析数据的一堆函数。例如，这是gatherInfo.js文件中的第一个函数...

＆＃xA;＆＃xA;

  var getAuthInfo = function（）{＆＃xA; authInfo = $ .ajax（{＆＃xA; type：'POST'，＆＃xA; url：'/ api / auth'，＆＃xA; data：{“type”：“normal”，“username”：loginName ，“password”：loginPassword}，＆＃xA; success：setAuthToken，＆＃xA; error：authFail，＆＃xA; dataType：'json'，＆＃xA; async：true＆＃xA;}）;＆＃xA ;};＆＃xA;

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

我愿意发布我尝试的所有内容，但这会把这变成一个很长的问题...所以如果有任何其他信息会有帮助，请告诉我。

＆＃xA;＆＃xA;

编辑： @Derek这让人感到困惑，所以请耐心等待......我觉得我在这里错过了一些东西。

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

现在，这是我在Chrome D的网络标签中看到的内容每次加载尝试时都使用ev工具。＆＃xA;（注意：我每次尝试时都会加载“Empty Cache and Hard Reload”页面）

＆＃xA;＆＃xA;

使用我的src属性集如此 src =“/ globalVars.js”和 src =“/ gatherInfo.js” ...＆＃xA;网络选项卡显示正在提取的文件，但是提取的每个文件的大小是1.5KB，当然不匹配。

＆＃xA;＆＃xA;

现在，我的src属性设置没有前导 / < / code>，如此 src =“globalVars.js”和 src =“gatherInfo.js” ...＆＃xA;正在获取的globalVars.js文件是912B，并且正在获取的gatherInfo.js文件是4.7KB。＆＃xA;假设稍大的文件大小只是数据包开销，＆＃xA;它看起来现在至少取出正确的文件。函数调用仍然报告为 not defined 。

＆＃xA;＆＃xA; 这里我开始变得非常困惑......＆＃xA;如果我改变了我的src属性为无意义/不存在的东西，如 src =“/ dub / mud / fub / globalVars.js” ...＆＃xA;它仍然表明它已成功获取文件，但是它们的大小已经恢复到1.5KB ......所以显然不是正确的文件。但是它没有返回404找不到。
＆＃xA;＆＃xA; 如果我将src属性设置为一个不存在的文件名，那么更进一步 src =“fubar.js” ...＆＃xA;它会回复404找不到错误。
＆＃xA;＆＃xA; 我不知道为什么会这样就像它正在获取globalVars.js和gatherInfo.js一样，即使我给它一个完全不正确的路径，但它会在一个不存在的文件上踢回404. 
＆＃xA;＆＃xA;  编辑：我继续为所有3个文件设置了一个要点。
＆＃xA;＆＃xA;   https://gist.github.com/Eschin/317dc67a50a1297393d0  
＆＃xA;＆＃xA; 正如您所见在overview.html中，我在体内注释了所有JS函数...如果我取消注释，它们工作正常。它们在移动到gatherInfo.js文件时会中断，并通过脚本标记引用。＆＃xA;

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类型......甚至不确定它是什么，确切地说......但是问题已经解决了！

使用<script>标记从外部JS文件引用的JavaScript函数报告为“未定义”

2 个答案: