Niestandardowe atrybuty - tak czy nie?

Ostatnio coraz częściej czytam o ludziach używających niestandardowych atrybutów w swoich tagach HTML, głównie w celu osadzenia dodatkowych bitów danych do wykorzystania w kodzie javascript.

Miałem nadzieję zebrać opinie na temat tego, czy używanie niestandardowych atrybutów jest dobrą praktyką, a także na temat niektórych alternatyw.

Wygląda na to, że naprawdę może uprościć zarówno kod po stronie serwera, jak i po stronie klienta, ale również nie jest zgodny z W3C.

Czy powinniśmy korzystać z niestandardowych atrybutów HTML w naszych aplikacjach internetowych? Dlaczego lub dlaczego nie?

Dla tych, którzy uważają, że niestandardowe atrybuty to dobra rzecz: o czym należy pamiętać podczas ich używania?

Dla tych, którzy uważają, że niestandardowe atrybuty są złe: jakich alternatyw używasz, aby osiągnąć coś podobnego?

Aktualizacja: Najbardziej interesuje mnie rozumowanie różnych metod, a także wskazanie, dlaczego jedna metoda jest lepsza od innej. Myślę, że wszyscy możemy wymyślić 4-5 różnych sposobów na osiągnięcie tego samego. (ukryte elementy, skrypty wbudowane, dodatkowe klasy, parsowanie informacji z identyfikatorów itp.).

Aktualizacja 2: Wygląda na to, że data-funkcja atrybutu HTML 5 ma tutaj wiele wsparcia (i raczej się zgadzam, wygląda na solidną opcję). Jak dotąd niewiele widziałem na temat obalenia tej sugestii. Czy są jakieś problemy / pułapki, które należy martwić o stosowanie tego podejścia? Czy może jest to po prostu „nieszkodliwe” unieważnienie obecnych specyfikacji W3C?

HTML 5 wyraźnie zezwala na niestandardowe atrybuty, które zaczynają się od data. Na przykład <p data-date-changed="Jan 24 5:23 p.m.">Hello</p>jest poprawny. Ponieważ jest to oficjalnie obsługiwane przez standard, myślę, że jest to najlepsza opcja dla niestandardowych atrybutów. I nie wymaga przeciążania innych atrybutów hackami, więc Twój HTML może pozostać semantyczny.

Źródło: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

Oto technika, której ostatnio używałem:

<div id="someelement">

    <!-- {
        someRandomData: {a:1,b:2},
        someString: "Foo"
    } -->

    <div>... other regular content...</div>
</div>

