Browsing posts in: jQuery

8 crímenes en jQuery que nunca deberías cometer

Cualquiera puede programar en jQuery o JavaScript, ¿hay alguna duda de ello? Ahora, lo realmente interesante está en programar teniendo en cuenta la optimización del código, teniendo en cuenta todos los entresijos del lenguaje para poder entregar la aplicación con el mejor rendimiento posible. Y como yo nos los conozco todos, pero sí hay gente que lo hace,  sale este artículo.

Crímen #1, no usar la versión de jQuery alojada en Google

De lógica, casi, si sale una versión nueva de jQuery (y casi de cualquier framework), por algo será. En el caso de jQuery las nuevas versiones siempre vienen cargadas de correcciones de bugs y mejoras de rendimiento brutales. Si somos un poco manitas, tendremos muchos proyectos pululando por la web, ¿vas a ir uno por uno resubiendo y retocando todos para cambiar la versión de jQuery? Lo dudo. Por ello, la solución es usar el que está alojado en la CDN de Google, que no suele fallar. Y si falla, no os preocupéis, seguid leyendo.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Crímen #2, no tener una chuleta a mano

Y no sólo para los no-iniciados, puede que te acostumbres a trabajar de una forma que no es la más indicada y la memoria no es infinita. Ejemplos de buenas hojas de chuletas:

Crímen #3, no tener un fallback a local cuando falle la CDN

Relacionado al crímen #1. Si Google cae, por alguna extraña razón o el fin del mundo, que no te pille desprevenido. Es un script mega-sencillo que chequea si la ventana tiene jQuery activo, si no, crea el elemento script con tu versión de jQuery en local:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="js/jquery-1.8.1.min.js"></script>')</script>

Útil también para cuando trabajes en local y se te pierda la conexión, mucho más probable que lo de Google.

Crímen #4, usar selectores repetitivamente

Creía que esto era algo más que obvio para todos los programadores, pero parece que hay una oleada de código malo en jQuery pululando por la web. Cuando usas un selector, jQuery tiene que encontrar el elemento al que haces referencia, con su consecuente gasto de tiempo. Si tienes que usar el mismo elemento para modifcar varias propiedades del mismo, ¿no es mejor encadenarlas?

La versión cutre:

$("#mySmashingID").css("color","pink"); $("#mySmashingID").css("font","Verdana"); $("#mySmashingID").text("Some error message goes here!");

Versión correcta:

$("#mySmashingID").css({ "color": "pink", "font": "Verdana"}).text("Some error message goes here!!");

Crímen #5, no cachear los elementos apropiadamente

Uno de los más importantes en cuanto a rendimiento, parecido al anterior. Si tienes que usar un elemento varias veces, guárdalo en una variable, no recorras el DOM cada vez para encontrarlo.

Versión cutre:

 $(‘#mySmashingGag’).appendTo(‘#mysidebar’);
 $(‘#mySmashingGag’).addClass(‘widget’);
 $(‘#mySmashingGag’).hide();
 $(‘#mySmashingGag’).fadeIn(‘fast’);

Versión correcta:

 var mySmashingGag = $(‘#mySmashingGag’);
 mySmashingGag.appendTo(‘#mysidebar’);
 mySmashingGag.addClass(‘widget’);
 mySmashingGag.hide();
 mySmashingGag.fadeIn(‘fast’);

Crímen #6, no usar los IDs cuando puedes hacerlo

Entrando en el funcionamiento de jQuery, cuando usas un selector con una clase, jQuery recorre todo el árbol DOM para encontrar los elementos; en cambio, si usas un selector con el ID del elemento, usa la función nativa findElementById() que, como imaginarás, es mucho más rápida. Otra versión de lo mismo es la modificación de la selección por IDs para su optimización:


$("#hola").find("div.barra");

En lugar de


$("#hola div.barra");

Crímen #7, otra forma de escribir el $(document).ready

Todos sabréis para qué sirve el $(document).ready (ejecutar funciones tan pronto esté cargado el documento, en grosso), otra forma de escribirlo es con una función estilo lambda:


$(function(){

//cosas guay-ses

});

Crímen #8, no dar contexto

Simple: tratar de filtrar el contexto donde jQuery tiene que buscar.


$(".miClase","#MiElemento").on("click",hacerCosasMolonas);