JavaScriptコードを最適化して文字列を定数に置き換える価値はありますか？

Question

私は、多くの場合、jQueryを使って動作し、時々私のコードは次のように、繰り返されるCSSクラス名の多くが含まれていますように、疑似定数を使用してコードをきれいにすることは価値がある場合

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

等...私は自分自身に尋ねました。

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

最初に：最小化。 "定数"がローカル変数（スコープに隠れている）の場合、おそらく最小化子は "定数.FUNNY"の出現を "a.B"のように最小化されたものに置き換えることができます。

秒：速度。 "定数"を持つコードは、最初のコードより高速ですか？

あなたはどう思いますか？

Answer 1

これを変数に入れると、パフォーマンスよりもむしろ一定量の「中央制御」が得られます。

しかし、それらをオブジェクトに深く置くと、パフォーマンス上のペナルティが発生します。スコープ解決のオーバーヘッドを避けるために、可能な限り表面近くに保管してください。 （それはまだオーバーヘッド最小限だが、）

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

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

また、私はjQueryのは、あなたが一般的に繰り返される文字列を識別するために、高度な最適化とGoogleのclosure compilerを使用することができます

//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 

Answer 2

パフォーマンスとしては目立たないかもしれませんが、定数の値を変更することで簡単に値を変更できるため、文字列ではなく定数を使用することをお勧めします。

Answer 3

1. はい、minifierはおそらくconstants.FUNNY変数、それ-としてはおそらくが'funny-class'の再使用を検出し、それを変数に割り当てることはありませんが低下します。

2. 速度の差はごくわずかなので気にする必要はありません。一方では、スコープチェーン内の変数を解決する必要があります（非常に速い）が、もう一方では文字列プリミティブを作成する必要があります（素早く）。

あなたconstantsオブジェクトを持つことのメリットは3、あなたが割り当てたクラスの名前を変更することにした場合、あなたは一つだけの場所でそれをしなければならないではありません。これはの唯一のの恩恵です。0.0000000000000001秒の差ではありません。

Answer 4

を作っている呼び出すについてもっと心配したいです定数の変数参照で置き換えます。しかし、この最適化は限界的です。

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