Avisar de contenido inadecuado

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

{
}

¿Le has echado ya un vistazo a mis libros "Apuntes de Javascript"?

http://apuntesjs.com


jQuery 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.

http://stc.obolog.net/multimedia/fotos/309000/308801/308801-209198.jpg

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 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...

Consideraciones Generales

  • 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 como comentabamos en otro post hace unas semanas 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:
                            
            console.time('native');  
            var l = array.length;
                    for (var i=0;i<l; i++) {
            array[i] = i;  
            }  
            console.timeEnd('native');  
                             
                    
    
  • 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 horrible:

    First Option First option description
    Second Option Second option description

    Marcado malo:

    First Option
    First option description
    Second Option
    Second option description

    Buen marcado:

    First Option
    First option description
    Second Option
    Second option description
  • 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:

                            
            var mySite = new Object();
            
            mySite = {
                    
                    var1 : 1,
                    var2 : 2,
                    valorCalculado,
                    
                    init : function() {
                            // aqui hago varias cosas
                            this.valorCalculado = "hola";
                            this.funcionalidad1();
                    },
                    
                    funcionalidad1 : function() {
                            // aqui desarrollo una funcionalidad concreta
                    
                    }
            }
            
            // desde fuera (o desde otro objeto) puedo llamar a las funciones de este objecto
            mySite.funcionalidad1();
                                            
    
    
  • Elimina consultas innecesarias. Podemos ahorrarnos la llamada al $(document).ready() lanzando el
{
}
{
}

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

Muy buen tuto, lo tomaré en cuenta ;)
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)
adrian adrian 02/10/2013 a las 21:59

Deja tu comentario Javascript y jQuery: Consejos y Buenas Practicas (Parte I)

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

Avatar Tu nombre