2009-07-14

10 tips para mejorar tu JavaScript al máximo

1. Utiliza el atributo defer sólo para scripts IE externos

Esto no es algo necesariamente obligatorio, pero puede resultar útil a veces. El atributo defer está declarado dentro de un tag

El propósito de defer es decirle al script linkeado externamente que espere a que la página termine de cargar antes de ponerse a andar. Lo mismo se puede lograr por medio de métodos no-obstrusivos de Javascript, que usualmente incluye código que previene que los scripts se ejecuten hasta que el DOM termine de cargar.

Las ventajas de defer ocurren en conexión con Internet Explorer, dado que este navegador es el único que soporta este atributo. Por lo que si necesitas un script rápido para utilizar sólo en IE, y no te molesta que la página entera se cargue antes de que este se ejecute, simplemente añade defer=”defer” en tu etiqueta




¿Notan el símbolo “menor”, que es parte de la declaración if? Este símbolo causará errores de validación en tu página a menos que envuelvas tu código en una sección CData, de esta forma:







3. Evita las palabras claves JavaScript al crear identificadores de usuario

Muchas palabras son reservadas como palabras claves en JavaScript, por lo que deberías evitar utilizarlas como nombres de variables u otros identificadores personales. La lista completa de palabras claves es la que sigue:

* break
* case
* catch
* continue
* default
* delete
* do
* else
* finally
* for
* function
* if
* in
* instanceof
* new
* return
* switch
* this
* throw
* try
* typeof
* var
* void
* while
* with

4. Evita las palabras Javascript reservadas al crear identificadores de usuario

Existen también palabras JavaScript reservadas, que no necesariamente son utilizadas actualmente en el lenguaje, pero están reservadas para su uso futuro como palabras claves. Estas palabras son las siguientes:

* abstract
* boolean
* byte
* char
* class
* const
* debugger
* double
* enum
* export
* extends
* final
* float
* goto
* implements
* import
* int
* interface
* long
* native
* package
* private
* protected
* public
* short
* static
* super
* synchronized
* throws
* transient
* volatile

5. No cambies el tipo de una variable después de la declaración inicial

En JavaScript, técnicamente, lo siguiente es perfectamente legal:

var my_variable = “This is a String”;
my_variable = 50;

Luego de la declaración inicial de la variable como una cuerda en la línea 1, en la línea 2 su valor es cambiado y su tipo de información también. Esto no es bueno y debería evitarse.
6. No utilices variables globales

Para prevenir posibles conflictos, en el 99% de los casos, utiliza la palabra clave var al declarar inicialmente las variables y sus valores. Esto asegura que tus variables estén localizadas y no sean accesibles fuera de la función en la que han sido declaradas. Así que si utilizas el mismo nombre de variable en dos funciones diferentes, no habrá conflicto dado que cada variable será abolida en el momento en que su función termine de ejecutarse.
7. JavaScript es sensible al caso

Recuerda que las siguientes dos variables representan dos contenedores completamente distintos:

var myVariable = “data”;
var myvariable = “more data”;

Así que utiliza prácticas buenas y consistentes en tus identificadores para asegurarte de no declarar dos variables diferentes cuando en realidad sólo querías crear una.
8. Utiliza switch para manejar condiciones múltiples

No hagas esto:

if (example_variable == “cyan”) {
// do something here…
} else if (example_variable == “magenta”) {
// do something here…
} else if (example_variable == “yellow”) {
// do something here…
} else if (example_variable == “black”) {
// do something here…
} else {
// do something here…
}

Haz esto:

switch (example_variable) {
case “cyan”:
// do something here…
break;
case “magenta”:
// do something here…
break;
case “yellow”:
// do something here…
break;
case “black”:
// do something here…
break;
default:
// do something here…
break;
}

El segundo bloque de código logra exactamente lo mismo que el primero, pero el segundo está limpio, es fácil de leer, de mantener y de modificar.
9. Utiliza try-catch para prevenir que los errores se muestren a los usuarios

Al envolver todo tu código en una declaración try-catch, puedes asegurarte que los usuarios nunca vean un desagradable error JavaScript. Cómo esto:

try {
nonExistentFunction();
} catch (error) {
document.write(”An error has occured.”)
}

En el código de abajo, hemos intentado llamar a una función que no existe, para forzar un error. El navegador no mostrará el típico error “not an object” o “object expected” , pero en su lugar mostrará el error personalizado que hemos incluido en la sección catch. También puedes dejar la sección catch vacía, y nada sucederá en el lado del cliente, o podrías crear una función para llamar dentro de la sección catch y manejar el error de forma tranquila para tus propios propósitos de debuggeo.

Ten presente que esto puede causar que los errores se escondan también del desarrollador, por lo que buena documentación de código y comentarios sería útil aquí.
10. Realiza comentarios multi-línea legibles, pero simples

En JavaScript, puedes comentar una línea de código poniendo // al principio de la misma. También puedes comentar un bloque de código como se muestra aquí

/* [el código va aquí] */.

Algunas veces necesitarás incluir una línea de comentario más larga y múltiple. Un buen método para usar que es fácil de localizar en el código es el siguiente:

/*
* This is a multi-line comment …
* cont’d…
* cont’d…
* cont’d…
* cont’d…
*/

Eso es todo. Diez prácticas JavaScript simples que esperamos les sirvan a todos.

¿Qué consejo añadirían ustedes?

Fuente: Impressive Webs

No hay comentarios: