Question

I often works with jquery and sometimes my code contains lot of repeated css class names, like:

$('#div1').addClass('funny-class');
...
$('#div2').addClass('funny-class');
...
$('#div1').removeClass('funny-class');

etc… I was asking to myself if is it worth to clean the code using pseudo constants like:

var constants = {
    FUNNY: 'funny-class'
}
...
$('#div1').addClass(cnst.FUNNY);
$('#div2').addClass(cnst.FUNNY);
$('#div1').removeClass(cnst.FUNNY);

First: minimization. If “constants” is a local var (hidden into a scope) probably the minimizer could replace the occurrence of “constants.FUNNY” with something minimized like “a.B”.

Second: speed. The code with “constants” is faster than the first one?

What do you think?

Answer 1

Putting it in variables can provide you with a certain amount of “central control” rather than performance.

However, putting them deeply in an object will incur a performance penalty. Keep them near the surface as possible to avoid the overhead in scope resolution. (it’s minimal, but still an overhead)

//this one is so deep:
constants.foo.bar.baz.bam

//this is just 1 level deep:
constants.bam

Also, I’d worry more about the jQuery calls you are making

//two calls to #div1!
$('#div1').addClass(cnst.FUNNY);       //$() for div1
$('#div2').addClass(cnst.FUNNY);
$('#div1').removeClass(cnst.FUNNY);    //another $() for div1

//do this instead
var div1 = $('#div1')             //reference div1 once in a local variable

div1.addClass(cnst.FUNNY);        //use the reference to the object
$('#div2').addClass(cnst.FUNNY);
div1.removeClass(cnst.FUNNY);     //use the same reference to the object