控制變量範圍

我已經能夠找到一些類似的問題，但我覺得內部提供的答案沒有完全排除我的困惑。控制變量範圍

我在使用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

控制變量範圍

回答

相關問題