Сохраняет селектора запросов во всем мире всегда плохую практику?

Question

Я читал много о глобальных переменных как о плохой практике, и я понимаю причины. Тем не менее, в некоторых случаях это кажется намного проще. Так что это мое дело и вопрос.

У меня есть некоторые функции, которые оживляют (на самом деле я использую query.transit Plugin по Rico Санкт-Крус) кучу элементов вместе, как:

$element_1 = $("#element_1"); 
$element_2 = $("#element_2"); 
$element_3 = $("#element_3"); 
$element_4 = $("#element_4"); 

function animate_1() 
{ 
    // do something with every element 
    $element_1.transition({…}, 100, 'easeOutSine') 
    $element_2.transition({…}, 150, 'easeOutExpo') 
    $element_3.transition({…}, 100, 'easeOutSine') 
    $element_4.transition({…}, 200, 'easeOutBack') 
} 

function animate_2() 
{ 
    // do something with every element 
    $element_1.transition({…}, 100, 'easeOutSine') 
    $element_2.transition({…}, 150, 'easeOutExpo') 
    $element_3.transition({…}, 100, 'easeOutSine') 
    $element_4.transition({…}, 200, 'easeOutBack') 
} 

function animate_3() 
{ 
    // do something with every element 
    $element_1.transition({…}, 100, 'easeOutSine') 
    $element_2.transition({…}, 150, 'easeOutExpo') 
    $element_3.transition({…}, 100, 'easeOutSine') 
    $element_4.transition({…}, 200, 'easeOutBack') 
} 

Это мое решение сейчас, и он прекрасно работает, но , он использует элементы как глобальные переменные, а мой .js-файл встраивается после окончания моих страниц. Если глобальные переменные являются плохой практикой, как это было бы предпочтительнее? Я знаю, что я мог бы определить селекторов в каждой функции, таким образом повторяя идентичную декларацию 4 раза, что кажется мне глупым. Я с нетерпением жду ваших отзывов об этой проблеме.

Answer 1

Большинство времени вы можете избежать загрязнения глобального пространства имен, окружив свой код в сразу выполненной функции выражения:

(function() { 

    // declare variables here 
    var $_element_1 = ...; 

    // use them here 
    function animate_1() { 
     ... 
    } 

    // register event handlers 
    ... 
})(); // invoke the function 

Обратите внимание, что функции теперь также локальную область действия, так что вы не могут ссылаться на них из встроенных обработчиков событий. Это хорошая вещь ;-)