Vérifiez si la classe est déjà attribuée avant d'ajouter

Dans jQuery, est-il recommandé de vérifier si une classe est déjà affectée à un élément avant d'ajouter cette classe? Cela aura-t-il même un effet quelconque?

Par exemple:

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

En cas de doute si une classe baza déjà été attribuée label, serait-ce la meilleure approche:

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

ou cela suffirait-il:

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

Appelez addClass(). jQuery effectuera la vérification pour vous. Si vous vérifiez vous-même, vous doublez le travail, car jQuery exécutera toujours la vérification pour vous.

Une simple vérification dans la console vous aurait dit qu'appeler addClassplusieurs fois avec la même classe est sûr.

Plus précisément, vous pouvez trouver le chèque dans la source

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

Cette question a attiré mon attention après une autre qui a été marquée comme un double de celle-ci .

Cette réponse résume la réponse acceptée avec un petit détail supplémentaire.

Vous essayez d'optimiser en évitant une vérification inutile, à cet égard, voici des facteurs dont vous devez être conscient:

1. il n'est pas possible d'avoir des noms de classe en double dans l'attribut class en manipulant un élément DOM via JavaScript. Si vous en avez class="collapse"dans votre code HTML, l'appel Element.classList.add("collapse");n'ajoutera pas de classe de réduction supplémentaire . Je ne connais pas l'implémentation sous-jacente, mais je suppose qu'elle devrait être assez bonne.
2. JQuery fait quelques vérifications nécessaires dans ses implémentations addClasset removeClass(j'ai vérifié le code source ). Car addClass, après avoir fait quelques vérifications et si une classe existe, JQuery n'essaye pas de l'ajouter à nouveau. De même pour removeClass, JQuery fait quelque chose le long de la ligne cur.replace( " " + clazz + " ", " " );qui supprimera une classe uniquement si elle existe.

A noter, JQuery optimise son removeClassimplémentation afin d'éviter un re-rendu inutile. Ça va comme ça

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

La meilleure micro- optimisation que vous puissiez faire serait donc d'éviter les frais généraux d'appel de fonction et les vérifications d'implémentation associées.

Supposons que vous souhaitiez basculer une classe nommée collapse, si vous contrôlez totalement le moment où la classe est ajoutée ou supprimée, et si la collapseclasse est initialement absente, vous pouvez alors optimiser comme suit:

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

En passant, si vous basculez une classe en raison de changements dans la position de défilement, il est fortement recommandé de limiter la gestion des événements de défilement.

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