Überprüfen Sie vor dem Hinzufügen, ob die Klasse bereits zugewiesen ist

Wird in jQuery empfohlen, vor dem Hinzufügen dieser Klasse zu überprüfen, ob einem Element bereits eine Klasse zugewiesen ist? Wird es überhaupt eine Wirkung haben?

Beispielsweise:

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

Wenn Sie Zweifel haben, ob die Klasse bazbereits zugewiesen wurde, labelist dies der beste Ansatz:

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

oder würde das reichen:

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

Rufen Sie einfach an addClass(). jQuery erledigt die Prüfung für Sie. Wenn Sie auf eigene Faust zu überprüfen, verdoppeln Sie die Arbeit, da jQuery wird immer noch die Prüfung für Sie ausführen.

Eine einfache Überprüfung in der Konsole hätte ergeben, dass ein addClassmehrmaliger Anruf mit derselben Klasse sicher ist.

Insbesondere finden Sie den Scheck in der Quelle

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

Diese Frage erregte meine Aufmerksamkeit nach einer anderen, die als Duplikat dieser Frage markiert war .

Diese Antwort fasst die akzeptierte Antwort mit einem kleinen Detail zusammen.

Sie versuchen zu optimieren, indem Sie unnötige Überprüfungen vermeiden. In diesem Zusammenhang sind folgende Faktoren zu beachten:

1. Es ist nicht möglich, doppelte Klassennamen im Klassenattribut zu haben, indem ein DOM-Element über JavaScript bearbeitet wird. Wenn Sie class="collapse"in Ihrem HTML, calling Element.classList.add("collapse");keine zusätzliche hinzufügen Zusammenbruch Klasse. Ich kenne die zugrunde liegende Implementierung nicht, aber ich denke, sie sollte gut genug sein.
2. JQuery führt einige notwendige Überprüfungen in seinen addClassund removeClassImplementierungen durch (ich habe den Quellcode überprüft ). Für addClassnach einigen Prüfungen zu machen , und wenn eine Klasse vorhanden ist JQuery nicht versucht , es wieder hinzuzufügen. In ähnlicher Weise removeClassführt JQuery etwas aus, entlang dessen cur.replace( " " + clazz + " ", " " );eine Klasse nur dann entfernt wird, wenn sie existiert.

Bemerkenswert ist, dass JQuery einige Optimierungen in seiner removeClassImplementierung vornimmt, um ein sinnloses erneutes Rendern zu vermeiden. Es geht so

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

Die beste Mikrooptimierung, die Sie durchführen können, besteht darin, den Aufwand für Funktionsaufrufe und die damit verbundenen Implementierungsprüfungen zu vermeiden.

Angenommen, Sie möchten eine Klasse mit dem Namen umschalten collapse, wenn Sie die vollständige Kontrolle darüber haben, wann die Klasse hinzugefügt oder entfernt wird, und wenn die collapseKlasse anfänglich nicht vorhanden ist, können Sie Folgendes optimieren:

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

Wenn Sie eine Klasse aufgrund von Änderungen in der Bildlaufposition umschalten, wird dringend empfohlen, die Behandlung von Bildlaufereignissen zu drosseln .

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