Obiekt komentarza jest powiązany z elementem nadrzędnym (tj. #Someelement).

Oto analizator składni: http://pastie.org/511358

Aby uzyskać dane dla dowolnego konkretnego elementu, wystarczy wywołać parseDataodwołanie do tego elementu przekazane jako jedyny argument:

var myElem = document.getElementById('someelement');

var data = parseData( myElem );

data.someRandomData.a; // <= Access the object staight away

Może być bardziej zwięzłe niż to:

<li id="foo">
    <!--{specialID:245}-->
    ... content ...
</li>

Uzyskać dostęp do niego:

parseData( document.getElementById('foo') ).specialID; // <= 245

Jedyną wadą korzystania z tego jest to, że nie można go używać z elementami samozamykającymi się (np. <img/>), Ponieważ komentarze muszą znajdować się w elemencie, aby można je było uznać za dane tego elementu.

EDYCJA :

Znaczące zalety tej techniki:

• Łatwy do wdrożenia
• Czy nie invalidate HTML / XHTML
• Łatwy w użyciu / zrozumieniu (podstawowa notacja JSON)
• Dyskretny i semantycznie czystszy niż większość alternatyw

Oto kod parsera (skopiowany z powyższego hiperłącza http://pastie.org/511358 , na wypadek, gdyby kiedykolwiek stał się niedostępny na pastie.org):

var parseData = (function(){

    var getAllComments = function(context) {

            var ret = [],
                node = context.firstChild;

            if (!node) { return ret; }

            do {
                if (node.nodeType === 8) {
                    ret[ret.length] = node;
                }
                if (node.nodeType === 1) {
                    ret = ret.concat( getAllComments(node) );
                }
            } while( node = node.nextSibling );

            return ret;

        },
        cache = [0],
        expando = 'data' + +new Date(),
        data = function(node) {

            var cacheIndex = node[expando],
                nextCacheIndex = cache.length;

            if(!cacheIndex) {
                cacheIndex = node[expando] = nextCacheIndex;
                cache[cacheIndex] = {};
            }

            return cache[cacheIndex];

        };

    return function(context) {

        context = context || document.documentElement;

        if ( data(context) && data(context).commentJSON ) {
            return data(context).commentJSON;
        }

        var comments = getAllComments(context),
            len = comments.length,
            comment, cData;

        while (len--) {
            comment = comments[len];
            cData = comment.data.replace(/\n|\r\n/g, '');
            if ( /^\s*?\{.+\}\s*?$/.test(cData) ) {
                try {
                    data(comment.parentNode).commentJSON =
                        (new Function('return ' + cData + ';'))();
                } catch(e) {}
            }
        }

        return data(context).commentJSON || true;

    };

})();

Możesz utworzyć dowolny atrybut, jeśli określisz schemat swojej strony.

Na przykład:

Dodaj

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a addthis:title="" addthis:url="" ...>

Facebook (nawet tagi)

<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
...
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>

Najłatwiejszym sposobem uniknięcia użycia atrybutów niestandardowych jest użycie istniejących atrybutów.

używaj znaczących, odpowiednich nazw klas.
Na przykład zrób coś takiego: type='book'i type='cd', aby reprezentować książki i płyty CD. Klasy są znacznie lepsze do reprezentowania tego, czym coś jest .

na przykład class='book'

W przeszłości korzystałem z niestandardowych atrybutów, ale szczerze mówiąc, naprawdę nie ma takiej potrzeby, jeśli wykorzystujesz istniejące atrybuty w semantycznie znaczący sposób.

Aby podać bardziej konkretny przykład, załóżmy, że masz witrynę z linkami do różnych rodzajów sklepów. Możesz użyć następujących:

<a href='wherever.html' id='bookstore12' class='book store'>Molly's books</a>
<a href='whereverelse.html' id='cdstore3' class='cd store'>James' Music</a>

Stylowanie css może wykorzystywać takie klasy jak:

.store { }
.cd.store { }
.book.store { }

W powyższym przykładzie widzimy, że oba są linkami do sklepów (w przeciwieństwie do innych niepowiązanych linków w witrynie), a jeden to sklep z płytami CD, a drugi to księgarnia.

Osadź dane w dom i użyj metadanych dla jQuery .

Wszystkie dobre wtyczki obsługują wtyczkę metadanych (dopuszczając opcje dla poszczególnych tagów).

Umożliwia także nieskończenie złożone dane / struktury danych, a także pary klucz-wartość.

<li class="someclass {'some': 'random,'json':'data'} anotherclass">...</li>

LUB

<li class="someclass" data="{'some':'random', 'json': 'data'}">...</li>

LUB

<li class="someclass"><script type="data">{"some":"random","json":"data"}</script> ...</li>

Następnie uzyskaj dane w następujący sposób:

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'random' )
alert('It Worked!');

Nie widzę problemu w korzystaniu z istniejących funkcji XHTML bez niszczenia czegokolwiek lub rozszerzania przestrzeni nazw. Rzućmy okiem na mały przykład:

<div id="some_content">
 <p>Hi!</p>
</div>

Jak dodać dodatkowe informacje do some_content bez dodatkowych atrybutów? Co powiesz na dodanie kolejnego tagu, takiego jak poniżej?

<div id="some_content">
 <div id="some_content_extended" class="hidden"><p>Some alternative content.</p></div>
 <p>Hi!</p>
</div>

Utrzymuje relację poprzez dobrze zdefiniowane id / rozszerzenie „_extended” według twojego wyboru i przez swoją pozycję w hierarchii. Często używam tego podejścia razem z jQuery i bez użycia technik podobnych do Ajax.

Nie. Wypróbuj coś takiego:

<div id="foo"/>

<script type="text/javascript">
  document.getElementById('foo').myProperty = 'W00 H00! I can add JS properties to DOM nodes without using custom attributes!';
</script>

Nie używam niestandardowych atrybutów, ponieważ wypisuję XHTML, ponieważ chcę, aby dane były odczytywalne maszynowo przez oprogramowanie innych firm (chociaż mógłbym rozszerzyć schemat XHTML, gdybym chciał).

Jako alternatywę dla niestandardowych atrybutów, w większości uważam, że atrybuty id i class (np. Jak wspomniano w innych odpowiedziach) są wystarczające.

Rozważ to również:

• Jeśli dodatkowe dane mają być czytelne dla człowieka, a także do odczytu maszynowego, należy je zakodować za pomocą (widocznych) znaczników HTML i tekstu zamiast jako niestandardowych atrybutów.

• Jeśli nie musi być czytelny dla człowieka, być może można go zakodować za pomocą niewidocznych znaczników HTML i tekstu.

Niektóre osoby robią wyjątek: pozwalają na niestandardowe atrybuty dodane do DOM przez Javascript po stronie klienta w czasie wykonywania. Uważają, że jest to OK: ponieważ niestandardowe atrybuty są dodawane do DOM tylko w czasie wykonywania, HTML nie zawiera atrybutów niestandardowych.

Stworzyliśmy internetowy edytor, który rozumie podzbiór HTML - bardzo ścisły podzbiór (rozumiany prawie powszechnie przez klientów poczty). Musimy wyrazić takie rzeczy jak <td width="@INSWIDTH_42@">w bazie danych, ale nie możemy mieć tego w DOM, w przeciwnym razie przeglądarka, w której działa edytor, przestraszy (lub jest bardziej skłonna do dziwactwa niż do niestandardowych atrybutów) . Chcieliśmy przeciągnij i upuść, więc umieszczenie go wyłącznie w DOM nie było dostępne, podobnie jak jquery .data()(dodatkowe dane nie zostały poprawnie skopiowane). Prawdopodobnie potrzebowaliśmy również dodatkowych danych, aby móc jeździć .html(). Ostatecznie zdecydowaliśmy się na użycie <td width="1234" rs-width="@INSWIDTH_42@">podczas procesu edycji, a następnie, kiedy POST wszystko, usuwamy widthi przeprowadzamy regex wyszukiwania i niszczenia s/rs-width=/width=/g.

Na początku facet, który napisał większość tego, był nazistowskim sprawdzaniem poprawności w tej kwestii i próbował wszystkiego, aby uniknąć naszego niestandardowego atrybutu, ale ostatecznie zgodził się, gdy nic innego nie wydawało się działać na WSZYSTKIE nasze wymagania. Pomogło, gdy zdał sobie sprawę, że niestandardowy atrybut nigdy nie pojawi się w wiadomości e-mail. Zastanawialiśmy się nad zakodowaniem naszych dodatkowych danychclass , ale zdecydowaliśmy, że będzie to większe z dwóch zła.

Osobiście wolę mieć czyste rzeczy i przekazywać weryfikatory itp., Ale jako pracownik firmy muszę pamiętać, że moim głównym obowiązkiem jest wspieranie sprawy firmy (zarabianie jak największej ilości pieniędzy tak szybko, jak to możliwe), a nie egoistycznej chęci czystość techniczna. Narzędzia powinny działać dla nas; nie my dla nich.

Wiem, że ludzie są temu przeciwni, ale wpadłem na bardzo krótkie rozwiązanie tego problemu. Jeśli chcesz użyć niestandardowego atrybutu, takiego jak „mój”, na przykład:

<a href="test.html" mine-one="great" mine-two="awesome">Test</a>

Następnie możesz uruchomić ten kod, aby odzyskać obiekt, tak jak robi to jquery.data ().

var custom_props = {} ;
$.each($(".selector")[0].attributes, function(i,x) {
    if (this.specified && x.name.indexOf("mine-") !== -1) 
        self.new_settings[x.name.replace("modal-","")] = x.value;
});

Specyfikacja: Utwórz kontrolkę Text.Box ASP.NET, która dynamicznie automatycznie formatuje tekst jako liczbę, zgodnie z właściwościami „DecimalSeparator” i „ThousandsSeparator”, przy użyciu JavaScript.


Jednym ze sposobów przeniesienia tych właściwości z formantu do JavaScript jest umożliwienie formancie renderowania właściwości niestandardowych:

<input type="text" id="" decimalseparator="." thousandsseparator="," />

Własne właściwości są łatwo dostępne przez JavaScript. I chociaż strona korzystająca z elementów o niestandardowych właściwościach nie zostanie zweryfikowana , nie wpłynie to na jej rendering.


I tylko korzystać z tej metody, kiedy chcę, aby skojarzyć typów prostych jak i ciągów liczb całkowitych do elementów HTML do użytku z JavaScript. Jeśli chcę ułatwić identyfikację elementów HTML, skorzystam z właściwości klasy i id .

W przypadku złożonych aplikacji internetowych upuszczam niestandardowe atrybuty w dowolnym miejscu.

Aby uzyskać więcej publicznych stron, używam atrybutu „rel” i zrzucam tam wszystkie dane w JSON, a następnie dekoduję je za pomocą MooTools lub jQuery:

<a rel="{color:red, awesome:true, food: tacos}">blah</a>

Próbuję ostatnio trzymać się atrybutu danych HTML 5 tylko po to, by „przygotować się”, ale nie przyszło to jeszcze naturalnie.

Cały czas używam niestandardowych pól, na przykład <ai = "" .... Następnie odwołanie do i z jquery. Nieprawidłowy HTML, tak. Działa dobrze, tak.

Moim skromnym zdaniem niestandardowe atrybuty nie powinny być używane, ponieważ nie sprawdzają poprawności. Alternatywnie możesz zdefiniować wiele klas dla jednego elementu, takich jak:

<div class='class1 class2 class3'>
    Lorem ipsum
</div>