Variabler Kontrollbereich

Question

Ich konnte einige ähnliche Fragen finden, aber ich denke, dass die Antworten, die darin enthalten sind, meine Verwirrung nicht vollständig ausschließen.

Ich bin auf diese Frage beim Spielen mit jQuery gestoßen, aber ich denke, das ist eher eine JS-Frage als jQuery-spezifisch.

Ich fühle mich wie im folgenden Beispiel diese Variablen, die ich definieren möchte, wären gute Kandidaten, um global zu sein, sie haben eine weitreichende Verwendung außerhalb einiger Funktionen, aber ich glaube, dass ich die Belichtung begrenzen möchte.

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

Ich werde eine Reihe von Schaltflächen haben, die verschiedene Container zeigen/verstecken. In allen Fällen muss die Variable $containers für die anderen Funktionen sichtbar sein, damit sie ausgeblendet werden kann.

Sollte ich globale Variablen (oder vielleicht ein Namespacing Global Object Hack) verwenden oder gibt es eine andere Möglichkeit, den Umfang der $containers Variable zu begrenzen?

ich nicht so scharf bin auf anonyme Funktionen mithilfe der Klick-Ereignisse behandeln, da sie ein wenig komplexer bekommen (und enthalten mehr als nur die zwei Zeilen in der clickChildButton Funktion gezeigt beginnen werden.

Hinweis : in diesem speziellen Beispiel könnte es besser sein, den Code Refactoring und eine hideContainers Funktion erstellen, aber ich bin mehr daran interessiert, wie der Umfang der Variablen im allgemeinen zu steuern, anstatt dieses spezielle Beispiel

Dank

Answer 1

in. JavaScript (vor ES6), alle Variablen sind fu Bereich-Bereich. Die einzige Möglichkeit, eine Variable zu definieren, besteht daher darin, sie für eine Funktion lokal zu machen.

Sie haben hier zwei grundlegende Auswahlmöglichkeiten. Eine davon ist clickChildButton lokal für $(function(...) {...}) zu machen, da es der einzige Ort ist, wo es relevant ist:

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

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

Wenn Sie den Bereich tatsächlich benötigen breiter zu sein, aber nicht zu breit, die andere Wahl ist alles in ein einzuwickeln IIFE: