Korzystanie z tych danych API jQuery

18 Apr 10:33 am


Original: http://www.learningjquery.com/2011/09/using-jquerys-data-apis

początku (dobrze, zaczynając jQuery 1.2.3 na początku 2008 r.) nie było jQuery.data () API. Oferuje on drogę do powiązania danych JavaScript – łańcuchy, liczby, lub dowolny obiekt – z elementu DOM. Tak długo, jak manipulować DOM element z jQuery, biblioteka zapewnia, że ​​gdy element DOM odchodzi, powiązane dane odchodzi również. Jest to szczególnie ważne dla starszych wersji IE, które mają tendencję do wycieku pamięci, gdy JavaScript dane są mieszane z danymi DOM.

Most jQuery kod ustawia wartości danych za pomocą nadrzędnego dane () API;. dla Przykładem, $ ("div"). dane ("imaDiv", true) ustawia wartość logiczną na każdym div w dokumencie. Ten interfejs API, z kolei zwraca się do jQuery.data () z każdego elementu, aby ustawić wartość. Dla kompletności, są też jQuery.removeData () i . removeData () , aby usunąć elementy danych, a jQuery.hasData () , aby ustalić, czy jakiekolwiek dane jest aktualnie ustawiony na element.

 

Reasumując: W momencie tych interfejsów API, byli tylko na temat pobierania i ustawiania wartości związanych z elementów DOM w pamięci. Co najważniejsze, dane udało się zapewnić brak pamięci będzie przeciekać elementy DOM usunięto. Wiele wewnętrznych, takich jak jQuery funkcje obsługi zdarzeń i przełączniki pamięci państwowej wykorzystywania tych danych API i ich korzyści.

Wprowadź HTML5

Kilka lat później, HTML5 stał się popularny i związane kolejny pomysł z “danych” poprzez jej < atrybuty i powiązane . Zbiór danych nieruchomości. To nie jest to samo, co oryginalny pomysł jQuery danych: Polega ona na wartości, są związane z elementów HTML w adiustacji, a nie elementów DOM w pamięci. Ale są one logicznie wystarczająco blisko, że dodana możliwość odczytu HTML5 danych-* atrybuty do jQuery dane obiektu począwszy od wersji 1.4.

Nie idealne małżeństwo, choć. HTML5 data-* nazwy atrybutów są takie jak nazwy CSS, nazwa jak data-shrivel-up jest włączony do shrivelUp , kiedy przeczytać w JavaScript- land. Przepisy takie nie zawsze stosowane do jQuery danych nazw w przeszłości, co oznacza, możemy spróbować zarówno shrivel-up i shrivelUp , aby znaleźć mecz. Wiemy, że to nie jest idealne, ale jest konsekwencją stara się zmieścić dwa pojęcia z semantyki różniących się jednym API.

Przepisy drogowe dla danych API

tej historii na uwadze, istnieje kilka ważnych rzeczy, które powinieneś wiedzieć, aby korzystać z . dane () i jQuery.data () API skutecznie. To daje lepsze poczucie tego, co się dzieje, elementy są zilustrowane z kodem. Załóżmy, że każdy blok kodu działa niezależnie od innych i że wszystkie one odnoszą się następujące HTML:

