Değişken kapsamını denetleme

Question

Birkaç benzer soru bulabildim ancak içeride verilen yanıtların karışıklığımı tamamen atmadığını hissediyorum.

jQuery ile oynarken bu soruya rastladım, ama sanırım jQuery'ye özgü bir JS sorusu daha var.

Aşağıdaki örnekte, tanımlamak istediğim bu değişkenler global olmak için iyi bir aday olabilirler, birkaç fonksiyonun dışında geniş kapsamlı bir kullanıma sahipler, ancak maruz kalmayı sınırlamak istediğimi hissediyorum.

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

Çeşitli kapsayıcıları gösteren/gizleyen çeşitli düğmelerim olacaktır. Her durumda, $containers değişkeninin gizlenmesini sağlamak için diğer işlevlere görünmesi gerekir.

Genel değişkenler kullanmalı mıyım (veya belki de genel bir nesne kesmek için bir ad kullanılıyorsa) veya $containers değişkeninin kapsamını sınırlayabilmem için başka bir yol var mı? Ben onlar biraz daha karmaşık almaya başlamak (ve clickChildButton fonksiyonu gösterilen sadece iki satır daha içerecek şekilde gidiyoruz gibi tıklama olayları işlemek için anonim işlevlerini kullanarak üzerinde çok meraklı değilim

.

Not Bu özel örnekte kodu refactor ve hideContainers fonksiyonunu oluşturmak için daha iyi olabilir, ama yerine bu özel örnekte daha genel olarak değişkenlerin kapsamını nasıl kontrol edileceği daha çok ilgileniyorum

Teşekkür

Answer 1

yılında. JavaScript (ES6'dan önce), tüm değişkenler fu nction-kapsamlı. Sonuç olarak, bir değişkeni kapsamamanın tek yolu onu bir işlev için yerel yapmaktır.

Burada iki temel seçeneğiniz var. aslında daha geniş ama çok geniş olması kapsamını gerekiyorsa

, başka bir seçenek

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

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

bir içine her şeyi sarmak için: o alakalı tek yerdir olarak biri $(function(...) {...}) yerel clickChildButton yapmaktır Hayatta:

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