Uso correcto del this en JQuery

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

Leido 1872 veces