CODEWITHSUNDEEP
javascriptswitch-statementcase
Lewis
Lewis

Reputation: 14876

how many cases are appropriate on a switch statement

I plan to group my JS code by switch statement. It gonna be over 50 cases, I guess.

Is this too many cases? If my concern was right, how many cases should a switch statement handle?

//Edit

Just in case of fancybox, I want to group them by using switch statement within a function, like this:

function openFancybox(object){
    switch(object)
    {
        case '.edit':
            width = 900;
            height = 400;
        break;

        case '.friend':
            width = 700;
            height = 300;
        break;

        case '.follow':
            width = 'auto';
            height = 'auto';
        break;

        case '.global':
            width = 'auto';
            height = 'auto';
        break;

    }
    $(object).fancybox({
        'titlePosition'     : 'inside',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'centerOnScroll'    : true,
        hideOnOverlayClick:false,
        hideOnContentClick:false,
        'autoDimensions': false,
        'centerOnScroll'    : true,
        'width': width,
        'height': height,
    });
}

Upvotes: 0

Views: 398

Answers (1)

raina77ow
raina77ow

Reputation: 106385

In this particular case I'd have chosen the map (JS Object) solution, with keys being the classNames, and values being the arrays (of [width, height]) structure. For example:

var fancyBoxSettings = {
  edit: [900, 400],
  friend: [700, 300],
  some: [42, 42],
  more: [420, 420]
};

... minimizing the duplicating code (all these width =, height =, break etc.). Then I would have managed retrieving of these values with a helper function:

function getFancyBoxDimensions(className) {
  var dimensions = fancyBoxSettings[className] || ['auto', 'auto'];
  return { width: dimensions[0], height: dimensions[1] };
}

So it can be used like this:

var fbxSettings = {
  titlePosition     : 'inside',
  transitionIn      : 'none',
  transitionOut     : 'none'
  // ...
};
$.extend(fbxSettings, getFancyBoxDimensions(className)); 
$('.' + className).fancybox(fbxSettings);

Upvotes: 3

Related Questions