控制变量范围

Controlling variable scope

本文关键字：范围 控制变量      更新时间：2023-10-15

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

我在玩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变量都需要对其他函数可见，以便隐藏它。

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

我不太喜欢使用匿名函数来处理点击事件，因为它们会变得有点复杂（并且包含的不仅仅是clickChildButton函数中显示的两行。

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

感谢

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

你有两个基本的选择。一种是使clickChildButton成为$(function(...) {...})的本地，因为它是唯一相关的地方：

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

如果你需要更宽但不太宽的范围，另一种选择是将所有内容打包到IIFE:中

(function() {
  $(function() {
    ...
  });
  function clickChildButton() {
    ....
  });
)();
相关文章：