Przed dodaniem sprawdź, czy klasa jest już przypisana

Czy w jQuery zaleca się sprawdzenie, czy klasa jest już przypisana do elementu przed dodaniem tej klasy? Czy to w ogóle będzie miało jakiś efekt?

Na przykład:

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

W razie wątpliwości, czy klasa bazzostała już przypisana label, czy byłoby to najlepsze podejście:

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

czy to wystarczy:

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

Po prostu zadzwoń addClass(). jQuery zrobi to za Ciebie. Jeśli sprawdzasz samodzielnie, podwajasz pracę, ponieważ jQuery nadal przeprowadzi sprawdzanie za Ciebie.

Proste sprawdzenie w konsoli powiedziałoby ci, że addClasswielokrotne dzwonienie z tą samą klasą jest bezpieczne.

W szczególności możesz znaleźć czek w źródle

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

To pytanie zwróciło moją uwagę po kolejnym, które zostało oznaczone jako duplikat tego .

Ta odpowiedź podsumowuje zaakceptowaną odpowiedź z niewielkimi dodatkowymi szczegółami.

Próbujesz zoptymalizować, unikając niepotrzebnego sprawdzania, w związku z tym oto czynniki, o których musisz wiedzieć:

1. nie można mieć zduplikowanych nazw klas w atrybucie klasy poprzez manipulowanie elementem DOM za pomocą JavaScript. Jeśli masz class="collapse"w kodzie HTML, wywołanie Element.classList.add("collapse");nie spowoduje dodania dodatkowej klasy zwijania . Nie znam podstawowej implementacji, ale przypuszczam, że powinna być wystarczająco dobra.
2. JQuery dokonuje niezbędnych kontroli w swoim addClassi removeClassimplementacjach (sprawdziłem kod źródłowy ). Po addClasswykonaniu pewnych sprawdzeń i jeśli klasa istnieje, JQuery nie próbuje jej ponownie dodać. Podobnie w przypadku removeClassJQuery robi coś, cur.replace( " " + clazz + " ", " " );co powoduje usunięcie klasy tylko wtedy, gdy istnieje.

Warto zauważyć, że JQuery przeprowadza pewną optymalizację swojej removeClassimplementacji, aby uniknąć bezcelowego ponownego renderowania. Tak to wygląda

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

Zatem najlepszą mikrooptymalizacją, jaką można by zrobić, byłaby uniknięcie narzutu wywołań funkcji i związanych z nimi kontroli implementacji.

Powiedzmy, że chcesz zmienić klasę o nazwie collapse, jeśli masz pełną kontrolę nad tym, kiedy klasa jest dodawana lub usuwana, a jeśli collapseklasa jest początkowo nieobecna, możesz zoptymalizować w następujący sposób:

$(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;
        }
    };
})());

Na marginesie, jeśli przełączasz klasę z powodu zmian w pozycji przewijania, zdecydowanie zalecamy ograniczenie obsługi zdarzeń przewijania.

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