0

Jshint.comは、以下のコードに対してこれを提案しています。

Line 150: }, false );

Don't make functions within a loop.

ただし、document.getElementById()を複数回記述する必要はなく、代わりにIDを配列に保存してループすることができます。

より簡潔で保守しやすいコードだと思います。

function styleTwitter( pair_array )
{
    var i, input, label;
    for ( i = 0; i < pair_array.length; i+=2 ) 
    {
        input = document.getElementById( pair_array[ i ] );
        label = document.getElementById( pair_array[ i + 1 ] );

        input.addEventListener( "focus", function()
        { 
            if( input.value === '' )
            {
                label.style.opacity = 0; 
                input.style.border = '1px solid #888888'; 
            }
        }, false );

        input.addEventListener( "blur", function()
        {
            if( input.value === '' )
            {
                label.style.opacity = 1;
                new EffectsFont( label ).fade( 'up', 150 );
                input.style.border = '1px solid #dddddd'; 
            }

        }, false );
    }
4

2 に答える 2

2

イベントソースを分析して同じことを行う関数を1つ作成してみましたか?把握しやすく(読み:さらに保守しやすい)、メモリを消費しません(クロージャはスタック全体をキャプチャするため、決して安くはありません)。

于 2012-05-19T20:26:13.373 に答える
0

getElementById()ルックアップなどのDOM操作を実行すると、コストがかかり、ページの速度が低下します。ループ内の不透明度などのスタイル変更をプログラムで適用する場合、ブラウザは毎回画面を再描画する必要があるため、これらもコストがかかります。

これで、これらの変更を適用するCSSクラスがある場合、1回の操作ですべての変更を適用し、何百ものブラウザーの再描画操作を節約できます。これが主に、ループされたUIの更新を避ける必要がある理由です。

ただし、実行しているループの数によって異なります。それが物事を遅くせず、これがあなたの唯一のループである場合、それについて心配しないでください。これは、より高性能なアプリケーションにとってより重要です。

PSこのような要素にイベントリスナーを追加するとき、要素が後でDOMから削除された場合にもそれらを削除すると、メモリリークが発生することに注意してください。

于 2012-05-19T20:29:41.737 に答える