en Javascript

Javascript y jQuery: Consejos y Buenas Practicas (Parte I)

/wp-content/uploads/2009/12/308801-209198.jpgjQuery es una de las librerias mas utilizadas por los desarrolladores FrontEnd por su versatilidad y facilidad de uso. En Pixelovers somos autenticos fans de esta libreria.

Es por esto que queremos compartir con vosotros lo que consideramos que son unas buenas practicas a la hora de programar codigo Javascript ayudandonos de la libreria jQuery.

El objetivo de este compendio de buenas practicas es conseguir un codigo Javascript y jQuery lo mas limpio, claro y eficiente posible.

Los tips que aqui incluimos estan sacados de nuestra propia experiencia y de conclusiones interesantes que hemos ido encontrando por la red y que hemos acoplado a nuestro repertorio.

Como son muchos los puntos tratados y para no cargar el post con demasiada informacion vamos a dividir este compendio en 2 partes.

En esta primera parte hablaremos de normas generales a seguir que te ayudaran a crear un codigo mas claro y eficiente. En un segundo post hablaremos de como solucionar de forma eficiente problemas concretos que nos solemos encontrar en nuestros
desarrollos.

Y una vez dicho esto, vamos al lio…

Aprenderse bien la librería.

Para utilizar siempre la solución mas optimizada posible. No está de mas tener a mano una chuleta de jQuery o ir directamente a la documentacion oficial de jQuery

Utilizar librerias consolidadas, versatiles, con soporte y con proyecto de futuro.

Por ejemplo jQuery como librería principal y jQuery Tools y jQuery UI como liberias adicionales de efectos

Trabajar en archivos separados.

Mejor crear JS’s diferentes para cada funcionalidad separable de nuestro site y luego utilizar algun sistema que junte todos estos JS’s en uno final (comprimido y ofuscado)

Javascript no intrusivo.

Nunca depender de JS en la medida de lo posible. Si está desactivado el javascript o
falla, que la pagina muestre un aspecto normal. Javascript es una mejora, no un sistema de seguridad.

Optimiza el codigo haciendo pruebas de rendimiento.

Con Firebug podemos medir el tiempo que tarda una funcion (o trozo de codigo) en ejecutarse:

Comprimir el codigo al final.

Al comprimir el codigo el archivo JS que tendrá que bajarse el usuario será de
menor tamaño, aunque hay que valorar el rendimiento final ya que por el contrario el navegador tendrá que realizar el proceso adicional de descomprimir el codigo antes de
ejecutarlo.Para comprimir el codigo disponemos de herramientas, tipo YUI Compressor aunque hay muchas mas

El marcado semantico y accesible viene primero.

No adaptar el marcado para facilitar el JS sino que sea el JS el que se adapte al marcado. Con ID’s, herencia, y clases podemos acceder a cualquier elemento y asignarle funcionalidades

Marcado malo:

Marcado bueno:

Marcado bueno y listo para JS:

Encapsular lo maximo posible el codigo.

Esto significa agrupar todas las funciones comunes dentro de una funcion padre, asi acotamos el contexto de cada funcionalidad (objeto si hace falta)

Ejemplo:

Elimina consultas innecesarias.

Podemos ahorrarnos la llamada al $(document).ready() poniendo los tags script justo antes de que se cierre el tag body

eval is evil

Evitar el uso de eval. Problemas de seguridad. Mas info de por qué puede ser un problema aqui. Una posible alternativa al uso de EVAL puede ser JSON.parse o JSONP   Y hasta aqui la primera parte del asunto… ¿Que te han parecido los puntos aqui comentados? ¿Estas de acuerdo? ¿Algun punto que creas que falta en esta lista?

Enlaces y más

Posts Relacionados

Javascript y jQuery: Consejos y Buenas Practicas (... Durante los últimos meses, Microsoft nos ha tenido en vilo ( sobretodo a los desarrolladores web ), pendientes del soporte a la especificación de CS...
Los 5 mejores libros para aprender Javascript En esta ocasión veremos como evitar un problema con el que seguro os habréis topado en más de una ocasión: El navegador no detecta un cambio que h...
10 Blogs sobre Diseño y Desarrollo Web en castell... Coda es un editor de texto orientado al desarrollo web que integra, además, un completo gestor de sites, funciones de un cliente FTP, un cliente SS...
  • http://www.webdcg.com Andrés…

    Muy buen tuto, lo tomaré en cuenta 😉

  • adrian

    muy bueno, una pregunta, me puede dar un ejemplo para esto que usted sugería:

    Mejor crear JS’s diferentes para cada funcionalidad separable de nuestro site y luego utilizar algun sistema que junte todos estos JS’s en uno final (comprimido y ofuscado)