Cacheando objetos en jQuery

Artículo que me pareció interesante para compartir que publicó Carlos Benitez en su blog.

Cuando utilizamos jQuery para la selección y manipulación de elementos del DOM, una práctica que a menudo olvidan los programadores es cachear los objetos.

Tomemos el siguiente código de ejemplo:

$('#myObjId').click(function() {
  if ( $('#myObjId').hasClass('clicked') ) {
    $('#myObjId').removeClass('clicked');
    $('#myObjId').css('background-color', 'red');
  } else {
    $('#myObjId').addClass('clicked');
    $('#myObjId').css('background-color', 'blue');
  }
);
$('#myObjId').val('Click Me!');

Con este fragmento comprobamos cómo cada vez que se realiza una acción, el selector interno de jQuery (Sizzle), debe recorrer el DOM completamente hasta encontrar el elemento sobre el que estamos operando, lo cual, dependiendo de la complejidad del sitio o de las acciones, puede suponer una reducción importante en el rendimiento.

Método clásico

Una forma de evitar ese coste es simplemente cacheando el objeto y luego operar directamente sobre su referencia, evitando así que jQuery tenga que buscarlo cada vez que lo necesitemos:

var $myObj = $('#myObjId');
$myObj.click( function(){
  if ( $myObj.hasClass('clicked') ){
    $myObj.removeClass('clicked');
    $myObj.css('background-color', 'red');
  } else {
    $myObj.addClass('clicked');
    $myObj.css('background-color', 'blue');
  }
});
$myObjId.val('Click Me!');

Al asignar una variable al selector, ésta referencia directamente al objeto jQuery, por lo que podemos operar sobre él con los métodos de la librería. Para recordar que se trata de un objeto jQuery, una buena práctica es añadir la ‘$’ delante del nombre de la variable.

Método mejorado

Todavía podemos mejorar el código anterior mediante el encadenado (chaining) de acciones sobre un mismo objeto:

var $myObj = $('#myObjId');
$myObj.click(function(){
  if ( $myObj.hasClass('clicked') ){
     $myObj.removeClass('clicked').css('background-color', 'red');
  } else {
    $myObj.addClass('clicked').css('background-color', 'blue');
  }
});
$myObjId.val('Click Me!');

De este modo, si tenemos que actuar sobre un mismo objeto con varias acciones consecutivas, no tendremos que recorrer el DOM una y otra vez ganando rendimiento.

Cacheando el objeto en funciones anónimas

Cuando aplicamos un callback a un evento, podemos cachear el objeto que lo recibe mendiante el comando this:

var $myObj = $('#myObjId');
$myObj.click( function(){
  var $this = $(this);
  if ( $this.hasClass('clicked') ){
    $this.removeClass('clicked').css('background-color', 'red');
  } else {
    $this.addClass('clicked').css('background-color', 'blue');
  }
} );
$myObjId.val('Click Me!');

De esta forma, no es necesario volver a buscar el objeto en el DOM con lo que de nuevo ahorramos recursos. De nuevo, para recordar que se trata de un objeto jQuery, es interesante utilizar un prefijo como ‘$‘.

Método Experto

Finalmente, es importante conocer el comportamiento interno de jQuery para optimizar al máximo nuestros selectores: cuando aplicamos una acción sobre un selector, jQuery nos devuelve de forma interna el propio objeto. Esto permite refactorizar el código anterior y mejorarlo:

var $myObj = $('#myObjId').click(function(){
  var $this = $(this);
  if ( $this.hasClass('clicked') ){
    $this.removeClass('clicked').css('background-color', 'red');
  } else {
    $this.addClass('clicked').css('background-color', 'blue');
  }
}).val('Click Me!');

En este caso, hemos realizado las operaciones sobre la misma declaración de la variable, seguros de que el objeto devuelto es siempre la referencia original. De este modo, aún conservamos la referencia al objeto jQuery para usarlo más adelante en nuestro código.

Jonatan Esteche

Buscar este blog