Eklemeden önce sınıfın zaten atanmış olup olmadığını kontrol edin

JQuery'de, o sınıfı eklemeden önce bir sınıfın bir öğeye atanmış olup olmadığını kontrol etmeniz önerilir mi? Herhangi bir etkisi olacak mı?

Örneğin:

<label class='foo'>bar</label>

Şüpheye düştüğünüzde, eğer sınıfa bazzaten atanmışsa label, bu en iyi yaklaşım olur mu:

var class = 'baz';
if (!$('label').hasClass(class)) {
  $('label').addClass(class);
}

yoksa bu yeterli olur mu:

$('label').addClass('baz');

Sadece ara addClass(). jQuery kontrolü sizin için yapacak. Kendi başınıza kontrol ederseniz, işi ikiye katlamış olursunuz, çünkü jQuery kontrolü sizin için yine de yürütecektir.

Konsoldaki basit bir kontrol addClass, aynı sınıfla birden çok kez aramanın güvenli olduğunu söylerdi .

Özellikle çeki kaynakta bulabilirsiniz

if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
  setClass += classNames[ c ] + " ";
}

Bu soru, bunun bir kopyası olarak işaretlenen bir diğerinin ardından dikkatimi çekti .

Bu cevap, kabul edilen cevabı biraz ek ayrıntıyla özetler.

Gereksiz bir kontrolden kaçınarak optimize etmeye çalışıyorsunuz, bu bağlamda bilmeniz gereken faktörler şunlardır:

1. JavaScript aracılığıyla bir DOM öğesini işleyerek sınıf özniteliğinde yinelenen sınıf adlarına sahip olmak mümkün değildir. Eğer varsa class="collapse"HTML'nize, çağıran Element.classList.add("collapse");ek eklemez çöküşü sınıfı. Altta yatan uygulamayı bilmiyorum, ama sanırım yeterince iyi olmalı.
2. JQuery, addClassve removeClassuygulamalarında bazı gerekli kontrolleri yapar ( kaynak kodunu kontrol ettim ). Çünkü addClass, bazı kontroller yaptıktan sonra ve bir sınıf varsa JQuery onu tekrar eklemeye çalışmaz. Benzer şekilde removeClassJQuery, cur.replace( " " + clazz + " ", " " );bir sınıfı yalnızca mevcutsa kaldıracak bir şeyler yapar .

Dikkat çekmeye değer, JQuery, removeClassanlamsız bir yeniden işlemeyi önlemek için uygulamasında bazı optimizasyonlar yapar . Bu böyle devam ediyor

...
// only assign if different to avoid unneeded rendering.
finalValue = value ? jQuery.trim( cur ) : "";
if ( elem.className !== finalValue ) {
    elem.className = finalValue;
}
...

Bu nedenle, yapabileceğiniz en iyi mikro optimizasyon, işlev çağrısı genel giderlerinden ve ilgili uygulama kontrollerinden kaçınmaktır.

Adlandırılmış bir sınıfı değiştirmek istediğinizi varsayalım collapse, eğer sınıfın ne zaman eklendiğini veya kaldırıldığını tamamen kontrol ediyorsanız ve collapsesınıf başlangıçta yoksa, aşağıdaki şekilde optimize edebilirsiniz:

$(document).on("scroll", (function () {
    // hold state with this field
    var collapsed = false;

    return function () {
        var scrollTop, shouldCollapse;

        scrollTop = $(this).scrollTop();
        shouldCollapse = scrollTop > 50;

        if (shouldCollapse && !collapsed) {
            $("nav .branding").addClass("collapse");
            collapsed = true;

            return;
        }

        if (!shouldCollapse && collapsed) {
            $("nav .branding").removeClass("collapse");
            collapsed = false;
        }
    };
})());

Bir kenara, kaydırma konumundaki değişiklikler nedeniyle bir sınıfta geçiş yapıyorsanız , kaydırma olayı işlemeyi azaltmanız şiddetle önerilir .

$("label")
  .not(".foo")
  .addClass("foo");