Ir al contenido principal

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

Comentarios

Publicar un comentario

Entradas populares de este blog

Recursividad

1.1.  Introducción . El concepto de recursividad va ligado al de repetición. Son recursivos aquellos algoritmos que, estando encapsulados dentro de una función, son llamados desde ella misma una y otra vez, en contraposición a los algoritmos iterativos, que hacen uso de bucles while, do-while, for, etc. 1.2.  Definición . Algo es recursivo si se define en términos de sí mismo (cuando para definirse hace mención a sí mismo). Para que una definición recursiva sea válida, la referencia a sí misma debe ser relativamente más sencilla que el caso considerado. 1.3. Elementos de la Recursión  1.3. 1.  Axioma  Es un caso donde el problema puede resolverse sin tener que hacer uso de una nueva llamada a sí mismo. Evita la continuación indefinida de las partes recursivas. 1.3.2.  Formula recursiva Relaciona el resultado del algoritmo con resultados de casos más simples. Se hacen nuevas llamadas a la función, pero están más próximas al caso base. Por eje...
Publicar un comentario
Leer más

Introducción a LINQPad 4

El gran atractivo de LINQ es que fue creado con el objetivo de simplificar las consultas a la información en la memoria en colecciones como listas y matrices , así como la información almacenada en bases de datos, documentos XML , archivos y otras fuentes de datos. Se lleva a cabo un mapeo relacional de objetos para que el acceso a los datos se realice a través del framework LINQ y SQL ( en el caso de LINQ to SQL ) se generan implícitamente. Con LINQ no se necesita saber SQL , XML , XPath , ADO. NET para acceder / actualizar datos porque después de hacer referencia a las clases de LINQ y hacer uso del mapeado del Framework LINQ para realizar tareas comunes conocidas como CRUD ( Create, actualizar, eliminar ). Como usted ya sabe énfasis programación funcional en la evaluación de expresiones en lugar de la ejecución de comandos.  En los lenguajes funcionales expresiones se forman mediante la combinación de funciones para ciertos valores. ¿Quieres un ejemplo de un lenguaje ...
Publicar un comentario
Leer más

Procedimientos Almacenados (store procedures – sp)

Este post lo hago para ayuda de memoria y también para los que necesiten una mano sobre Transact-SQL. Puede crear procedimientos almacenados mediante la instrucción CREATE PROCEDURE de Transact-SQL. Cuando cree un procedimiento almacenado, deberá especificar lo siguiente: Todos los parámetros de entrada y de salida del lote o del procedimiento que realiza la llamada.  Las instrucciones de programación que realicen operaciones en la base de datos, incluidas las llamadas a otros procedimientos.  No es recomendable utilizar el prefijo sp_ para crear procedimientos almacenados. SQL Server siempre busca procedimientos almacenados que empiezan con sp_ siguiendo este orden: El procedimiento almacenado en la base de datos master .  El procedimiento almacenado basándose en cualquiera de los calificadores especificados (nombre o propietario de la base de datos.  El procedimiento almacenado mediante el propietario dbo , si no se especifica otro.  ...
Publicar un comentario
Leer más