Controlla se la classe è già assegnata prima di aggiungerla

In jQuery, è consigliabile controllare se una classe è già assegnata a un elemento prima di aggiungere quella classe? Avrà anche qualche effetto?

Per esempio:

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

In caso di dubbio, se la classe bazè già stata assegnata label, questo sarebbe l'approccio migliore:

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

o sarebbe sufficiente:

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

Chiama e basta addClass(). jQuery farà il controllo per te. Se controlli da solo, stai raddoppiando il lavoro, poiché jQuery eseguirà comunque il controllo per te.

Un semplice controllo nella console ti avrebbe detto che chiamare addClasspiù volte con la stessa classe è sicuro.

Nello specifico puoi trovare l'assegno nella fonte

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

Questa domanda ha attirato la mia attenzione dopo un'altra che è stata contrassegnata come un duplicato di questa .

Questa risposta riassume la risposta accettata con un piccolo dettaglio in più.

Stai cercando di ottimizzare evitando un controllo non necessario, a questo proposito ecco i fattori di cui devi essere a conoscenza:

1. non è possibile avere nomi di classi duplicati nell'attributo di classe manipolando un elemento DOM tramite JavaScript. Se hai class="collapse"nel tuo HTML, la chiamata Element.classList.add("collapse");non aggiungerà un'ulteriore compressione classe di . Non conosco l'implementazione sottostante, ma suppongo che dovrebbe essere abbastanza buona.
2. JQuery effettua alcuni controlli necessari nelle sue addClasse removeClassimplementazioni (ho controllato il codice sorgente ). Infatti addClass, dopo aver effettuato alcuni controlli e se esiste una classe, JQuery non prova ad aggiungerla di nuovo. Allo stesso modo removeClass, JQuery fa qualcosa lungo la linea del cur.replace( " " + clazz + " ", " " );quale rimuoverà una classe solo se esiste.

Degno di nota, JQuery fa alcune ottimizzazioni nella sua removeClassimplementazione per evitare un inutile re-rendering. Va così

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

Quindi la migliore micro ottimizzazione che potresti fare sarebbe quella di evitare i sovraccarichi delle chiamate di funzione e i controlli di implementazione associati.

Supponi di voler attivare o disattivare una classe denominata collapse, se hai il totale controllo di quando la classe viene aggiunta o rimossa e se la collapseclasse è inizialmente assente, puoi ottimizzare come segue:

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

Per inciso, se stai alternando una classe a causa di cambiamenti nella posizione di scorrimento, ti consigliamo vivamente di limitare la gestione degli eventi di scorrimento.

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