可変範囲の制御

Question

私はいくつかの同様の質問を見つけることができましたが、その中で提供された回答が私の混乱を完全に追い払わないと感じています。

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機能に示すわずか2行以上のものを含めるしようとしているように私は、クリックイベントを処理するために無名関数を使用しての、あまりにも熱心ではないんだ

。

注意：この特定の例では、コードをリファクタリングしてhideContainers関数を作成した方がよいかもしれませんが、私はむしろ、この特定の例よりも一般的には、変数のスコープを制御する方法で、より興味を持ってい

おかげ

Answer 1

で。 JavaScript（ES6以前）、すべての変数はfu範囲を限定した。そのため、変数をスコープする唯一の方法は、関数に対してローカルにすることです。

ここでは2つの基本的な選択肢があります。それが関連している唯一の場所であるように、1つは、$(function(...) {...})からclickChildButtonをローカルにすることです：

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

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

あなたが実際に広いが、広すぎないことに範囲が必要な場合は、他に選択肢はANにすべてをラップすることです生命維持：

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