10 formas de escribir un mejor código en jQuery

Sin duda alguna, jQuery se ha vuelto la biblioteca de javascript por excelencia, y no lo digo solamente porque me agrade, la gran cantidad de recursos, plugins, tutoriales y documentación, hacen que a muchos les entre la curiosidad y se inicien en javascript aún cuando nunca les atrajo el lenguaje.

Y bien, ya que la usamos seguido, o pensamos aprenderla, no nos queda de más conocer unos cuantos tips que nos sirvan para que funcione de un modo más adecuado.

Andando por ahí me encontré un post de Giulio Bai que aborda este tema en específico y nos dá unas buenas sugerencias al respecto:

1. $(document).ready (); Siempre

Todo lo que contenga será ejecutado tan pronto el DOM sea cargado y antes de que los contenidos sean llenados. Te permite agregar eventos a cualquier elemento en la página sin interferir directamente con el markup; todos esos metiches de onload, onclick y onLoQueSea ya no son necesarios, solo escribílos encapsulados ahí.

Un pequeño ejemplo podría ser:

$(document).ready(function()
 {
    $(".dummy").click(function()
    {
        $(this).css('color', '#000000');
    });
});

2. Usá $(window).load ()

Aunque la vasta mayoría de ejemplos vienen usando el método descrito anteriormente, a veces es mejor evitar poner todo ahí.

$(document).ready () es increíblemente útil, pero ocurre durante el rendering de la página, cuando los objetos aún se están descargando. Por eso las funcionalidades supérfluas como scrollings, arrastrar y soltar, podrían ponerse dentro de una función $(window).load () ya que esta ejecuta después de que todos los hayan sido descargados y evita que algo se rompa mientras carga la página.

La sintáxis es casi la misma que la de $(document).ready ():

$(window).load (function () {
// métodos de scrolling
});

3. Carga sólo lo que realmente necesitas

Todos han sido tentados a escribir JavaScript que va a ser usado en una sola página de un sitio y luego cargarlo por todas partes, aunque no se use. jQuery se toma el tiempo de revisar todos y cada uno de los elementos que se le dan, y eso pone las cosas un poco lentas.

Hay dos formas que se sugieren para evitar este problema. El más sencillo sería simplemente agregar una clase en el body del html que sea identificador para correr ahí solamente el código necesario.

$(document).ready(function()
 {
    if ('body').hasClass('home')
    {
        // home page code
        }
    else if ('body').hasClass('blog')
    {
        // blog code
        }
    // Y así sucesivamente
});

El otro método, un poco más enredado, sería construir una biblioteca para llamar el código que se necesite desde cada página:

var jslib =
{
    home:
    {
        init: function() {
            // home page code
            }
    },

    blog:
    {
        init: function() {
            // blog code
            }
    }

    // Y así sucesivamente
}

4. Aprende qué es el método ‘Data’ y usálo

Esto es algo muy común, la gente no piensa en ello y siempre escriben cosas como:

$('.selector').attr ('alt', 'naranja');

para guardar y asociar datos misceláneos en el DOM. Esto, es técnicamente incorrecto, además de que es fácil confundirse, sobre todo para las personas que entren al proyecto después.

jQuery ya tiene un método que sirve para guardar datos en el DOM llamado ‘data’. El ejemplo de arriba vendría siendo algo como esto:

$('.selector').data ('miColor', 'azul');
// que puede ser pedido con
$('.selector').data ('miColor');

Este método te permite asociar y guardar datos en cualquier elemento de la página y tener un nombre de referencia.

5. Usá los selectores personalizados

Estar familiarizado con los selectores de CSS es util cuando se trata de jQuery. Pero conocer los selectores que trae la biblioteca es de verdad un empujón increíble. Date una vuelta por http://docs.jquery.com/Selectors para conocer más de ellos.

Por ejemplo, podrías usar:

$("div:contains('hola')").css ('background-color', '#cc0000');

para pintar de rojo todos los div que contengan la palabra “hola” ó

$('input:password')

para obtener todos los campos que sean para password.

6. Indicadores con clases

