Question

I have a couple click functions with jQuery that share the same variables, so I created a function to return those variables.

While this works, I’m wondering whether programmatically speaking this is the right or most efficient way to do this:

function clickVars($me){
    var $curStep = $('.cust-step-cur'),
        $nextStep = $curStep.next('.cust-step'),
        nextStepLen = $nextStep.length,
        $list = $('.cust-list'),
        $btnCheck = $('.cust-btn.checklist'),
        hasChecklist = $me.hasClass('checklist');

    return {
        curStep: $curStep,
        nextStep: $nextStep,
        nextStepLen: nextStepLen,
        list: $list,
        btnCheck: $btnCheck,
        hasChecklist: hasChecklist
    };
}

// Checklist Click
$('.option-list a').on('click',function(){
    var $me = $(this),
        myVars = clickVars($me);        

    currentStepOut(myVars.curStep);

    myVars.curStep.removeClass('cust-step-cur');

    currentStepIn(myVars.nextStep, myVars.list, myVars.btnCheck);
});

// Navigation
$('.cust-btn').on('click',function(){
    if(animReady === false) 
        return false;

    var $me = $(this),
        myVars = clickVars($me);


    if(myVars.hasChecklist && myVars.list.hasClass('cust-step-cur'))
        return false;

    currentStepOut(myVars.curStep);

    myVars.curStep.removeClass('cust-step-cur');

    if(myVars.nextStepLen === 0 || $me.hasClass('checklist')) {
        myVars.nextStep = myVars.list;
    }

    animReady = false;

    currentStepIn(myVars.nextStep, myVars.list, myVars.btnCheck);
});

Is this a standard way of generated shared variables between multiple functions?

Answer 1

You have to understand you are not sharing variables between functions. Moreover, each time you click those elements, clickVars function is called again and again, even if you click only one element multiple times. So this code is very bad expirience. Check this:

// Defined ones 
var nodes = {
    $elements       : $('.elements'),
    $otherElements  : $('.otherElements'),
}

// In case you have multiple .selector elements in your DOM
$('.selector').each(function() {

   // Defined ones for each element
   var $element = $(this), isList = $element.hasClass('.list');

   $element.bind('click', function(){
     nodes.$elements.addClass('clicked');
   });
});


$('.anotherSelector').each(function() {

   // Yep, here is some duplicate code. But there won't be any
   // performance improvement if you create special method for
   // such small piece of code
   var $element = $(this), isList = $element.hasClass('.list');

   $element.bind('click', function(){
     nodes.$elements.addClass('clicked');
   });
});