Inicio » Blog » Jquery

26 julio, 2019

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

Uso correcto del this en JQuery

Suscríbete a nuestro canal en Youtube

Suscríbirse

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 1869 veces

Compartir link del tutorial con tus amigos


Aprende más sobre Jquery

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023