Algunos consejos prácticos JQUERY


Algunos consejos prácticos que os pueden ser de utilidad después de leer mi tutorial rápido de jQuery. ¿Tienes cualquier otro consejo o sugerencia, o cualquier puntualización al respecto? Tu comentario será MUY bienvenido

NO ABUSES DE $(DOCUMENT).READY
Una de las primeras cosas que aprendemos en cualquier tutorial de jQuery es cómo y por qué utilizar $(document).ready y $() para inicializar nuestro código, en lugar del tradicional window.onload y su contrapartida en jQuery, $(window).load.

view plaincopy to clipboardprint?
$(document).ready(function() {
// La magia ocurre aquí
});

$(function() {
// La magia ocurre aquí
});

window.onload = function() {
// La magia ocurre aquí
}

$(window).load(function(){
// La magia ocurre aquí
});
La principal diferencia entre ambos métodos es que el evento ready se lanza cuando el navegador termina de cargar el árbol del documento (evento DOMContentLoaded en los navegadores más modernos), mientras que el manejador de onload se ejecuta cuando se termina de cargar todo el documento, incluidas las imágenes y los iframes.

Consecuentemente, habitualmente nos interesará colocar el código de inicialización en el manejador del evento ready, de forma que nuestra página parezca más rápida, al no tener que esperar el usuario a que cargue toda la página para poder usar la funcionalidad.

Sin embargo, hay ocasiones en las que el uso de $(document).ready puede ser contraproducente. Es el caso de funcionalidades que no son prioritarias, que pueden estar retrasando la carga de otras características más importantes, y que podemos postergar hasta después del evento onload.

Otro caso es el binding de eventos con live y delegate, funciones introducidas en las versiones 1.3 y 1.4.2 y que permiten agregar manejadores de eventos a elementos que aún no existen en el DOM. Si agregamos un manejador para aumentar el tamaño de la fuente de un párrafo al hacer clic sobre él y lo colocamos en el manejador de $(document).ready, tendremos que esperar a que cargue todo el DOM, mientras que si lo sacamos del manejador del evento ready, la funcionalidad estará activa en cuanto se cargue el elemento.

view plaincopy to clipboardprint?

