10 Consejos para programar en Jquery

Introducción

Cuando escribimos nuestras aplicaciones que utilizan Javascript, el uso de la librería JQuery se hace casi imprescindible para facilitarnos la vida y ocultar algunas peculiaridades de algunos navegadores, si sobre todo del que todos estamos pensando.

Después de un tiempo utilizando JQuery, y leyendo sobre el tema, he recopilado algunas buenas prácticas que a continuación detallo, para tenerlas siempre a mano, y por si te sirven de algo. La mayoría de las sugerencias tienen que ver con la mejora del tiempo de ejecución.

1. Usar la librería JQuery no quiere decir que todo lo tengamos que hacer con esta, hay casos que utilizar el equivalente de javascript plano, puede ser util. Por ejemplo cuando vamos queremos obtener el id que podemos realizar de la siguiente forma:

   
     $(".month").click( function(){
       var _id = this.id;
     }); 
   

2. El proceso de selección de elementos DOM es costoso, por lo que si tenemos que realizar varias operaciones sobre una misma selección, es mejor almacenar el resultado para no repetir de nuevo la busqueda de los elementos.

   
     var items = $(".item");
     items.html("bla bla bla");
     items.show();
   

   También podemos utilizar el encadenamiento de instrucciones que nos facilita la realización de varias funciones, eso si hay que ser ordenado en su uso como veremos en el siguiente punto.

   
     $("#item").html("bla bla bla").show();
   

3. Cuando utilizamos el encadenamiento de instrucciones, sobre todo con las mas complejas, que utilizan instrucciones como child. Vemos un ejemplo:

   
   $('#menu').addClass('menusel').children(':header').addClass('contentTitle').click(function() {
   $(this).siblings('.contentBody').toggle();}).end().children(':not(.contentTitle)')
   .addClass('contentBody').end().append('
   
   
   ')
   .children('.contentFooter').text('new content');
   

   Como podemos apreciar puede ser muy dificil ver lo que hace, así que hay que formatearlo bien para poder entenderlo bien.

   
   $('#menu')
     .addClass('menusel')
     .children(':header')
       .addClass('contentTitle')
       .click(function() {
            $(this).siblings('.contentBody').toggle();
       })
     .end()
     .children(':not(.contentTitle)')
       .addClass('contentBody')
     .end()
     .append('<div class="newFooter"></div>')
     .children('.contentFooter')
       .text('new content');
   

   Como vemos se puede comprender mucho mejorel código así.
4. Debemos intentar minimizar en todo lo posible la manipulación del DOM, que como ya se ha comentado es una instrucción costosa. Así, si estamos añadiendo elementos a una lista es mejor almacernarlo en una variable y después añadirlos todos a la vez, que ir añadiendo elemento a elemento.

   
     var $list = ("#list-items");
     var items = "";
     for (var i=0; i<100; i++){
       items +="<li> Artículo "+ i +" </li>";
     }
    
     $list.html(items);
   

5. En las selecciones, siempre que se pueda, debemos utilizar la selección por el id del elemento, que es la forma mas rápida de busqueda. Para selecciones mas complejas, siempre que se pueda, lo debemos combinar con find.

   
    $('#container').find('div.articlebody');
   

6. Cuando la selección contiene dos partes, hay que intentar ser especifico en la parte derecha y menos en la parte izquierda. Esto se entenderá mejor con un ejemplo:

   
   // no optimizado
   $('div.users .username');
   
   // optimizado
   $('.users td.username');
   

7. Cuando realizamos una selección, si puede que esta no devuelva resultados, debemos comprobar si hay elementos antes de realizar las operaciones que queremos realizar, ya que aunque no haya elemento las acciones se ejecutaran de todas formas, para no tener ningún resultado.

   
   var $items = $('#article-body');
   if ($items.length) { $itmes.slideDown(); }
   

8. Protege tu código contra conflictos de nombres, sobre todo si lo van a utilizar terceras personas. Esto es necesario por si utilizan otras librerias que usen el simbolo $, como JQuery, por lo que habría problemas. La solución es sencilla:

   
   (function($) {
     //$ siempre se referirá a jQuery
   })(jQuery);
   
   

9. JQuery permite el uso de contextos en las instrucciones. Esta opción puede ser muy útil para procesar documentos XML, por ejemplo respuestas de peticiones AJAX.

   
    $.get("paises.xml",{},function(xml){
      $('pais',xml).each(function(i){
           nombre = $(this).find("name").text();
        });
     });
   

10. Cuando se va modificar una propiedad de CSS, y esta que afectan a muchos elementos, es más rápido añadir una nueva etiqueta style:

    
      $('a.clase').css('color', '#FFAADD');
      $('')
        .appendTo('head');