Javascript：变量作用域和全局变量的弊端

Question

我正在努力做好，我真的是，但我看不到如何做到这一点:)

任何关于如何在这里不使用全局的建议将不胜感激。我们称全局为 G。

Function A 
  Builds G by AJAX
Function B
  Uses G
Function C
  Calls B
  Called by numerous event handlers attached to DOM elements (type 1)
Function D
  Calls B
  Called by numerous event handlers attached to DOM elements (type 2)

我看不出如何在这里使用全局。DOM 元素（类型 1 和 2）是在与 A 无关的其他函数 （E&F） 中创建的。我不想向每个事件处理程序添加 G（因为它很大并且有很多这样的事件处理程序），这样做需要与我在这里寻求的相同的解决方案（即，将 G 添加到 E&F）。

全局 G，BTW 是一个数组，它是构建其他元素所必需的，因为它们又由 AJAX 构建。

我也不相信单例是真正的解决方案。

谢谢。

Answer 1

当然，将所有内容都放在一个立即执行的大函数中！

(function() {
    // Your code goes here
})(); // Called right away

你可以把任何东西放在那里，它可以被更窄范围内的任何东西访问，但它们仍然不是全球性的。

此外，如果你的文件是唯一的文件，请停止避免使用全局变量，因为除非您正在制作某种可重用的组件，否则实际上没有害处。

Answer 2

我不知道这是否是一种选择？

Function Everything() {
  var G
  Function A 
    Builds G by AJAX
  Function B
    Uses G
  Function C
    Calls B
    Called by numerous event handlers attached to DOM elements (type 1)
  Function D
    Calls B
    Called by numerous event handlers attached to DOM elements (type 2)
}();

Answer 3

不用担心在事件中传递 G。它只是对实际对象的引用，而不是副本，因此不会导致内存问题。函数、对象和数组作为引用传递。

Answer 4

如果在收到 AJAX 响应之前触发其中一个事件处理程序（依赖于 G），会发生什么情况？要解决此问题，并通过闭包将 G 绑定到 B，您可以尝试在 AJAX 回调中装配事件处理程序：

function A() {
    ajaxLoad(function(G) {
        attachEvents1(C);
        attachEvents2(D);
        function B() {
            G.use();
        }
        function C() {
            B();
        }
        function D() {
            B();
        }
    });
}

Answer 5

您没有给我们很多信息来了解最佳替代方案是什么，但这里有一些常规类型的选项：

作为函数参数传递的 Ajax 结果

Function A() { 
  Builds G by AJAX
  B(G)
}
Function B(g) {
  Uses g
}

由于 G 的计时使得在调用 A 中的成功处理程序之前无法使用它，那么也许您只需将其作为参数传递给 B，而不需要将其作为全局。

按需检索的 DOM 元素

对于 DOM 元素，通常不需要在 javascript 变量中存储 DOM 元素引用。 如果您为他们提供适当的 ID，那么您可以在需要时使用 document.getElementById("idName") 按需获取它们。

如果您确实需要跨众多事件和函数提供的持久变量，那么您有两种选择：

自执行函数闭包，无需全局变量即可共享持久数据

您可以将它们存储在自执行函数闭包中：

(function() {
var G = [];
Function A 
  Builds G by AJAX
Function B
  Uses G
})();

单个全局对象

创建一个真正的全局，然后将其他数据存储为专有数据：

var myMainGlobal = {};
myMainGlobal.G = [];
myMainGlobal.A = function() {
  Builds myMainGlobal.G by AJAX
}
myMainGlobal.B = function() {
  Uses myMainGlobal.G
}

这至少只创建一个实际的顶级全局符号，同时让您拥有所需的尽可能多的全局数据。