10

Ao modificar um determinado valor inicial do data do jQuery, notei que o valor do dataset não é modificado.

Daí elaborei o seguinte teste:

HTML:

<div data-value="initial value" id="div-test-1"></div>
<div data-value="initial value" id="div-test-2"></div>

jQuery:

Primeiro teste:

$(function(){

    var $div1 = $('#div-test-1')

    console.log($div1.data('value')); // intial value

    $div1.data('value', 'new value'); 

    console.log($div1.data('value')) // new value


    console.log($div1.prop('dataset').value); // initial value

 });

Segundo teste:

$(function(){

        var $div2 = $('#div-test-2');

        console.log($div2.data('value')) ;// intial value

        $div2.attr('data-value', 'new value');

        console.log($div2.data('value')); // initial value

        console.log($div2.prop('dataset').value); // new value


    });

Ou seja, para definições feita com data(), os valores foram alterados para o jQuery, mas não para o attributo dataset; e, quando alterados no dataset, não são retornadas pelo data() como esperado.

Existe também outra diferença: Podemos definir valores do tipo Number, Array e Object através do data do jQuery. Já o dataset NÃO faz isso.

Veja:

Exemplo com dataset:

$('body').get(0).dataset.element = {nome: "wallace"};

console.log($('body').get(0).dataset.element) // [object Object]

Exemplo com data do jQuery:

 $('body').data('element', {nome: 'wallace'});
 console.log($('body').data('element')); // {nome: 'wallace'}
  • Baseando-se nesse exemplo, podemos afirmar que o jQuery NÃO usa o dataset do HTML5?
  • E, se "sim" para a primeira pergunta, existe alguma razão específica dele fazer isso?
  • É seguro usar o dataset em projetos em que eu não vou usar o jQuery?
  • Porque eles se comportam diferentes no que diz respeito aos tipos retornados?

1 Resposta 1

12

Baseando-se nesse exemplo, podemos afirmar que o jQuery NÃO usa o dataset do HTML5?

É, o jQuery não usa o dataset. Isso pode ser comprovado olhando o código-fonte da biblioteca.

existe alguma razão específica dele fazer isso?

Até onde eu sei, o motivo é histórico. Quando o jQuery implementou seu método data, o dataset ainda nem existia, ou pelo menos não era suficientemente implementado pelos browsers para valer a pena usá-lo. Ele faz exatamente o que é dito na documentação:

Armazena dados arbitrários associados aos elementos selecionados, ou retorna o valor para a chave passada no primeiro elemento entre os selecionados.

A verificação dos atributos data- do HTML5 é na verdade um fallback. Se um valor for definido com .data(), recuperá-lo com esse mesmo método nem olha para o atributo (nem para a propriedade dataset do elemento em questão).

Portanto, o objetivo do .data() não é o mesmo dos atributos data- – que, como você notou, só aceitam strings como valor. Só que o nome é o mesmo, e ainda por cima existe o fallback que já mencionei, e isso torna a situação bastante confusa.

Se o jQuery resolvesse mudar isso nesta altura do campeonato, e fazer seu .data() funcionar como o dataset, certamente causaria sérios problemas para quem atualizasse a biblioteca.

É seguro usar o dataset em projetos em que eu não vou usar o jQuery?

Não vejo por que não seria. Aliás, acho seguro usar mesmo se estiver usando jQuery, contanto que saiba o que está fazendo.

Porque eles se comportam diferentes no que diz respeito aos tipos retornados?

Como o dataset é feito para lidar com atributos do HTML, ele é pensado somente para valores do tipo string. Tanto que na especificação do HTML5 a interface que define o dataset chama-se DOMStringMap.

Já o jQuery usa um objeto comum para mapear elementos do DOM aos tais "dados arbitrários", e isso permite, pela própria natureza da linguagem, que se use qualquer tipo disponível nela.

2
  • 1
    Muito bem explicado Commented 11/02/2015 às 18:22
  • 3
    Bacana, eu achava que o .data() era só pra recuperar valores dos data-attributes, mas também nunca tinha pesquisado a respeito. :D
    – KaduAmaral
    Commented 13/07/2015 às 21:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .