Verifique si la clase ya está asignada antes de agregar

En jQuery, ¿se recomienda verificar si una clase ya está asignada a un elemento antes de agregar esa clase? ¿Tendrá algún efecto en absoluto?

Por ejemplo:

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

En caso de duda, si la clase bazya ha sido asignada label, ¿sería este el mejor enfoque?

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

o esto sería suficiente:

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

Solo llama addClass(). jQuery hará la verificación por usted. Si verifica por su cuenta, está duplicando el trabajo, ya que jQuery aún ejecutará la verificación por usted.

Una simple comprobación en la consola le habría dicho que llamar addClassvarias veces con la misma clase es seguro.

Específicamente puedes encontrar el cheque en la fuente.

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

Esta pregunta llamó mi atención después de otra que se marcó como un duplicado de esta .

Esta respuesta resume la respuesta aceptada con un pequeño detalle adicional.

Está tratando de optimizar evitando una verificación innecesaria, en este sentido, aquí hay factores que debe tener en cuenta:

1. no es posible tener nombres de clase duplicados en el atributo de clase mediante la manipulación de un elemento DOM a través de JavaScript. Si tiene class="collapse"en su HTML, llamar Element.classList.add("collapse");no agregará una clase de colapso adicional . No conozco la implementación subyacente, pero supongo que debería ser lo suficientemente buena.
2. JQuery hace algunas comprobaciones necesarias en sus addClassy removeClassimplementaciones (he comprobado el código fuente ). Porque addClass, después de hacer algunas comprobaciones y si existe una clase, JQuery no intenta agregarla nuevamente. De manera similar removeClass, JQuery hace algo en la línea de lo cur.replace( " " + clazz + " ", " " );cual eliminará una clase solo si existe.

Cabe destacar que JQuery hace algunas optimizaciones en su removeClassimplementación para evitar una re-renderización inútil. Dice así

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

Entonces, la mejor micro optimización que podría hacer sería con el objetivo de evitar los gastos generales de llamadas a funciones y las verificaciones de implementación asociadas.

Digamos que desea alternar una clase nombrada collapse, si tiene el control total de cuándo se agrega o quita la collapseclase , y si la clase está inicialmente ausente, entonces puede optimizar de la siguiente manera:

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

Además, si está alternando una clase debido a cambios en la posición de desplazamiento, se recomienda encarecidamente que acelere el manejo del evento de desplazamiento.

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