Advertisement
  1. Code
  2. JavaScript

24 buenas prácticas de JavaScript para principiantes

Scroll to top
Read Time: 11 min

Spanish (Español) translation by Esther (you can also view the original English article)

Como continuación de "30 buenas prácticas de HTML y CSS", esta semana revisaremos JavaScript. Una vez que hayas revisado la lista, ¡no dejes de comentarnos qué pequeños consejos has encontrado!


1. Utilizar === En lugar de ==

JavaScript utiliza dos tipos diferentes de operadores de igualdad: === | !== y == | != Se considera que la mejor práctica es utilizar siempre el primer conjunto al comparar.

"Si dos operandos son del mismo tipo y valor, entonces === produce verdadero y !== produce falso". - JavaScript: Las partes buenas

Sin embargo, al trabajar con == y !=, te encontrarás con problemas al trabajar con diferentes tipos. En estos casos, intentarán coaccionar los valores, sin éxito.


2. Eval = Bad

Para los que no estén familiarizados, la función "eval" nos da acceso al compilador de JavaScript. Esencialmente, podemos ejecutar el resultado de una cadena pasándola como parámetro de "eval".

Esto no solo disminuirá el rendimiento de tu script sustancialmente, sino que también supone un enorme riesgo de seguridad porque otorga demasiado poder al texto pasado. ¡Evítalo!


3. No uses la vía corta

Técnicamente, puedes omitir la mayoría de las llaves y los puntos y comas. La mayoría de los navegadores interpretan correctamente lo siguiente:

Sin embargo, considera esto:

Uno podría pensar que el código anterior sería equivalente a:

Por desgracia, se equivocaría. En realidad, significa:

Como verás, la separación imita la funcionalidad de la llave rizada. No hace falta decir que es una práctica terrible que debe evitarse a toda costa. El único momento en el que deben omitirse las llaves es con las líneas simples, e incluso esto es un tema muy debatido.

Siempre hay que tener en cuenta el futuro

¿Y si, más adelante, necesitas añadir más comandos a esta sentencia if? Para ello, tendrías que reescribir este bloque de código. En resumen, hay que tener cuidado con las omisiones.


4. Utiliza JS Lint

JSLint es un depurador escrito por Douglas Crockford. Solo tienes que pegar tu script, y rápidamente escaneará en busca de problemas y errores notables en tu código.

"JSLint" toma una fuente de JavaScript y la escanea. Si encuentra un problema, devuelve un mensaje que describe el problema y una ubicación aproximada dentro de la fuente. El problema no es necesariamente un error de sintaxis, aunque a menudo lo es. JSLint examina algunas convenciones de estilo, así como problemas estructurales. No demuestra que tu programa sea correcto. Solo proporciona otro par de ojos para ayudar a detectar problemas". - Documentación de JSLint

Antes de firmar un script, pásalo por JSLint para asegurarte de que no has cometido ningún error sin sentido.



5. Coloca los scripts en la parte inferior de tu página

Este consejo ya se recomendó en el anterior artículo de esta serie. Sin embargo, como es muy apropiado, voy a pegar la información.

Place JS at bottomPlace JS at bottomPlace JS at bottom

Recuerda: el objetivo principal es hacer que la página se cargue lo más rápidamente posible para el usuario. Al cargar un script, el navegador no puede continuar hasta que se haya cargado todo el archivo. Así, el usuario tendrá que esperar más tiempo antes de notar algún progreso.

Si tienes archivos JS cuyo único propósito es añadir funcionalidad, por ejemplo, después de hacer clic en un botón, coloca esos archivos en la parte inferior, justo antes de la etiqueta de cierre del cuerpo. Se trata de una práctica absolutamente recomendable.

Mejor


6. Declara variables fuera de la sentencia For

Cuando ejecutes largas sentencias "for", no hagas trabajar al motor más de lo necesario. Por ejemplo:

Malo

Fíjate en cómo debemos determinar la longitud del array para cada iteración, y cómo recorremos el dom para encontrar el elemento "contenedor" cada vez, ¡muy ineficiente!

Mejor

Puntos extra para la persona que deje un comentario mostrando cómo podemos mejorar el bloque de código anterior.


7. La forma más rápida de construir una cadena

No siempre hay que recurrir a la práctica sentencia "for" cuando hay que recorrer un array o un objeto. Sé creativo y encuentra la solución más rápida para el trabajo en cuestión.

No voy a aburrirte con pruebas comparativas; solo tienes que creerme (o probarlo por ti mismo): ¡este es, con diferencia, el método más rápido!

El uso de métodos nativos (como join()), independientemente de lo que ocurra detrás de la capa de abstracción, suele ser mucho más rápido que cualquier alternativa no nativa. - James Padolsey, james.padolsey.com


8. Reducir Globales

"Al reducir tu huella global a un solo nombre, reduces significativamente la posibilidad de malas interacciones con otras aplicaciones, widgets o bibliotecas". - Douglas Crockford

Mejor

Observa cómo hemos "reducido nuestra huella" a solo el objeto ridículamente llamado "DudeNameSpace".


9. Comenta tu código

Puede parecer innecesario al principio, pero créeme, QUIERES comentar tu código lo mejor posible. Qué pasa cuando vuelves al proyecto meses después, solo para descubrir que no puedes recordar fácilmente cuál era tu línea de pensamiento. O, ¿qué pasa si uno de tus colegas necesita revisar tu código? Siempre, siempre, comenta las secciones importantes de tu código.


10. Adopta la mejora progresiva

Siempre se compensa cuando JavaScript está desactivado. Puede ser tentador pensar: "La mayoría de mis espectadores tienen activado JavaScript, así que no me preocuparé". Sin embargo, esto sería un gran error.

