en Javascript

Javascript y jQuery: Consejos y Buenas Practicas (Parte II)

308801-209198_tHace unas semanas iniciamos una serie de 2 posts para hablar de lo que consideramos que son unas buenas practicas para desarrollar codigo Javascript con la libreria jQuery.

Con este post cerramos la serie y profundizamos un poco más en eltema

En el  primer post de esta serie comentamos algunas generalidades que nos pueden servir de base a la hora de desarrollar un código JS eficiente. En este segundo post hablaremos de como solucionar de forma eficiente problemas concretos que nos solemos encontrar en nuestros desarrollos.

Asi que, ahi vamos…

1.- Checkear la disponibilidad de un objeto antes de acceder a él.

Muchos de los errores en Javascript se deben a que se intenta acceder a elementos o métodos que no existen en un determinado momento del periodo de ejecución.

Para solucionar esto basta con realizar un pequeña comprobación antes de utilizar dicho elemento o método.

Ejemplo:

2.- Evita el uso de variables globales.

A fin de evitar el uso de variables globales, podemos utilizar data, un método de jQuery que nos permite mantener relaciones entre valores y elementos DOM.Por ejemplo podemos guardar un dato en el objeto document de esta forma

Y acceder al dato de esta leer el dato de esta otra

Aunque lo suyo realmente es aprovechar la terminologia de objetos y ubicar las variables en su contexto

Ejemplo:

3.- Definir siempre las variables con var.

Incluso dentro de los for, de esta forma nos aseguramos que la variable tendrá el ambito que le corresponda. Si no se pone var se toma la variable como global.

Mala declaracion de variables para el for

Buenas declaraciones de variables para el for

4.- Usa for en vez de $.each

Por lo general las funciones nativas de Javascript son mas rapidas que las derivadas de librerias

Ejemplos:

5.- Para concatenaciones largas de cadenas, mejor join que concat

join devuelve texto y concat devuelve un array.

Ejemplos:

6.- return false para evitar “saltos”.

Si no devuelves false en la funcion la pagina salta al top, por eso a la hora de capturar eventos conviene devolver false al final para que haga lo que nosotros definimos y nada mas

En vez de esto:

Mejor esto:

7.- Usar correctamente el tag script.

El atributo language está deprecado en el tag script

La forma correcta de crear un bloque de código javascript es:

8.- La selección mas rápida es por ID.

Siempre el selector más rápido y que menos iteraciones produce es la búsqueda por un #id, ya que simplemente lanza un document.getElementById(), lo que al ser nativo nos asegura un tiempo de respuesta mínimo y un mínimo consumo de proceso.

Por ejemplo, con este codigo:

Traffic Light

  • Red
  • Yellow
  • Green

En vez de esto:

Mejor esto:

Para acceder a varios elementos, siempre que podamos debemos hacerlo partiendo de un #id, de esta forma nos aseguramos una iteración más ajustada.:

9.- Usar tags delante de las clases.

Al hacer selección de clases con jQuery, es recomendable indicar el tag del elemento solicitado ya que al hacer iternamente uso de document.getElementsByTagName() para localizarlos acotamos previamente los elementos en los que buscar las clases solicitadas.

Por ejemplo, para el HTML del punto anterior, si queremos seleccionar el elemento radio con, la opción más rápida sería la siguiente:

10.- Usar la caché de objetos.

Coger el hábito de guardar una variable con el valor de un objeto jQuery nos evita realizar una serie de comprobaciones innecesarias y que en scripts pesados pueden suponer un aumento de rendimiento importante.

Seleccion poco eficiente de elementos:

Seleccion Eficiente de elementos:

11.- Crear Objeto Global con resultados jQuery.

Si necesitamos utilizar una selección jQuery en diferentes funciones, se puede cachear en un objeto con ámbito global.

Ejemplo:

12.- Aprovechar el encadenamiento.

El encadenamiento pese a producir un amasijo de código que no contribuye a mejorar la lectura del código hace que nuestro Javascript sea más ligero y puede ayudar a mejorar el rendimiento de nuestros scripts.

Ejemplo:

13.- Usar subqueries siempre que se pueda.

Si debemos realizar varias búsquedas sobre un elemento es altamente recomendable realizar un uso intensivo del método find() de jQuery para realizar las búsquedas. Mejoraremos el tiempo de respuesta al evitarnos búsquedas previas ya realizadas.

Ejemplo:

14.- Limitar la manipulación directa del DOM.

La idea general es crear exactamente lo que necesitas en memoria y luego actualizar el DOM

Si necesitas crear una lista de elementos, en vez de :

Creamos la lista de elementos en un string antes de insertarlo en el DOM

15.- Usar JSON.

Para guardar estructuras de datos o enviar/recibir estructuras de datos via AJAX mejor JSON que XML

Y hasta aqui la segunda parte y el final de la serie de consejos y buenas practicas para desarrollo con Javascript y jQuery.

