Avisar de contenido inadecuado

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

{
}

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:

    			
    	<table>
    	    <tr>
    	    	<td onclick="doSomething();">First Option</td>
    	        <td>First option description</td>
    		</tr>
    		<tr>
    			<td onclick="doSomething();">Second Option</td>
    			<td>Second option description</td>
    		</tr>		
    	</table>
    			

    Marcado malo:

    	
            <dl>
    		<dt onclick="doSomething();">First Option</dt>
    		<dd>First option description</dd>
    		<dt onclick="doSomething();">Second Option</dt>
    		<dd>Second option description</dd>
    	</dl>
    		

    Buen marcado:

    			
    	<dl id="OptionList">
    	    <dt>First Option</dt>
    	    <dd>First option description</dd>
    	    <dt>Second Option</dt>
    	    <dd>Second option description</dd>
    	</dl>
    			
    
  • 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 <script> justo antes de cerrar el tag </body> lo que nos asegura que todos los elementos que podemos necesitar están ya cargados en el árbol DOM.

    Menos eficiente:

    			
    	$(document).ready(function(){
    		mylib.article.init();
    	});
    			
    

    Mas eficiente:

    			
    		<script type="text/javascript>
            	  mylib.article.init();
    		</script>
    	</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

{
}
{
}

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 de usuario Tu nombre