HTML:

  1. <div id = “powieść” data-powieściopisarz = ‘{“imie”: “Jose”, “nazwisko”: “Saramago”}’ >
  2. <div id = “wiersz” data-poeta = ” Edna St Vincent Millay “ > Sonnet 18

     

  • <div id = “historia” data-story-writer = ” Raymond Carver “ > Małe, Good Thing

    Oto zasady ruchu drogowego:

  1. Tylko . dane () API HTML5 odczytuje dane-* atrybutów, i czyni to raz .

    obiekt w pamięci danych dla elementu jest inicjowany z tych data-* przypisuje pierwszy raz zadzwonić . danych () dla elementu. Wszelkie późniejsze zmiany atrybutów są ignorowane, ponieważ jQuery ma już w pamięci podręcznej danych.

    Zasada

    : Jeśli HTML5 data-* atrybuty zmiany w trakcie realizacji programu, można użyć jQuery attr () w celu uzyskania aktualnych wartości..

    JavaScript:

    1. console log ( $. danych ( dokument. getElementById ( ) , ‘poeta’ ) ) ,
    2. / / >> nieokreślony
    3. konsoli log ( $ ( ‘# poematu “ ) . danych ( ” poety “ ) ) ,
    4. / / >>” Edna St Vincent Millay “
    5. / / Zmień poeta danych HTML5 atrybut
    6. $ ( ‘# poematu “ ) . attr ( “data-poety” , ) ,
    7. konsoli log ( $ ( ‘# poematu “ ) . danych ( ” poety “ ) ) ,
    8. / / >>” Edna St Vincent Millay “
  2. . dane () API konwertuje HTML5 data-* wartości do typów Javascript w miarę możliwości.

    Oznacza sekwencji cyfr lub wykładniczy wyglądających wartości jak "11E5" są tłumaczone z typem JavaScript numeracji ciąg "true" staje Boolean prawda i prawidłowy ciąg JSON staje się obiektem JavaScript.

    Zasada

    :.. Aby uzyskać HTML5 data-* atrybuty jak ciągi bez konwersji danych, należy użyć jQuery attr ()

    JavaScript:

    1. console log ( ( ‘# powieść ” ) . dane ( ) ) ,
    2. / / Object >>> {” imie “:” Jose “,” nazwisko “:” Saramago “}
    3. konsoli log ( $ ( ‘# powieść “ ) . attr ( ” data-powieściopisarz “ ) ) ,
    4. / / >>” {“imie”: “Jose”, “nazwisko”: “Saramago”} ‘
  3. niższy poziom jQuery.data () API nie czyta HTML5 data-* atrybuty.

    Jednak jeśli . dane () API został powołany już w tym elementu DOM, jQuery.data () będzie “widzieć” wartości, które zostały już odczytać z data-* atrybutów. Natomiast jeśli jQuery.data () ustawia wartość o tej samej nazwie, jak HTML5 data-* atrybut i . Danych () później czyta im, atrybut HTML5 jest ignorowane .

    Zasada

    : Aby uniknąć nieporozumień, nie używaj podobnych nazw dla HTML5 danych-* atrybutów i danych ściśle wewnętrznych zapisanych przy użyciu jQuery.data () lub . dane () z tych samych elementów.

    JavaScript:

    1. / / Przed zapoznaniem się z danymi ()
    2. konsoli log ( $. danych ( dokument getElementById ( ) , ” poety “ ) ) ,
    3. / / >> nieokreślony
    4. konsoli log ( $ ( ‘# poematu “ ) . danych ( ” poety “ ) ) ,
    5. / / >>” Edna St Vincent Millay “
    6. / / Po zapoznaniu się z danymi ()
    7. konsoli log ( $. danych ( dokument getElementById ( ) , ” poety “ ) ) ,
    8. / / >>” Edna St Vincent Millay “
  4. No Dane jQuery API kiedykolwiek zmiany HTML5 data-* atrybuty.

    Większość zastosowań . dane () i . removeData () jest nadal dla pierwotnego celu kojarzenie danych z elementów DOM w pamięci. Aktualizacja DOM przypisuje każdym razem dane zostały zmienione by spowolnić bez powodu. Ponadto, nie jest to nawet możliwe, aby szeregować wszystkie typy danych, które mogą być dołączone do elementu DOM, takie jak funkcje, odniesienia do innych elementów DOM lub niestandardowe obiekty JavaScript.

    Zasada

    :.. Aby zaktualizować lub usunąć HTML5 data-* atrybuty, należy użyć jQuery attr () lub removeAttr () metody.

    JavaScript:

    1. console log ( ( ‘# poemat ” ) . dane ( “poety” ) ) ,
    2. / / >>” Edna St Vincent Millay “
    3. konsoli log ( $ ( ‘# poematu “ ) . attr ( ” data-poety “ ) ) ,
    4. / / >>” Edna St Vincent Millay “
    5. / / Zmień HTML5 atrybut data-*
    6. $ ( ‘# poematu “ ) . attr ( “data-poety” , ) ,
    7. konsoli log ( $ ( ‘# poematu “ ) . danych ( ” poety “ ) ) ,
    8. / / >>” Edna St Vincent Millay “
    9. konsoli log ( $ ( ‘# poematu “ ) . attr ( ” data-poety “ ) ) ,
    10. / / >>” William Shakespeare “
    11. / / Zmień dane (” Poeta “)
    12. $ ( ‘# poematu “ ) . danych ( “poeta” , ” Edmund Spenser “ ) ,
    13. konsoli log ( $ ( ‘# poematu “ ) . danych ( ” poety “ ) ) ,
    14. / / >>” Edmund Spenser “
    15. konsoli log ( $ ( ‘# poematu “ ) . attr ( ” data-poety “ ) ) ,
    16. / / >>” William Shakespeare “
  5. Wszystkie data-*imiona są zapisane w camelcase w jQuery obiektu danych, za pomocą < zasady.

    , data-camel-case staje camelcase obiekt w obiekcie danych i powinny być dostępne za pomocą . dane ("camelcase") . Ponieważ wiele osób będzie korzystać . Danych ("camel-case") zamiast tego przekonwertować do camelcase , jak również, ale tylko wtedy, gdy nie pozycja danych o nazwie camel- case jest znaleźć, więc jest to szybsze w użyciu pierwszego formularza. Jeśli masz cały obiekt danych przy użyciu kodu jak = danych jQuery.data (elem) , musi wykorzystanie data.camelCase , aby uzyskać dostęp do danych poz.

    Zasada

    : Jeśli na danych zaczerpniętych z data-* parametrów, a zwłaszcza, gdy dostęp do obiektu danych bezpośrednio, należy użyć W3C camelCasing konwencje

    .

    JavaScript:

    1. / Not / poleca:
    2. konsoli log ( $ ( ‘# Historia “ ) . danych ( ‘STORY-writer” ) ) ,
    3. / / >>” Raymond Carver “
    4. / / Lepiej:
    5. konsoli log ( $ ( ‘# Historia “ ) . danych ( ) ) ,
    6. / / >>” Raymond Carver “
    7. / / łamany:
    8. konsoli log ( $ ( ‘# Historia “ ) . attr ( ) ) ,
    9. / / >> nieokreślony
    10. / / Lepiej:
    11. konsoli log ( $ ( ‘# Historia “ ) . attr ( ” data-STORY-writer “ ) ) ,
    12. / / >>” Raymond Carver “

Wybierz co chcesz

czasem jQuery . dane () API nabrała więcej obowiązków, niż pierwotnie, kiedy to był tylko sposób powiązać dane w pamięci z elementów DOM IE i zapobiegania wyciekom. Jeśli potrzebujesz tylko prosty sposób odczytać HTML5 data-* atrybuty jak ciągi, następnie . Attr () może być najlepszym wyborem, choć syrena-song -name . data () można mówić inaczej. Czy korzystasz attr () lub dane () , pracują stale w różnych przeglądarkach całą drogę do IE6 -.. Nawet jeśli przeglądarka nie obsługuje HTML5 – tak Wystarczy wybrać z interfejsu API z zestawem funkcji, które działa najlepiej dla swoich potrzeb.

Comments are closed