控制变量范围

Question

我已经找到了一些类似的问题，但我觉得其中提供的答案并不能完全消除我的困惑。

我在玩 jQuery 时遇到了这个问题，但我想这更像是一个 JS 问题而不是 jQuery 特定的问题。

我觉得在下面的示例中，我希望定义的这些变量将是很好的全局变量，它们在一些函数之外具有广泛的用途，但我觉得我想限制暴露。

$(function() {
    $containers = $('.container');
    $childContainer = $('#childContainer');
    //Removed extra code
    var $aButton = $('#childButton');
    //Removed extra code

    $containers.hide();

    $childContainer.show(400);

    $aButton.on('click', clickChildButton);
    //Removed extra code
};

function clickChildButton() {
    $containers.hide(400);
    $childContainer.show(400);
}

我将有一些按钮显示/隐藏各种容器。在所有情况下，$containers 变量都需要对其他函数可见才能隐藏。

我应该使用全局变量（或者可能是命名空间全局对象 hack）还是有其他方法可以限制 $containers 变量的范围？

我不太热衷于使用匿名函数来处理点击事件，因为它们将开始变得更加复杂（并且不仅仅包含 clickChildButton 函数中显示的两行代码。

注意：在这个特定示例中，重构代码并创建一个hideContainers 函数可能会更好，但我更感兴趣的是如何控制一般变量的范围，而不是这个特定示例。

谢谢

Answer 1

在 JavaScript（ES6 之前）中，所有变量都是函数范围的。因此，确定变量范围的唯一方法是使其成为函数的局部变量。

您在这里有两个基本选择。一种是使clickChildButton 本地化到$(function(...) {...})，因为它是唯一相关的地方：

$(function() {
  var $containers, $childContainer;

  function clickChildButton() {
    $containers.hide(400);
    $childContainer.show(400);
  }
  ...
});

如果您实际上需要更宽但又不太宽的范围，另一种选择是将所有内容包装到 IIFE 中：

(function() {
  $(function() {
    ...
  });
  function clickChildButton() {
    ....
  });
)();