Podés usar indicadores ó flags para monitorear lo que el usuario está haciendo o bien revisar si algo en particular se efectuó o no. El método addClass es bastante útil en este caso ya que provee una forma fácil de agregar una nueva clase css a un elemento. Así que podés chequear la existencia de la clase con la función hasClass.

Un uso muy común de los indicadores se da cuando a aplicación tiene uno o más modos de trabajo; al entrar en el segundo modo, el indicador se fija a un elemento predeterminado y, cuando se necesite, el método hasClass es usado para revisar el modo de trabajo actual. Sencillo no?

function editModeOn ()
{
// Inicializa el modo de edición y fija un indicador
$('#flags').addClass ("editModeOn");
// hacer otras cosas
}

function saveData ()
{
// guarda los datos pero primero sale del modo de edición (si está ahí)
if ($('#flags').hasClass ('editModeOn')) {
exitEditMode ();
$('#flags').removeClass ('editModeOn');
}

save ();
}

7. No llamés el mismo selector cientos de veces

De verdad, no lo hagas. Perfectamente en lugar de hacer algo como:

$('p.hola').css ('color', '#000000');
$('p.hola').text ('hoola');
$('p.hola').addClass ('parrafo');
$('p.hola').fadeTo (1000, 1);

Podés hacer algo como:

var $p = $('p.hola');
$p.css ('color', '#000000');
$p.text ('hola');
$p.addClass ('parrafo');
$p.fadeTo (1000, 1);

Eso va a mantener la información del selector lista para ser reutilizada.

8. Encadenando (Casi) todo

El encadenado, o chaining de jQuery es muy útil.
El código anterior podría ser reescrito como:

$('p.hola').css ('color', '#000000').text ('hola').addClass ('parrafo').fadeTo (1000, 1);

Eso sí, sin exagerar, es sabido que este patrón puede ser un poco lento.

9. La utilidad toggleClass

Podés encender y apagar la clase de un elemento para variar su comportamiento sin mucho esfuerzo. Digamos que tenés una clase .hidden que esconde los elementos que la usen. Fácilmente podrías mostrar los elementos de nuevo usando:

$('p.hidden').toggleClass ();

Otro punto de toggleClass es que, con el nuevo release de jQuery 1.3.3, el método .toggleClass() va a tener nuevas formas de operar. Va a ser capaz de cambiar multiples clases, además de que podrá quitar y poner todas las clases.

Estás son las formas en que vas a poder usar toggleClass:

// Con un elemento dado

	// Cambiar todas las Clases
	$('div').toggleClass(); //
	<div>
	$('div').toggleClass(); //
	<div class="a b c">
	$('div').toggleClass( false ); //
	<div>
	$('div').toggleClass( true ); //
	<div class="a b c">

	// Cambiar múltiples clases
	$('div').toggleClass( "a b" ); //
	<div class="c">
	$('div').toggleClass( "a c" ); //
	<div class="a">
	$('div').toggleClass( "a b c", false ); //
	<div>
	$('div').toggleClass( "a b c", true ); //</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

10. Guardá los resultados de jQuery

Cuando se trata de funciones, podrías querer tener algunos resultados disponibles en otros lugares. Acá hay dos posibilidades.

Una posible solución sería guardar los resultados dentro de objetos dentro de una variable global, así se pueden usar después:

// usamos el objeto Window
	window.$resultados = {
	uno : 0,
	dos : 0
	};

	// esta es la función que podria corre más de una vez
	function getResults (first, second)
	{
	$resultados.uno = first;
	$resultados.dos = second;
	}

	// corre la funcion
	getResults ($('li.azul'), $('a.rojo));
	$resultados.uno.hasClass ('azul'); // true
	$resultados.dos.hasClass ('azul'); // false

	// corre de nuevo
	getResults ($('li.rojo'), $('a.azul));
	$resultados.uno.hasClass ('azul'); // false
	$resultados.dos.hasClass ('azul'); // true

La otra, y a mi parecer la mejor, como se recomienda en el punto 4 es usar el método Data en lugar de crear una variable global.

$.data(window, "resultados", { uno: false, dos: true });

//Para accesar los valores:

$.data(window, "resultados").uno; // false
$.data(window, "resultados").dos; // true

// Y para cambiarlos:

$.data(window, "resultados").uno = true;
$.data(window, "resultados").dos = false;