控制变量范围

我已经能够找到一些类似的问题，但我觉得内部提供的答案没有完全排除我的困惑。控制变量范围

我在使用jQuery时遇到过这个问题，但我想这是一个比jQuery更具体的JS问题。

我觉得在下面的例子中，我想定义的这些变量是很好的全球候选者，它们在几个函数之外有广泛的用途，但是我觉得我想限制暴露。

$(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功能，但我更感兴趣的是如何控制的一般变量的作用域，而不是这个特殊的例子

感谢

来源

2016-04-01 BadAtMaths

'我觉得在下面的例子中，这些变量我想定义将是很好的候选人为global' - 你应该有尽可能少的全球性的地，最好没有。如果您必须全局公开某个东西，请公开一个名称空间变量（一个对象），并将所有其他*全局变量*从这个名称空间中取出。限制范围的最好方法是将所有内容都包含在'IIFE'中，并使用'var' - voila - no globals。 – Adam

@亚当：感谢您的评论，我怀疑你说的可能是这样。根据你在这里的评论和Amadan的评论，我将沿着IIFE路线走下去。 – BadAtMaths

在。 JavaScript（在ES6之前），所有变量都是fu nction范围的。因此，定义变量范围的唯一方法是使其位于函数的本地。

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

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

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

如果你需要的范围，实际上是更广泛的，但不能太宽，其他选择是包装一切成IIFE：

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

来源

2016-04-01 01:21:50 Amadan

谢谢，这是我正在寻找。我想我会走下去的IIFE路线。有什么我应该留意的吗？ – BadAtMaths

不是，不。使用''use strict''来避免忘记'var'，这或多或少都是。此外，当ES6变得广泛可用时，请记住这一点，'let'将会比'var'更精确地确定范围。 – Amadan

控制变量范围

回答

相关问题