Is storing query selectors globally always bad practice?

Question

I read a lot about global variables as bad practice and I understand the reasons. Yet, in some cases it seems so much more easy. So this is my case and question.

I have some functions that animate (actually I use query.transit plugIn by Rico St. Cruz) a bunch of elements together like:

$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' )
}

This is my solution for now and it works fine, yet, it is using the elements as global variables and my .js file is imbedded after the end of my pages. If global variables are bad practice how would it be preferable to do? I know that I could define the selectors in each function thus repeating the identical declaration 4 times which seems silly to me. I am looking forward to your feedback on this generell issue.

I'd be more concerned with DRYing that code up, not the global variables ;) — Rory McCrossan, Nov 28 '14 at 11:19
Duplicate of http://stackoverflow.com/questions/4246284/why-are-globals-bad? — Gezzasa, Nov 28 '14 at 11:21
@Garavani The problem isn't the "global variables" so much as the "copy and paste / duplication". (The "global variables" could trivially be module-level variables, exposed as properties as relevant, and the same problem with the code would remain.) — user2864740, Nov 28 '14 at 11:22
@Rory May you give me an example of how YOU would dry this code? Thanks for help! — Garavani, Dec 14 '14 at 10:18

score 3 · Accepted Answer · answered Nov 28 '14 at 11:21

3

Most of the time you can avoid polluting the global name space by wrapping your code in an immediately executed function expression:

(function() {

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

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

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

Note that the functions are now also locally scoped, so you can't reference them from inline event handlers. This is a good thing ;-)

answered Nov 28 '14 at 11:21

Alnitak

334,560
70
407
495

For me it does not work so far. :-( The animation functions have to be stored in an external script where many pages and ajax content have to get them. Right now I get errors type of: can’t get variable animate_3()… I will try to experiment with your code and come back later. Thanks so far! – Garavani Nov 28 '14 at 11:36
@Garavani yes, that's a similar effect to what I've described in the last line. If you want functions to be accessible the current source module then they _must_ either be global, or be part of a module and/or type that is itself global. – Alnitak Nov 28 '14 at 14:23
Thanks Alnitak for your answer and explaining. Although I am afraid not to be able to make it working this way. So I guess I will keep them globally. Further on all the animated elements are always the same so in my case it is a good thing that they will be overwritten. The module thought I will try to understand and read about… – Garavani Nov 28 '14 at 15:50

Is storing query selectors globally always bad practice?

1 Answers1