Herramientas para desarrolladores : Cursos, manuales y guías de referencia : Cursos : JavaScript avanzado :
Compactando el código de los scripts
- Introducción
- Eliminado espacios, líneas en blanco y carácteres de punto y coma
- La sentencia condicional if ... else
- Trabajando con objetos
- Compartiendo el código
1. Introducción
El tamaño de una página es un aspecto a tener en cuenta, tanto más cuando la velocidad de la conexión a Internet de la mayoría de nuestros visitantes es la de un módem a 33 o 56 Kbps (o incluso menor).
Si bien el tamaño de las imágenes suele pesar más en la carga, es la suma de todo lo que al final hace que una página tarde en bajarse 2 minutos en vez de 5 o 10 segundos.
A continuación vamos a describir algunas técnicas JavaScript que reducen el tamaño de los scripts, conservando su funcionalidad intacta. Son formas de codificar alternativas, a veces algo más confusas, pero muy utilizadas por los programadores avanzados.
2. Eliminado espacios, líneas en blanco y carácteres de punto y coma
Comenzamos por lo más sencillo: ¿son necesarios los espacios, las líneas en blanco y los puntos y coma que aparecen en el script? La respuesta es simple: todos no.
En efecto, para separar sentencias JavaScript basta con un retorno de carro, y no es en absouto necesario poner el punto y coma (;) al final de la línea. Sí es necesario cuando en esa misma línea se va a continuar con otra sentencia.
En cuanto a los espacios en blanco, se pueden eliminar todos los que aparezcan al final de una línea. Siempre es conveniente escribir un código legible, pero los espacios en blanco al final de una línea no aportan nada.
Finalmente, una separación de varias líenas en blanco entre diferentes sentencias tampoco aporta nada: lo único que añade es tamaño a tu página web. Con un sólo retorno de carro es suficiente.
3. La sentencia condicional if ... else
Una de las sentencias más utilizadas en JavaScript es el if ... else. Vemos un ejemplo:
if ( hola == true )
alert('¡Hola!')
else
alert('¡Adios!')
Esta codificación es clara y no deja lugar a dudas sobre lo que hace el script. Sin embargo, existe una forma de simplificarla.
Para empezar, la evaluación de ( hola == true ) puede tomar dos valores: true (verdadero) o false (falso). Ahora bien, la evaluación de ( hola ) toma igualmente esos mismos valores. Por ello, las líneas anteriores pueden escribirse como:
if ( hola )
alert('¡Hola!')
else
alert('¡Adios!')
Esto es muy habitual en la mayoría de los lenguajes de programación. De hecho, es posible utilizar este truco incluso cuando el valor de la variable que se utiliza en la condición es numérico, ya que en JavaScript (al igual que en otros lenguajes de programación, como el C) un valor numérico de 0 es evaluado como false, y cualquier otro valor es true.
Sin embargo, todavía podemos reducir más el tamaño de las sentencias condicionales. Las 4 líenas anteriores pueden convertirse en una sóla si se utiliza el operador ?. Este operador evalúa la condición a su izquierda y devuelve el primer valor a su derecha si es verdadera, y el que aparece tras el caracter ":" si es falsa. Vemos como queda nuestro ejemplo:
( hola ) ? alert('¡Hola!') : alert('¡Adios!)
Increible, pero cierto.
Nota: como nos ha sugerido José Juan, un visitante de /*El Código*/ al que damos las gracias por su colaboración, aún es posible reducir más el ejemplo anterior. Esta codificación es más lógica aunque quizá más difícil de entender.
alert( hola ? '¡Hola!' : '¡Adios!')
4. Trabajando con objetos
JavaScript es un lenguaje basado en un modelo de objetos. Los objetos JavaScript representas los elementos de una página HTML y permiten realizar acciones sobre ellos. Cuando trabajamos con formularios, es frecuente tener que escribir líneas como estas:
formulario.campo1.value = '¡Hola!'
formulario.campo2.value = 10
if ( formulario.lista.selectedIndex == 2 )
formulario.campo3.value = formulario.campo4.value
...
Como se observa, para acceder a elementos del objeto formulario tenemos que nombrarlo en primer lugar (así el script sabe a qué formulario concreto nos estamos refiriendo).
Existe una forma de resumir el código anterior, utilizando la sentencia with:
with ( formulario ) {
campo1.value = '¡Hola!'
campo2.value = 10
if ( lista.selectedIndex == 2 )
campo3.value = campo4.value
}
Como se observa, ya no tenemos que añadir "formulario." cada vez que queramos referirnos a un elemento del objeto formulario.
5. Compartiendo el código
No podemos finalizar este capítulo dedicado a la reducción del tamaño que ocupa el código sin mencionar el encapsulamiento en archivos .js de los scripts que utilicemos en varias páginas. Podemos copiar nuestro código en un fichero a parte (de extensión .js) y cargarlo con la página, del siguiente modo:
<script languaje="JavaScript" src="codigo.js"></script>
Realmente, esto no reduce el tamaño del script, pero tiene dos ventajas claras:
- El código sólo se carga una vez. Para el resto de páginas en que aparezca la líena anterior, el navegador utilizará la copia del fichero que tiene en la caché (no lo descarga de nuevo).
- Modificando un sólo fichero cambiamos el código de todas las páginas en las que se utiliza (esto es algo realmente importante).
Sin embargo, hay que tener en cuenta que la incluisión de JavaScript en ficheros externos sólo está soportada a partir de las versiones 3.x del IE y del Navigator.
