logo

Método de datos de jQuery:cómo y por qué usarlo

El método de datos de jQuery nos brinda la capacidad de asociar datos arbitrarios con nodos DOM y objetos JavaScript. Esto hace que nuestro código sea más conciso y limpio. A partir de jQuery 1.4.3, también tenemos la capacidad de usar el método en objetos JavaScript regulares y escuchar los cambios, lo que abre las puertas a algunas aplicaciones bastante interesantes.

Lo básico

Puede llamar al método de datos en un objeto jQuery, o puede usar la función $.data() en su lugar.

// Using the data method:
$("#myDiv").data("key","arbitrary value");

// Using the data function:
$.data($("#myDiv").get(0),"key","arbitrary value");

La función de datos es una implementación de bajo nivel y, en realidad, la llamada al método la está utilizando en segundo plano. La llamada al método también es más conveniente, ya que le permite incluirlo como parte de una cadena.

Además, tenga en cuenta que debe pasar un elemento DOM como el primer parámetro de $.data, y no como un objeto jQuery. Es por eso que en este artículo, nos concentraremos en usar la llamada al método en su lugar.

Cuando utiliza el método de datos, debe pasar dos parámetros:una clave y un valor para almacenar. La clave debe ser una cadena y el valor puede ser cualquier estructura de datos, incluidas funciones, matrices y objetos. Hay una sintaxis alternativa, en la que pasa un objeto como un único parámetro:

// Passing an object:
$("#myDiv").data({"name":"Stevie","age":21});

// This is the same as:
$("#myDiv").data("name","Stevie").data("age",21);

Ahora que ha insertado sus datos, puede leerlos llamando al método de datos con un solo parámetro:la clave:

var theValue = $("#myDiv").data("age"); // 21

Puede acceder a los datos en cualquier parte de su secuencia de comandos. No importa cuál sea el selector, siempre que sea el mismo elemento, obtendrá el mismo valor que haya ingresado:

// Given that myDiv is the first div in the page:

var theValue = $("div:first").data("name"); // Stevie

$("div:first").click(function(){
    alert($(this).data("age"); // 21
});

A partir de jQuery 1.4.3, los atributos de datos de HTML5 también están disponibles a través del método de datos. Esto significa que si tienes un elemento como este:

<img id="img1" data-internal-id="221" width="100" height="100" />

Puede acceder al atributo data-internal-id simplemente llamando a $("#img1").data('internal-id') , que es realmente útil en aplicaciones AJAX. También usamos esta técnica en el tutorial de la semana pasada:Hacer mejores elementos seleccionados con jQuery y CSS3.

Uso del método de datos en objetos de JavaScript

Puede que le resulte sorprendente que pueda utilizar el método de datos en objetos JavaScript normales. Esta funcionalidad existe desde hace algún tiempo, pero con jQuery 1.4.3 abre las puertas a algunas aplicaciones útiles.

var myObj = {};
$(myObj).data("city","Springfield");

Lo que hace el fragmento anterior es en realidad crear una propiedad de ciudad en el objeto. Pero, ¿por qué no simplemente establecer myObj.city = "Springfield"? ¿tú mismo? Debido a que el método de datos desencadena una serie de eventos útiles que puede escuchar:

var progressBar = {};

$(progressBar).bind('setData',function(e,key,value){
    switch(key){
        case "percent":
            $("#progress").width(value+"%");
            $("#percentText").text(value+"%");
            break;

        case "color":
            $("#progress").css("color",value);
            break;

        case "enabled":
            $('#progress').toggleClass("active",value);
            break;
    }
});

$(progressBar).data("enabled",true).data("percent",21).data("color","green");

// You also have easy access to the current values:
console.log(progressBar.enabled);    // true

En el fragmento anterior, usamos el método de datos para crear una API simple con la que podemos actualizar una barra de progreso en la pantalla. La mejor parte es que en cualquier momento puede echar un vistazo al objeto ProgressBar y obtener los valores actuales.

Hay otros dos eventos que se activan cuando se usa el método de datos en un objeto plano:

  • obtener datos - se activa antes de que se lean los datos del objeto. Puede usar la declaración de devolución dentro de la función de manejo de eventos para anular el valor. Se puede utilizar para ejecutar cálculos entre bastidores;
  • cambiar datos - se activa cada vez que se configuran o cambian los datos. Se utiliza en el complemento de enlace de datos jQuery y le permite vincular un formulario a un objeto de JavaScript y acceder a los campos del formulario como propiedades de ese objeto. De esta manera, no tiene que ocuparse de leer y establecer valores, lo cual es una carga, especialmente en formas más largas. Puede verlo en acción en la página de demostración.

Detrás de escena

Internamente, jQuery crea un objeto vacío (llamado $.cache para los curiosos), que se utiliza para almacenar los valores que establece a través del método de datos. A cada elemento DOM al que agrega datos se le asigna una ID única que se usa como clave en el objeto $.cache.

jQuery no almacena solo datos creados por el usuario en ese caché. También almacena información interna y las funciones de manejo de eventos que adjuntas con live() , enlazar() y delegado() . Tener un almacenamiento de datos centralizado hace que la base de código de jQuery sea mucho más robusta y libre de errores, algo de lo que todos podemos beneficiarnos.

Para terminar

El método de datos es solo una de las numerosas utilidades de jQuery, que facilitan la vida del desarrollador web. Combinado con el resto de las habilidades de la biblioteca, se suma a una base sólida sobre la que podemos construir.