$(‘#mensaje’).live(‘click’, aumentarTamanyo);

function aumentarTamanyo() {
$(this).css(‘font-size’, ‘200%’);
}

jQuery: The Write Less, Do More, JavaScript Library

PREVENTDEFAULT, STOPPROPAGATION Y RETURN FALSE
Otra de las cosas que se aprenden en los tutoriales de jQuery y que tampoco solemos cuestionar es el devolver false en un manejador para evitar que el navegador ejecute el comportamiento por defecto para el evento generado por el usuario. Podemos devolver false en el manejador del evento click de un enlace para evitar que se cargue la página enlazada, por ejemplo, o en el manejador de submit de un formulario para evitar que se envíe.

Esto último es muy común en funciones de validación de formularios:

view plaincopy to clipboardprint?

$(function() {
$(‘#frmLogin’).submit(comprobarCampos);
});

function comprobarCampos() {
if(!$(‘#usuario’).val() || !$(‘#password’).val()) {
alert(‘Por favor, introduzca su nombre de usuario y contraseña’);
return false;
}
}

Usuario:
Contraseña:

El ejemplo funciona perfectamente, y return false parece estar haciendo lo que queríamos. Sin embargo, en realidad, al devolver un valor false en el manejador, lo que estamos haciendo, además de prevenir la ejecución del comportamiento por defecto del navegador, es evitar que el evento se propague y que, por lo tanto, se ejecute el código de los manejadores de los padres para este evento.

Si sólo queremos evitar el comportamiento por defecto lo correcto es llamar a la función preventDefault() del objeto event. De igual manera, si sólo queremos evitar que se propague a los padres, llamaremos a la función stopPropagation() del objeto event.

view plaincopy to clipboardprint?

$(function() {
$(‘#frmLogin’).submit(comprobarCampos);
});

function comprobarCampos(event) {
if(!$(‘#usuario’).val() || !$(‘#password’).val()) {
alert(‘Por favor, introduzca su nombre de usuario y contraseña’);
event.preventDefault();
}
}

Usuario:
Contraseña:

EACH Y MAP PARA SUSTITUIR BUCLES
Aunque un bucle nativo siempre será más rápido, los tiempos por los que tenemos que preocuparnos en primer lugar son los de desarrollo y mantenimiento. Por este motivo, en ocasiones, es posible que prefieras utilizar las funciones $.each, $.fn.each, $.map y $.fn.map en lugar de usar bucles.

Aunque el siguiente ejemplo no es lo bastante complejo como para obtener ningún tipo de beneficio al utilizar estas funciones, os servirá para ver el aspecto de cada una de las alternativas

view plaincopy to clipboardprint?
// Bucle for
var numeros = [1, 2, 3];
var numItems = numeros.length;
for(var i = 0; i < numItems; i++) {
numeros[i] = numeros[i] * numeros[i];
}

// Bucle for in
var numeros = [1, 2, 3];
for(var i in numeros) {
numeros[i] = numeros[i] * numeros[i];
}

// Bucle for in con la lógica en una función
var numeros = [1, 2, 3];
for(var i in numeros) {
numeros[i] = cuadrar(numeros[i]);
}

function cuadrar(num) {
return num * num;
}

// $.each
var numeros = [1, 2, 3];
$.each(numeros, function(i, val) {
numeros[i] = val * val;
});

// $.map
var numeros = [1, 2, 3];
numeros = $.map(numeros, function(val) {
return val * val;
});

// $.map con la lógica en una función
var numeros = [1, 2, 3];
numeros = $.map(numeros, cuadrar);

function cuadrar(num) {
return num * num;
}
LOS BUCLES Y LOS EACH NO SIEMPRE SON NECESARIOS
jQuery intenta facilitarnos trabajar con las colecciones de elementos. No es necesario que hagas algo así para ocultar todos los enlaces:

view plaincopy to clipboardprint?
// Con $.fn.each
$('a').each(function () {
$(this).hide();
});

// Con for in
var enlaces = $('a');
for(var i in enlaces) {
$(enlaces[i]).hide();
};
basta, simplemente, con que hagas esto:

view plaincopy to clipboardprint?
$('a').hide();
HTML ELEGANTE
Aunque un script no es lugar adecuado para tener nuestro código HTML, en ocasiones queremos crear nuevos elementos que añadir al DOM y no queremos o no podemos utilizar plantillas. La manera más cándida de hacer esto sería algo como:

view plaincopy to clipboardprint?
$('‘)
O una forma más “a lo jQuery”

view plaincopy to clipboardprint?
$(‘‘).attr(‘src’, ‘http://www.jquery.com/logo.png&#8217;).
attr(‘alt’, ‘Logo de jQuery’).
attr(‘id’, ‘logo’).
click(function() {
alert(‘Este es el logo de jQuery’)
});
Pero desde jQuery 1.4 tenemos una forma aún mejor de hacer esto, pasando como segundo argumento un objeto cuyas propiedades son los nombres de los atributos, y al que podemos pasar también funciones de jQuery:

view plaincopy to clipboardprint?
$(““, {
src: ‘http://www.jquery.com/logo.png&#8217;,
id: ‘logo’,
click: function() {
alert(‘Este es el logo de jQuery’)
}
});
ENCADENADO Y CACHÉ DE SELECCIONES
Cada vez que utilizamos un selector en nuestro código, el engine de jQuery tiene que realizar operaciones más o menos costosas dependiendo del soporte nativo del navegador. Un selector por identificador, por ejemplo, es bastante rápido, dado que utiliza document.getElementById por debajo; selectores más complejos, como las pseudoclases, requieren de un mayor tiempo y mayores recursos para su procesado.

Lo ideal es no abusar demasiado de las búsquedas en el DOM y guardar el resultado en un variable, o bien aprovechar que las funciones suelen devolver la propia colección y utilizar cadenas de funciones.

view plaincopy to clipboardprint?
// Mala idea, desde el punto de vista del rendimiento
$(‘a:not([href*=mundogeek.net])’).attr(‘target’, ‘_blank’);
$(‘a:not([href*=mundogeek.net])’).css(‘background-image’, ‘url(“/img/externo.gif”)’);

// Cacheando en una variable
var enlacesExternos = $(‘a:not([href*=mundogeek.net])’);
enlacesExternos.attr(‘target’, ‘_blank’);
enlacesExternos.css(‘background-image’, ‘url(“/img/externo.gif”)’);

// Usando cadenas de funciones
$(‘a:not([href*=mundogeek.net])’)
.attr(‘target’, ‘_blank’)
.css(‘background-image’, ‘url(“/img/externo.gif”)’)
DATA EN LUGAR DE REL
En ocasiones, y aunque no es recomendable abusar de ello, es posible que nos interese almacenar cierta información en el propio DOM. Esto se venía haciendo hasta ahora utilizando hacks como el uso dudoso del atributo rel, las clases, o los atributos con nombres inventados, que generaban HTML no válido.

Esto cambiará en HTML 5, con la introducción de los nuevos atributos data, pero jQuery viene ofreciendo desde su versión 1.2.3 un sistema aún mejor, que evita tener que interactuar con el DOM, pero que también soporta la lectura de estos nuevos atributos de HTML 5. Este fantástico método se llama, como era de esperar, data y su uso es de lo más sencillo:

view plaincopy to clipboardprint?
$(‘table#tabla’).data({
campoOrden: ‘id’,
orden: ‘asc’
});

$(‘table#tabla’).data(‘campoOrden’);
AGRUPA LAS OPERACIONES
¿Necesitas aplicar un mismo método a varios elementos? No es necesario que los selecciones uno por uno. Si los agrupas utilizando un único selector, irás más rápido y el código será más corto.

view plaincopy to clipboardprint?
// Tedioso
$(‘#formularioCrear’).show();
$(‘#tablaItems’).show();
$(‘#mensajeAlerta’).show();

// Mucho mejor
$(‘#formularioCrear, #tablaItems, #mensajeAlerta’).show();
EVITA CONFLICTOS EN TUS PLUGINS
Crear plugins para jQuery es tan sencillo que muchos desarrolladores se encuentran escribiendo sus propios plugins a los pocos días de empezar a utilizar la librería. Si quieres distribuir tus extensiones, es una buena idea utilizar una sintaxis como la siguiente, para evitar conflictos con otras librerías que puedan utilizar $ para otros fines:

view plaincopy to clipboardprint?
(function($) {
$.alertar = function(mensaje) {
alert(mensaje);
}
})(jQuery);
Aunque el código puede parecer un poco confuso a simple vista, si lo analizamos detenidamente, veremos que no tiene mayor misterio. No hacemos más que crear una función anónima a la que pasamos como parámetro el objeto jQuery, dando a este parámetro el nombre $, para poder utilizar este símbolo indistintamente dentro de la función.

Acerca de albertoarceti
Administrador de sistemas informáticos, y erps en la industria farmacéutica.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: