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

10 tips para mejorar tu JavaScript al m√°ximo


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

Comentarios (5)

  1. homer0 dice:

    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:

    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:

    Buen alcance.

  4. DAVID GONZALEZ dice:

    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:

    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 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder