Micaela 13 de Julio de 2009 a las 09.06
   Imprimir artículo
elWebmaster.com

10 tips para mejorar tu JavaScript al máximo

web, desarrollo, código, javascript, tips, consejos

javascript_125x125

El lenguaje Javascript es uno de los más utilizados en la web y es uno de los códigos más versatiles a la hora de aplicarlo en la creación de tu sitio.

Para todos los desarrolladores que suelen trabajar con JavaScript a continuación les dejamos 10 tips, que consideramos los mejores, para que mejoren su codificación 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 <script> en XHTML, de esta forma:

<script type=”text/javascript” defer=”defer”></script>

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 <script> y eso solucionará el problema. Un uso práctico para defer es solucionar el problema de la transparencia PNG en IE6.

NOTA: El atributo defer debe ser utilizado al esconder un script de otros navegadores mediante un comentario condicional que etiquete un script IE-solo, de otra forma el script funcionará normalmente en otros navegadores.

2. Utiliza una sección CData para prevenir XHTML de errores estrictos de validación

La mayoría de tus scripts residirán en archivos externos, y serán llamados en una etiqueta <script> ya sea en <head> del documento, o justo antes del tag finalizador</body>.

Pero puede que haya una instancia en la que estés incluyendo Javascript directamente en la misma página HTML, dentro de la etiqueta <script>, de esta forma:

<div>
<p>
<script type=“text/javascript”>
var my_variable = 100;
if (my_variable < 50) {
// do something here…
}
</script>
</p>
</div>

¿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:

<div>
<p>
<script type=“text/javascript”>
//<![CDATA[
var my_variable = 100;
if (my_variable < 50) {
// do something here...
}
//]]>
</script>
</p>
</div>

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 discrimina mayúsculas y minúsculas

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

Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Comentarios (5)

  1. homer0 dice:
    Lunes, 13 de Julio de 2009 a las 13.06

    Hola,

    Primero que nada, muy bueno el articulo,me gusto… ahora, podrian hacer que su feed levante el articulo entero en vez de solo dos lineas… es molesto tener que salir del reader para leer, cuando todos los demas blogs cargan el contenido entero.

    Saluds

  2. René C++ dice:
    Lunes, 13 de Julio de 2009 a las 14.30

    buenos tips:
    tambien cabria mencionar, que una buena indentación se utiliza para mejorar la legibilidad del código fuente….ayuda a identificar mas rapido donde comienzan y donde terminan funciones o bloques de codigo.

    SALU2.

  3. spideep dice:
    Lunes, 13 de Julio de 2009 a las 20.31

    Buen alcance.

  4. DAVID GONZALEZ dice:
    Martes, 14 de Julio de 2009 a las 12.36

    BUENOS CONSEJOS YO INICIO EN EL USO DE SCRIPTS Y LA VERDAD SON VERSATILES PERO AVECES SI ES NECESARIO DOCUMENTAR SIN ENBARGO EN EL TEMA DE CONSEJOS PARA QUE EL SCRIPT SEA FUNCIONAL ME PARECE EXCELENTE DADO QUE A VECES NO SABES QUE UN SCRIPT PUEDE HACER QUE TODO SEA MAS PRACTICO Y SOBRETODO CON UN CODIGO MAS LIMPIO FELICIDADES POR EL APORTE GARCIAS

  5. ignacio campuzano flores dice:
    Lunes, 20 de Julio de 2009 a las 17.55

    mi opinion personal es identica a rene c ++, solo me resta calificarlos como un gran aporte a la comunidad saludos desde la era cuaternaria by

Deja tu opinión

© 2007 - 2010 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión