Uso correcto del this en JQuery

Al momento de usar JQuery no deberías abusar del this

Uso correcto del this en JQuery

Para las personas que usan todavía JQuery les traemos esta serie de consejos para que apliquen en su vida diaria como programadores, buenas practicas

JQuery nos trajo un sinfín de soluciones al momento de manejar objetos del DOM, pero lamentablemente nos hizo más dependiente de algunas funcionabilidades que nos entregó.

$('#someAnchor').click(function() {
  // Bleh
    alert( $(this).attr('id') );
});

Si nuestra única necesidad del objeto jQuery es acceder al atributo de id de la etiqueta ancla, esto es un desperdicio. Mejor seguir con JavaScript "crudo".

$('#someAnchor').click(function() {
    alert( this.id );
});

Tenga en cuenta que hay tres atributos a los que siempre se debe acceder, a través de jQuery: "src", "href" y "style". Estos atributos requieren el uso de getAttribute en versiones antiguas de IE.

Ejemplo:

// jQuery Source
var rspecialurl = /href|src|style/;
// ... 
var special = rspecialurl.test( name );
// ...
var attr = !jQuery.support.hrefNormalized && notxml && special ?
    // Some attributes require a special call on IE
    elem.getAttribute( name, 2 ) :
    elem.getAttribute( name );

Múltiples Objetos jQuery

Aún peor es el proceso de consultar repetidamente el DOM y crear múltiples objetos jQuery.

$('#elem').hide();
$('#elem').html('bla');
$('#elem').otherStuff();

Con suerte, ya sabe lo ineficiente que es este código. Si no, está bien; todos estamos aprendiendo La respuesta es implementar encadenamiento o "almacenar en caché" la ubicación de #elem.

// This works better
$('#elem')
  .hide()
  .html('bla')
  .otherStuff();
 
// Or this, if you prefer for some reason.
var elem = $('#elem');
elem.hide();
elem.html('bla');
elem.otherStuff();

 

No hay descargable

Redactado por: , Leido 853 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021