en Javascript, jQuery

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:

if ( $('#signup').length ) {
  $('#signup input').change ( function () {
    alert ("Acabas de poner " + $(this).val() );
  });
}

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

  $(document).data('id_country',3)

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

  $(document).data('id_country')

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

Ejemplo:

    

var mySite = {
  general_1 : 100 ,
  general_2 : 200,

  myObject1 : {
    local_1 : 500,
    funcionLocal : function() {
      var local_2 = 600;
      console.log ("estoy en funcionLocal");
      console.log ("local_1=" + mySite.myObject1.local_1);
      console.log ("local_2=" + local_2);
    }
  },

  init : function() {
    console.log ("estoy en init");
    this.funcionalidad1();
    this.myObject1.funcionLocal();
  },

  funcionalidad1 : function() {
    console.log ("estoy en funcionalidad1");
    console.log ("general_1=" + this.general_1);
    console.log ("general_2=" + this.general_2);
  }
}

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

  

  var i=0; // Creates a global variable

  function test() {
    for (i=0; i<10; i++) {
      // do something
    }
  }

  test();
  alert(i); // The global variable i is now 10!

Buenas declaraciones de variables para el for

  var i=0; // Creates a global variable

  function test() {
    var i=0;
    for (i=0; i<10; i++) {
      // do something
    }
  }

  function test2() {
    for (var i=0; i<10; i++) {
      // do something else
    }
  }

  test();
  test2();

  alert(i); // The global variable i is still 0!

4.- Usa `for` en vez de `$.each`

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

Ejemplos:

  var array = new Array ();  
  for (var i=0; i<10000; i++) {  
    array[i] = 0;  
  }  

  // Mas lento
  $.each (array, function (i) {  
    array[i] = i;  
  });  

  // Mas rapido
  var l = array.length;  
  for (var i=0; i<l; i++) {  
    array[i] = i;  
  }

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

join devuelve texto y concat devuelve un array.

Ejemplos:

var array = [];  
for (var i=1; i< =1000; i++) {  
  array[i] = i;  
}  

 // JOIN devuelve texto
var array_join = array.join('');  
typeof array_join === "string" // true

// CONCAT devuelve array
var array_concat = array.concat('');  
array_concat instanceof Array // true

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:

$('#item').click (function () {
  // stuff here
});

Mejor esto:

  $('#item').click (function () {
    // stuff here
    return false;
  });

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:

<script type="text/javascript">
   // code JS here
</script>

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:

// Más lento
var traffic_button = $('#content .button');

Mejor esto:

  // Más rápido
  var traffic_button = $('#traffic_button');

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

  var traffic_lights = $('#traffic_light input');

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:

  var active_light = $('#traffic_light input.on');

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:

$('#traffic_light input.on').bind('click', function(){...});
$('#traffic_light input.on').css('border', '3px dashed yellow');
$('#traffic_light input.on').css('background-color', 'orange');
$('#traffic_light input.on').fadeIn('slow');

Seleccion Eficiente de elementos:

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');

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:

// Define an object in the global scope (i.e. the window object)

window.$my = {
  // Initialize all the queries you want to use more than once
  head : $('head'),
  traffic_light : $('#traffic_light'),
  traffic_button : $('#traffic_button')
};

function do_something() {

  // Now you can reference the stored results and manipulate them
  var script = document.createElement('script');

  $my.head.append(script);
  // When working inside functions, continue to save jQuery results

  // to your global container.
  $my.cool_results = $('#some_ul li');
  $my.other_results = $('#some_table td');

  // Use the global functions as you would a normal jQuery result
  $my.other_results.css('border-color', 'red');
  $my.traffic_light.css('border-color', 'green');

}

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:

var $active_light = $('#traffic_light input.on');

$active_light.bind('click', function(){...})
  .css('border', '3px dashed yellow')
  .css('background-color', 'orange')
  .fadeIn('slow');

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:

var $traffic_light = $('#traffic_light'),
$active_light = traffic_light.find('input.on'),
$inactive_lights = $traffic_light.find('input.off');

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 :

var top_100_list = [...], // assume this has 100 unique strings
    $mylist = $('#mylist'); // jQuery selects our 'ul' element 

for (var i=0, l=top_100_list.length; i

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

var top_100_list = [...], // assume this has 100 unique strings
  $mylist = $('#mylist'), // jQuery selects our 'ul' element
  top_100_li = ""; // This will store our list items 

  for (var i=0, l=top_100_list.length; i

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

Post Anterior
Post Siguiente

Política de Comentarios de pixelovers

Responsable » Juan Manuel Garrido
Finalidad » Moderación de los comentarios
Legitimación » Tu consentimiento expreso que te será requerido por Disqus.
Destinatarios » Los datos de tus comentarios los guardará Disqus, mi sistema de comentarios, que está acogido al acuerdo de seguridad EU-US Privacy Shield tal y como recoge su politica de privacidad
Derechos » Desde Disqus, por tanto, podrás acceder, rectificar, limitar y suprimir tus comentarios o tu cuenta
Tienes más detalles acerca del tratamiento de los datos relacionados con los comentarios en nuestra (Política de Privacidad)

  1. 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 😛

  2. @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. 🙂