Jaka jest różnica w użytkowaniu pomiędzy $.data
i $.attr
podczas korzystania data-someAttribute
?
Rozumiem, że $.data
są przechowywane w jQuery $.cache
, a nie w DOM. Dlatego jeśli chcę używać $.cache
do przechowywania danych, powinienem użyć $.data
. Jeśli chcę dodać atrybuty danych HTML5, powinienem użyć $.attr("data-attribute", "myCoolValue")
.
javascript
jquery
html
custom-data-attribute
John B.
źródło
źródło
attr()
może prowadzić do wycieków pamięci (przynajmniej w IE), podczas gdy używaniedata()
jest bezpieczne. Wskazuje na to w swojej odpowiedzi, choć nie wyjawia tego wprost. Więcej informacji na temat dokumentów jQuery (patrz „Dodatkowe uwagi”): api.jquery.com/attrdata-someAttribute
jest niepoprawny; zgodnie ze specyfikacją dozwolone są tylko małe litery. Napotkasz mnóstwo dziwnych problemów, używając wielkich liter.Odpowiedzi:
Jeśli przekazujesz dane do elementu DOM z serwera, powinieneś ustawić dane na elemencie:
Dostęp do danych można następnie uzyskać
.data()
w jQuery:Jednak podczas przechowywania danych w węźle DOM w jQuery przy użyciu danych zmienne są przechowywane w obiekcie węzła . Ma to na celu uwzględnienie złożonych obiektów i odniesień, ponieważ przechowywanie danych w elemencie węzła jako atrybutu uwzględni tylko wartości ciągu.
Kontynuując mój przykład z góry:Ponadto konwencja nazewnictwa atrybutów danych zawiera trochę ukrytego „gotcha”:
HTML: JS:Dzielony klucz będzie nadal działał:
HTML: JS:Jednak obiekt zwracany przez
.data()
nie będzie miał ustawionego klucza dzielonego:Z tego powodu sugeruję unikanie klucza dzielonego w javascript.
W przypadku HTML używaj dzielonego formularza. Atrybuty HTML mają dostać ASCII małe litery automatycznie , tak
<div data-foobar></div>
,<DIV DATA-FOOBAR></DIV>
i<dIv DaTa-FoObAr></DiV>
są niby być traktowane jako identyczne, ale dla najlepszej zgodności powinny być preferowane dolna forma przypadek.The
HTML: JS:.data()
Metoda będzie również wykonać kilka podstawowych funkcji automatycznego odlewania jeżeli wartość odpowiada uznanym wzór:Ta funkcja automatycznego rzutowania jest bardzo wygodna w przypadku tworzenia widgetów i wtyczek:
Jeśli absolutnie musisz mieć oryginalną wartość jako ciąg, musisz użyć
HTML: JS:.attr()
:To był wymyślony przykład. Do przechowywania wartości kolorów używałem numerycznej notacji szesnastkowej (tj. 0xABC123), ale warto zauważyć, że szesnastka została niepoprawnie przeanalizowana w wersjach jQuery przed 1.7.2 i nie jest już przetwarzana na
Number
jQuery 1.8 rc 1.jQuery 1.8 rc 1 zmieniło zachowanie automatycznego rzucania . Wcześniej każdy format, który był prawidłową reprezentacją pliku,
HTML: JS:Number
byłby rzutowany naNumber
. Teraz wartości liczbowe są rzutowane automatycznie tylko wtedy, gdy ich reprezentacja pozostaje taka sama. Najlepiej ilustruje to przykład.Jeśli planujesz używać alternatywnych składni numerycznych w celu uzyskania dostępu do wartości liczbowych, pamiętaj, aby rzucić wartość na
JS (ciąg dalszy):Number
pierwszą, na przykład za pomocą jednoargumentowego+
operatora.źródło
.data()
będzie miał ustawionej formy dzielonej, więc będzie działać, ale nie będzie. Z tego powodu sugeruję, aby ludzie unikali używania formy dzielonej.$('#bar').data('foo-bar-baz')
$('#bar').data()['foo-bar-baz']
Główna różnica między nimi polega na tym, gdzie jest przechowywany i jak jest dostępny.
$.fn.attr
przechowuje informacje bezpośrednio na elemencie w atrybutach, które są publicznie widoczne podczas kontroli, a także które są dostępne z natywnego API elementu.$.fn.data
przechowuje informacje w absurdalnie niejasnym miejscu. Znajduje się w zamkniętej zmiennej lokalnej o nazwiedata_user
która jest instancją lokalnie zdefiniowanej funkcji Data. Ta zmienna nie jest dostępna bezpośrednio z jQuery.Zestaw danych z
attr()
$(element).attr('data-name')
element.getAttribute('data-name')
,data-name
również dostępne z$(element).data(name)
ielement.dataset['name']
aelement.dataset.name
Zestaw danych z
.data()
.data(name)
.attr()
jakiegokolwiek innego miejscaźródło
.attr()
jest droga, jeśli potem chcesz użyć danych jako selektor (.data()
nie zostanie znalezione, patrz codepen.io/anon/pen/EvawPV?editors=1011 )Możesz użyć
data-*
atrybutu, aby osadzić dane niestandardowe. Tedata-*
atrybuty daje nam możliwość osadzić danych niestandardowych atrybutów wszystkich elementów HTML..data()
Metoda jQuery pozwala uzyskać / ustawić dane dowolnego typu do elementów DOM w sposób bezpieczny przed cyklicznymi odniesieniami, a tym samym przed wyciekiem pamięci..attr()
Metoda jQuery pobiera / ustawia wartość atrybutu tylko dla pierwszego elementu w dopasowanym zestawie.Przykład:
źródło