是否值得优化用常量替换字符串的Javascript代码？

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 "aB".

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

What do you think?

Answer 1

You can use Google's closure compiler with advanced optimization to identify commonly repeated strings and replace them by constant variable references. But this optimization is marginal; if you want to improve your code you'd get a better improvement by caching jQuery objects (this is a matter usually overlooked by many programmers):

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

Answer 2

它可能不像性能那样明显，但使用常量而不是字符串总是一个好习惯，因为您可以通过更改常量的值来轻松修改值。

Answer 3

1. Yes, a minifier will probably reduce the constants.FUNNY variable, where-as it probably won't detect the re-use of 'funny-class' and assign it to a variable.

2. The speed difference will be so marginal you shouldn't care. On one side you have to resolve the variable in the scope chain (very quick), but in the other you have to create a String primitive (also quick).

The benefits of having your constants object is if you decide to change the name of the class you assign, you only have to do it in one place, not 3; this is the sole benefit you should be considering... not a 0.0000000000000001 second speed difference.

Answer 4

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