Herramientas on-line para webmaster - Parte 2

CLOSURE COMPILER
Esta herramienta llamada Closure Compiler, nos permite optimizar código javascript de tres maneras diferentes.

• Whitespace only: Esta opción, la más sencilla de todas, solo quita los espacios, comentarios y saltos de linea del archivo javascript. estos nos ahorra preciosos bytes de transferencia.

function validar_controles(){for(i=0;i<div_.length;i++)validar(div_[i],validate_[i],msg_[i])};

• Simple, Esta opción revisa (compila) el código javascript, elimina saltos de linea y espacios, elimina comentarios, reemplaza nombre de variables, optimiza el código js y si encontrara algún error o peligro nos alerta de ello.

Por ejemplo utilizando el siguiente pedazo de código.

$("#boton").click(function() {     
   if(!existe_error()){ 
      var dataString = 'action=pubcomentario&name=' + $('#name').val() + '&mail=' + $('#mail').val() + '&web=' + $('#web').val() + '&texto=' + $('#texto').val()  + '&q=' + $('#q').val() + '&r=' + $('#r').val() + '&idp=' +  global_data['post'];
      $.ajax({
          type: 'POST',
       url: 'blogs.php',
          data: dataString,
          success: function(data) 
          {       
               data = data.substring(0,1);
               if(data==0)
               {
                   alert('Error: No se pudo guardar su comentario. Intente más tarde');
               }
               else if(data==1)
               {
                   $('#comm-body').html('');
                   $('#comm-msg').css("display", "block"); 
               }        
               else if(data==2)  
               {
                  alert('Error: Por favor complete la operación de seguridad');     
               }
           }
        });//fin ajax    
    }else {alert('No se puede enviar. Revise los campos marcados con rojo.');}
});//fin click

Obtenemos un resultado como este:

• Advanced, Este método similar al anterior pero mucho mas agresivo realiza una compilación y formateo completo de nuestro código javascript, hay que tener cuidado porque puede dejar el resultado totalmente irreconocible y no es completamente compatible con jquery.

Utilizando el código anterior tenemos una mayor compresión , ademas de que nos detecta 9 warnings.

Esta herramienta on-line es imprescindible para el desarrollo de páginas dinámicas aparte de que es 100% FREE .


BEAUTIFY JAVASCRIPT OR HTML

Para complementar la herramienta anterior, disponemos de "jsbeautifier", si bien closure compiler cuenta con la opción de "Pretty print", impresión manteniendo los salto de linea y las tabulaciones, jsbeautifier, nos muestra el código javascript perfectamente ordenado y colereado por si fuera poco. Su uso no puede ser más sencillo, solo debes pegar el código que desees formatear y presionar el único botón que tiene su interfaz y listo.

Al igual que la anterior herramienta, es completamente gratuito.