Verifique si la clase ya fue asignada antes de agregar

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

Por ejemplo:

 

En caso de duda si class baz ya ha sido asignado a la label , este sería el mejor enfoque:

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

o sería esto suficiente:

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

Simplemente llame a addClass() . jQuery hará el control por ti. Si comprueba por su cuenta, está doblando el trabajo, ya que jQuery aún ejecutará el cheque por usted.

Un simple control en la consola le hubiera dicho que llamar a addClass varias 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 captó mi atención después de otra marcada como duplicada de esta .

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

Está tratando de optimizar evitando una verificación innecesaria, a este respecto, 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, llame a Element.classList.add("collapse"); no agregará una clase de colapso adicional. No sé la implementación subyacente, pero supongo que debería ser lo suficientemente bueno.
  2. JQuery realiza algunas comprobaciones necesarias en sus implementaciones addClass y removeClass (revisé el código fuente ). Para addClass , después de realizar algunas comprobaciones y si existe una clase, JQuery no intenta volver a agregarla. Del mismo modo para removeClass , JQuery hace algo a lo largo de la línea de cur.replace( " " + clazz + " ", " " ); que eliminará una clase solo si existe.

Digno de mención, JQuery hace algo de optimización en su implementación removeClass para evitar una nueva 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; } ... 

Por lo tanto, la mejor micro optimización posible podría ser con el objective de evitar los gastos generales de llamadas a funciones y las comprobaciones de implementación asociadas.

Digamos que quiere alternar una clase llamada collapse , si tiene el control total de cuándo se agrega o quita la clase, y si la clase de collapse está ausente inicialmente, 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; } }; })()); 

Como un lado, si está alternando una clase debido a cambios en la posición de desplazamiento, se recomienda enfáticamente acelerar el manejo de eventos de desplazamiento.

    Intereting Posts