¿Te has tomado un momento para ver tu hermoso deslizador con JavaScript desactivado? (Descarga la barra de herramientas para desarrolladores web para una forma fácil de hacerlo). Podría romper tu sitio por completo. Como regla general, diseña tu sitio asumiendo que JavaScript estará deshabilitado. Una vez hecho esto, ¡empieza a mejorar progresivamente tu diseño!


11. No pases una cadena a "SetInterval" o "SetTimeOut"

Considera el siguiente código:

Este código no solo es ineficiente, sino que además funciona de la misma manera que lo haría la función "eval". Nunca pases una cadena a SetInterval y SetTimeOut. En su lugar, pasa un nombre de función.


12. No utilices la expresión "con".

A primera vista, las declaraciones "Con" parecen una idea inteligente. El concepto básico es que pueden utilizarse para proporcionar una forma abreviada de acceder a objetos profundamente anidados. Por ejemplo...

-- en lugar de --

Desgraciadamente, después de algunas pruebas, se descubrió que "se comportan muy mal al fijar nuevos miembros". En su lugar, debes usar var.


13. Usa {} en lugar de New Object()

Existen múltiples formas de crear objetos en JavaScript. Tal vez el método más tradicional sea utilizar el constructor "new", así:

Sin embargo, este método recibe el sello de "mala práctica" sin serlo realmente. En su lugar, te recomiendo que utilices el método literal del objeto, mucho más robusto.

Mejor

Observa que si simplemente quieres crear un objeto vacío, {} será suficiente.

"Los objetos literales nos permiten escribir un código que admita muchas funciones y que, sin embargo, sea relativamente sencillo para los implementadores de nuestro código. No es necesario invocar directamente a los constructores ni mantener el orden correcto de los argumentos pasados a las funciones, etc." - dyn-web.com


14. Utiliza [] en lugar de New Array()

Lo mismo ocurre con la creación de un nuevo array.

Bueno

Mejor

"Un error común en los programas de JavaScript es utilizar un objeto cuando se requiere un array o un array cuando se requiere un objeto. La regla es simple: cuando los nombres de las propiedades son pequeños enteros secuenciales, se debe utilizar un array. Si no, usa un objeto". - Douglas Crockford


15. ¿Lista larga de variables? Omite la palabra clave "Var" y utiliza comas en su lugar

Mejor

...debería ser bastante autoexplicativo. Dudo que haya una mejora real en la velocidad, pero limpia un poco el código.


17. Utiliza siempre, siempre, el punto y coma

Técnicamente, la mayoría de los navegadores te permitirán omitir los puntos y comas.

Dicho esto, se trata de una práctica muy mala que puede dar lugar a problemas mucho mayores y más difíciles de encontrar.

Mejor


18. Declaraciones "For in"

Al recorrer los elementos de un objeto, es posible que también recuperes funciones de métodos. Para evitar esto, envuelve siempre tu código en una sentencia if que filtre la información

Según la referencia de JavaScript: The Good Parts, de Douglas Crockford.


19. Utiliza la función "Timer" de Firebug para optimizar tu código

¿Necesitas una forma rápida y sencilla de determinar la duración de una operación? Utiliza la función de "temporizador" de Firebug para registrar los resultados.


20. Leer, leer, leer...

Aunque soy un gran fan de los blogs de desarrollo web (¡como éste!), realmente no hay nada que sustituya a un libro a la hora de comer, o justo antes de irse a la cama. Ten siempre un libro de desarrollo web en tu mesita de noche. Aquí están algunos de mis favoritos de JavaScript.

Léelos... varias veces. ¡Todavía lo hago!


21. Funciones autoejecutables

En lugar de llamar a una función, es bastante sencillo hacer que una función se ejecute automáticamente cuando se carga una página o se llama a una función principal. Simplemente envuelve tu función entre paréntesis, y luego añade un conjunto adicional, que esencialmente llama a la función.


22. El JavaScript crudo siempre puede ser más rápido que el uso de una biblioteca

Las bibliotecas de JavaScript, como jQuery y Mootools, pueden ahorrarte una enorme cantidad de tiempo a la hora de codificar, especialmente con las operaciones AJAX. Dicho esto, ten siempre presente que una biblioteca nunca puede ser tan rápida como el JavaScript en bruto (suponiendo que se codifique correctamente).

El método "each" de jQuery es muy bueno para hacer bucles, pero usar una sentencia "for" nativa siempre será un poco más rápido.


23. JSON.Parse de Crockford

Aunque JavaScript 2 debería tener un analizador JSON incorporado, en el momento de escribir esto, todavía tenemos que implementar el nuestro. Douglas Crockford, el creador de JSON, ya ha creado un analizador sintáctico que puedes utilizar. Se puede descargar AQUÍ.

Simplemente importando el script, obtendrás acceso a un nuevo objeto global JSON, que puede ser utilizado para analizar tu archivo .json.


24. Eliminar "Idioma"

Hace años, no era raro encontrar el atributo "language" dentro de las etiquetas script.

Sin embargo, este atributo está obsoleto desde hace tiempo, por lo que hay que dejarlo fuera.


Eso es todo, amigos

Así que ahí lo tienes: veinticuatro consejos esenciales para los principiantes en JavaScript. ¡Hazme saber tus consejos rápidos! Gracias por leer. ¿Qué tema debería tratar la tercera parte de esta serie?

Síguenos en Twitter, o suscríbete a la fuente RSS de NETTUTS para obtener más tuts y artículos diarios sobre desarrollo web.

Y no dejes de consultar los miles de artículos de JavaScript disponibles en Envato Market. Seguro que hay algo que te ayudará en tu desarrollo de JavaScript.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.