Question

我已经能够找到一些类似的问题，但我觉得内部提供的答案并没有完全消除我的困惑。

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

我觉得在下面的例子中，我希望定义的这些变量是全球的好候选者，它们在一些函数之外有广泛的用途，但我觉得我想限制曝光。 / p>

$(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() {
    ....
  });
)();

控制变量范围

1 个答案: