0

私は JavaScript と JQuery の世界にかなり慣れていないので、コードの構造はまだそこに到達しています。パフォーマンスへの負担を軽減し、プログラムの動作を高速化するように記述する方法があることを理解しています。

これを達成するためのさまざまな方法を見てきましたが、私が持っているものに適用する方法がわかりません。コードをより構造的に健全にするためのいくつかの指針を示すために、スタック オーバーフローを探しています。

            console.log(wordIsCorrect);
            console.log($('.drop-box.spellword').length);
            if ($('.drop-box.spellword').length == wordIsCorrect) {

                $('.drop-box.spellword').addClass('wordglow2');
                $(right).val('Well Done!');
                $(right).show();
                audioS.play();
                $('.counter').html(completeWords + '/6').show();
                $(wrong).hide();
                $('.minibutton').prop('disabled', false);
                var completeLetters = $('.wordglow2').length;
                var completeWords = (completeLetters / 3);
                $('.counter').html(completeWords + '/6');

                if (completeWords == 3) {
                    $('table').fadeOut(2000);
                }

                var incompleteWords = $('.spellword').hasClass('.wordglow4').length;
                if (incompleteWords == 3) {
                    $('.minibutton').prop('disabled', false);
                }


            } else {

                $('.drop-box.spellword').addClass("wordglow4").css('color', 'transparent');
                $(wrong).val('Try Again');
                $('.minibutton').prop('disabled');
                $(wrong).show();
                audioF.play();
                $('.counter').html(completeWords + '/6').show();
                $(right).hide();
                $('.drop-box.spellword').animate({
                    'opacity': 1
                }, 1000, function() {
                    $(this).removeClass('wordglow4').removeClass('occupied').html('')
                });

            }

これは、私のコードの if ステートメントの 1 つです。各タスクを個別に分割する必要があることは理解していますが、どこから始めればよいかわかりません。

残りのコードに取り組み始めることができるように、誰かが私を正しい方向に向けることができますか? ありがとう！

4

5 に答える 5

5

1) 連鎖を使用すると、DOM リクエストの数が減少します。

    $(right).val('Well Done!')
            .show();

2) 複数回使用する場合は、変数をキャッシュします。

    $dropbox = $('.drop-box.spellword');
    $dropbox.css(bla bla bla...);
于 2012-09-14T08:35:09.737 に答える
3

注目すべきことの 1 つは、jQuery 呼び出しの連鎖です。

例えば：

$('#myinput').val("foo");
$('#myinput').show();

次のように書くことができます

$('#myinput').val("foo").show();

jquery 関数を呼び出すたびに (通常) 同じオブジェクトが返されるためです。これは常に当てはまるわけではありません。height() や find(..) などの関数を使用した後は、明らかにオブジェクトは最初に使用した jQuery オブジェクトとは異なるため、関数の順序を確認する必要があります。

これにより、jQuery はそのオブジェクトを毎回作成し直す必要がないため、速度がわずかに向上する可能性があります。次のように、jquery オブジェクトを同じ効果で「キャッシュ」することもできます。

var myinput = $('#myinput');

myinput.val("foo");
// ... later
myinput.show();

これにより、複数の jQuery 呼び出しが節約されます。

これらの最適化は非常に小さいですが、JavaScript イベントが常に発生する可能性があるため、すぐに増加します。

于 2012-09-14T08:37:12.507 に答える
2

連鎖に加えて、 を使用contextすると (セレクター) のパフォーマンスも向上します。これにより、指定された要素を検索する場所がセレクターに通知されます (常に DOM ルートから開始するのではなく)。ターゲットにしたい特定のDIV「ターゲット」があり、それが別のDIV「コンテナ」内のどこかにあるとします。これを行うことができます：

$('#target', '#container').dostuff();

また

$('#myButton').click(function(){
    $('span', this).addClass('bar');
});

（thisコンテキストはどこにありますか）

ここでコンテキストの詳細を参照してください: コンテキストを使用した jQuery セレクターのパフォーマンス

于 2012-09-14T08:42:25.467 に答える
1

すでに言われているように、私はただヒントを追加しています...

ネストされた要素とその親を処理するときは、「end（）」メソッドを使用します。十分に文書化されているため、jQueryのドキュメントをコピー/完成するつもりはありません 。jQueryのend（）関数のドキュメントを参照してください。

これをブックマークに追加してください：

http://api.jquery.com/
http://www.artzstudio.com/2009/04/jquery-performance-rules/
于 2012-09-14T08:45:48.083 に答える
0

このようなもの

var spellword = $('#spellword'); // give it an ID and cache the object 
console.log(wordIsCorrect);
console.log(spellword.length);
if (spellword.length == wordIsCorrect) {

    spellword.addClass('wordglow2');
    $(right).val('Well Done!').show();
    audioS.play();
    // $('.counter').html(completeWords + '/6').show(); // will be done later again
    $(wrong).hide();
    $('.minibutton').prop('disabled', false);
    var completeLetters = $('.wordglow2').length;
    var completeWords = (completeLetters / 3);

    if (completeWords == 3) {
        $('#table1').fadeOut(2000); // give it an ID
    }

    var incompleteWords = spellword.hasClass('.wordglow4').length>0;
    if (incompleteWords == 3) {
        $('#minibutton').prop('disabled', false); // give an ID
    }
} else {

    spellword.addClass("wordglow4").css('color', 'transparent');
    $('#minibutton').prop('disabled',true); // give an ID and a value 
    $(wrong).val('Try Again').show();
    audioF.play();
    $(right).hide();
    spellword.animate({
        'opacity': 1
    }, 1000, function() {
        $(this).removeClass('wordglow4').removeClass('occupied').empty()
    });

}

$('#counter').html(completeWords + '/6').show(); // give it an ID instead of a class
于 2012-09-14T08:44:57.023 に答える