如何从外部 js 文件中声明全局变量？答案

【问题标题】：How does one declare a global variable from inside an external js file?如何从外部 js 文件中声明全局变量？
【发布时间】：2016-11-07 00:42:03
【问题描述】：

我想在一个外部 javascript 文件中声明一个全局变量，并让它在加载该文件的主窗口中变得可访问。

目前以下方法都失败了

var foo = 'bar';
window.foo = 'bar';

似乎只有隐式全局变量有效

foo = 'bar';

但是，人们似乎建议不要使用隐式全局变量。那么在这种情况下我该怎么办呢？

【问题讨论】：

【解决方案1】：

您的两个解决方案都应该可以正常工作，它们在全局范围内定义了一个变量，但您必须确保在实际使用它们的脚本之前包含定义这些变量的 JavaScript 文件。可能您忘记包含所有脚本文件，或者您的代码中有其他错误（检查浏览器的控制台是否有错误，Firefox 中的 F12）。

也就是说，无论如何使用全局变量都是一种不好的做法。它使您的代码难以测试、难以调试，并且您的全局变量可能与第三方 JavaScript 库中的全局变量重叠（如果您正在使用其中任何一个库）。

【讨论】：

我正在使用 IIFE 将我的代码附加到命名空间，因此只有一个特别命名的全局变量，其中附加了所有函数和变量。这仍然被认为是不好的做法吗？
这取决于，我会说理论上是的，这仍然是一个不好的做法，但另一方面，许多流行的框架都使用这种方法并且没问题。我使用这种方法编写了一些代码，没有任何问题，但是这些天我觉得使用模块加载器（例如 browserify + commonjs）会更好。如果您仅将全局变量用于命名空间名称并且您计划仅在浏览器上使用您的代码（没有服务器端 js），我认为这不一定是一个坏习惯。它实际上可以简化您的设计。

【解决方案2】：

问题是我将一个 IIFE 附加到窗口，然后通过窗口而不是直接调用它。

window.foo = (function() {
    return {
        log: function() {
            console.log('bar function');
        }
    };
})();
window.foo.log();

注意：这个例子实际上运行良好，但由于我的 IIFE 的某些内容，它对我不起作用，直到我只使用 foo.log(); 调用它

稍后我将对此进行更多研究。因为我感兴趣的是我的代码的哪一部分导致了这种情况。

【讨论】：