¿Que te han parecido los puntos aqui comentados? ¿Algun punto que creas que falta en esta lista?.

Enlaces y más

Posts Relacionados

Los 5 mejores libros para aprender Javascript Durante los últimos meses, Microsoft nos ha tenido en vilo ( sobretodo a los desarrolladores web ), pendientes del soporte a la especificación de CS...
Javascript y jQuery: Consejos y Buenas Practicas (... En esta ocasión veremos como evitar un problema con el que seguro os habréis topado en más de una ocasión: El navegador no detecta un cambio que h...
Cómo empezar a automatizar tus tareas Grunt Coda es un editor de texto orientado al desarrollo web que integra, además, un completo gestor de sites, funciones de un cliente FTP, un cliente SS...
  • http://www.devtics.com.mx pakos

    Buenos consejos, y creo que el mejor consejo sera darse tiempo de conocer tanto a JS como a JQuery, ya que he visto un efermiso uso de jQuery ya que como el uso de each y muchas otras funciones que tiene jQuery para facilitar o simplemente para lograr y seguier el encadenamiento se usa.. en algun blog un usuario decia que no podia modificar la clase CSS por javaScript por que el daba Element.class=”miCSS” y no funcionaba, al final del post ofrese la alternativa $(Element).css();,  le comento pues solo es cuestion de poner Element.className=”miCSS” explicandole que con .class no funciona ya que esta es una palabra recervada y ninguna propiedad se puede llamar asi, y en los 8 años que llevo conociendo JS nunca me ha fallado className en ningun explorador, y el chavo me contesta… amm pero mejor lo hago con $().css() no valla ser que en IE o FF no me funcione ¬¬…. es obio que esto llevara mas trabajo a nivel de proceso para hacer lo mismo, con pocas letras de diferencia.. obio className te funcionara en cualquier lado, pero al desconocer JS y sus diferencias entre exploradores se cree ciegamente que la oferta JQuery y es lo mejor y mas eficdiente de todo. siempre es dificil cuando uno aprede cuando ya uno esta en el ambito profesional pero no esta de mas tomarse un buen libro tanto de JS como jQuery para conocer las dos herramientas de verdad y no solo seguir una “tendencia”…

    en cuanto a:

    Usar JSON. Para guardar estructuras de datos o enviar/recibir estructuras de datos via AJAX mejor JSON que XML

    depende mucho para que se usara y cuales seran nuestros alcances de nuestra aplicacion o servicio web, pieso que la mejor forma es codificar una libreria que solo con pasar parametros imprima ya sea un json o un xml con los datos que ser requiera si nos efocamos solo a JSON se esta oviando que nuestra aplicacion solo sera utilizada en un explorador que tal vez sea el caso, pero tal vez no tal ves sera consumida por otras tecnologias entoces alli el factor es XML ahora si que depende el proposito de servicio auque si estamos seguro que solo sera consumido en un explorador por JS la opcion mas viable y para mi eficiente es un JSON…. ha.. y al traer JSON del servidor no se le puede llamar AJAX.. ya que no usas XML… hay mil terminos pero creo que lo mas acertado es simplemente llamar peticiones XHR (XMLHttpRequest) asì ya el terminino de las tecnologias que recivamos no es afectada por nuestro termino.. AJAX Ajax, acrónimo de Asynchronous JavaScript And XML si no hay XML no hay AJAX.. a AJA y algo mas 😛

  • http://www.devtics.com.mx pakos

    ups, perdon en el comentario de la manipulacion de clases CSS era $(Element).addClass();el que se comentaba, $(Element).css() es para manipular Element.sytle ¬¬U

  • juanmaguitar

    @Pakos, gracias por tus aportes y comentarios.

    Totalmente de acuerdo en que hay que dedicarse a tiempo a conocer tanto Javascript nativo como jQuery. De esta forma podremos valorar mejor cual es la solución más eficiente en cada caso.

    Tambien hay que tener en cuenta que jQuery nos facilita la creación de código y nos ayuda a que este sea mas compresible, asi que en algunos casos puede quedar justificada una solución menos eficiente con jQuery, en beneficio de un código más comprensible.

    Respecto a lo que comentas de JSON y XML, siempre que podamos elegir, el formato JSON es más compacto y eficiente para enviar/recibir estructuras de datos via AJAX.

    Por ultimo, comentar que aunque no sea del todo correcto hablar de peticiones AJAX cuando estamos hablando de JSON (ya que AJAX por definicion se refiere a transmision de XML), creo que está popularmente aceptado el termino AJAX para referirse a peticiones HTTP asincronas. Asi lo interpretan por ejemplo en jQuery al llamar ajax() el metodo que gestiona las peticiones asincronas. :-)

  • http://www.veralquiler.com.ar gesell

    Excelente articulo, para tener en cuenta..

    Gracias, Victor

  • Diego Llinás

    Genial!! Gracias!