Uso correcto del this en JQuery

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

Uso correcto del this en JQuery

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

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

 

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Uso correcto del this en JQuery?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 112 veces | Publicado hace 6 meses

Más códigos de programación en JQUERY.

Ver scripts de JQUERY

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

Programación en JQUERY

Ejemplos y scripts de programación para tus proyectos

Lo último que estamos programando en el curso: Lector de Códigos QR ANDROID PHP MYSQL

Últimos detalles diseño y prueba de la app Lector Market Alis

Diseño y prueba final del Lector QR

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019