В чем преимущество использования «data-attribute» перед $ .data в jQuery? - PullRequest
Новая
       3

В чем преимущество использования «data-attribute» перед $ .data в jQuery?

1 голос
/ 01 сентября 2011

Мне было интересно, в чем преимущество использования данных для DOM по сравнению с NOT для DOM

, т. Е. Предположим, что мы сказали, что HTML 

<a id="foo" href="#">foo!</a>

//Set attr data-me so it's <a id="foo" data-me="yay" href="#">foo!</a>
$('#foo').attr('data-me', 'yay');

//Retrieve the data 'yay'
$('#foo').data('data-me');

сверх прямого назначения:

var myInput = $('#foo');    

//Add some data
$.data(myInput, 'data-me', 'yay');

//Retrieve the data 'yay'
$.data(myInput, 'data-me');

Насколько я понимаю, более поздняя версия MUCH быстрее, и поэтому я не вижу смысла добавлять data-someAttr по всему DOM, когда это не требуется?

Ответы [ 2 ]

2 голосов
/ 01 сентября 2011

Они служат разным целям. Да, кажется, что они могут быть использованы для достижения того же, но под капотом есть различия.

  1. Хотя вы можете сохранять простые значения в атрибутах, вы не можете сохранять узлы DOM, поскольку создаст утечек памяти . Вы также не можете сохранять объекты, массивы, функции и т. Д. *

  2. $.attr() может быть быстрее, чем $('selector').data(), но это не быстрее, чем метод низкого уровня jQuery.data(). Первый метод данных имеет гораздо больше накладных расходов, чем второй, однако второй не несет в себе всех функциональных возможностей первого. Например, не получает данные из атрибутов data- .

Таким образом, я думаю, что лучше использовать data- атрибуты во время загрузки, чтобы вы могли извлечь данные с помощью $('selector').attr() и обработать состояние приложения с помощью $.data().

0 голосов
/ 01 сентября 2011

Я не гуру, это точно ... но мне кажется, что два очевидных различия - это время / среда, когда заданы «данные», и структура (тип) данных, которые будут быть сохраненным / доступным.

Примите во внимание этот сценарий: 

<a id="foo" data-me="some string data" href="#">foo!</a

Этот кусок HTML может быть сгенерирован на стороне сервера. Если это так, только источник на стороне сервера должен знать о происхождении значения data-me. Одним из ограничений является то, что атрибут должен быть строкой или строковым представлением объекта (JSON) 

var customData = 
{
    date:new Date(),
    otherProp:'some value',
    someFunc: function(a,b)
    {
        // function dody
    }
};
$('#foo').attr('data-me', customData)

Из javascript (среднего), в определенный момент, вызванного определенным событием (временем), вы можете использовать jQuery для привязки элемента dom к данному объекту (необязательно строке)

Таким образом, последний способ ($ ('# foo'). Attr ('data-me', customData)) снимает ограничение 'only string' и позволяет связывать с элементом dom любой тип объекта js, четные функции.

...