Benutzerdefinierte Attribute - Ja oder Nein?

In letzter Zeit habe ich immer mehr über Personen gelesen, die benutzerdefinierte Attribute in ihren HTML-Tags verwenden, hauptsächlich um einige zusätzliche Datenbits für die Verwendung in Javascript-Code einzubetten.

Ich hatte gehofft, Feedback zu erhalten, ob die Verwendung benutzerdefinierter Attribute eine gute Vorgehensweise ist oder nicht und welche Alternativen es gibt.

Es scheint, dass es sowohl den serverseitigen als auch den clientseitigen Code wirklich vereinfachen kann, aber es ist auch nicht W3C-kompatibel.

Sollten wir benutzerdefinierte HTML-Attribute in unseren Web-Apps verwenden? Warum oder warum nicht?

Für diejenigen, die benutzerdefinierte Attribute für eine gute Sache halten: Was sollten Sie bei der Verwendung beachten?

Für diejenigen, die benutzerdefinierte Attribute für schlecht halten: Welche Alternativen verwenden Sie, um etwas Ähnliches zu erreichen?

Update: Ich interessiere mich hauptsächlich für die Gründe für die verschiedenen Methoden sowie für die Gründe, warum eine Methode besser ist als eine andere. Ich denke, wir können uns alle 4-5 verschiedene Wege einfallen lassen, um dasselbe zu erreichen. (versteckte Elemente, Inline-Skripte, zusätzliche Klassen, Analysieren von Informationen aus IDs usw.).

Update 2: Es scheint, dass die HTML 5- data-Attributfunktion hier viel Unterstützung bietet (und ich stimme eher zu, es sieht nach einer soliden Option aus). Bisher habe ich nicht viel an Widerlegungen für diesen Vorschlag gesehen. Gibt es Probleme / Fallstricke bei der Verwendung dieses Ansatzes? Oder ist es einfach eine "harmlose" Ungültigmachung der aktuellen W3C-Spezifikationen?

HTML 5 erlaubt explizit benutzerdefinierte Attribute, die mit beginnen data. So ist zum Beispiel <p data-date-changed="Jan 24 5:23 p.m.">Hello</p>gültig. Da es offiziell von einem Standard unterstützt wird, denke ich, dass dies die beste Option für benutzerdefinierte Attribute ist. Außerdem müssen Sie andere Attribute nicht mit Hacks überladen, damit Ihr HTML-Code semantisch bleibt.

Quelle: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

Hier ist eine Technik, die ich kürzlich verwendet habe:

<div id="someelement">

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

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

Das Kommentarobjekt ist mit dem übergeordneten Element (dh #someelement) verknüpft.

Hier ist der Parser: http://pastie.org/511358

Um die Daten für ein bestimmtes Element abzurufen, rufen Sie einfach parseDataeinen Verweis auf dieses Element auf, der als einziges Argument übergeben wurde:

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

var data = parseData( myElem );

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

Es kann prägnanter sein als das:

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

Darauf zuzugreifen:

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

Der einzige Nachteil dieser Verwendung besteht darin, dass sie nicht mit selbstschließenden Elementen (z. B. <img/>) verwendet werden kann, da sich die Kommentare innerhalb des Elements befinden müssen, um als Daten dieses Elements betrachtet zu werden.

EDIT :

Bemerkenswerte Vorteile dieser Technik:

• Einfach zu implementieren
• Macht HTML / XHTML nicht ungültig
• Einfach zu bedienen / zu verstehen (grundlegende JSON-Notation)
• Unauffällig und semantisch sauberer als die meisten Alternativen

Hier ist der Parser-Code (kopiert vom obigen Hyperlink http://pastie.org/511358 , falls er auf pastie.org nicht mehr verfügbar sein sollte):

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;

    };

})();

Sie können ein beliebiges Attribut erstellen, wenn Sie ein Schema für Ihre Seite angeben.

Beispielsweise:

Füge das hinzu

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

Facebook (sogar Tags)

<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"/>

Der einfachste Weg, die Verwendung benutzerdefinierter Attribute zu vermeiden, besteht darin, vorhandene Attribute zu verwenden.

Verwenden Sie aussagekräftige, relevante Klassennamen. Führen
Sie beispielsweise Folgendes aus : type='book'und type='cd', um Bücher und CDs darzustellen. Klassen sind viel besser, um darzustellen, was etwas IST .

z.B class='book'

Ich habe in der Vergangenheit benutzerdefinierte Attribute verwendet, aber ehrlich gesagt besteht keine Notwendigkeit dafür, wenn Sie vorhandene Attribute auf semantisch sinnvolle Weise verwenden.

Nehmen wir an, Sie haben eine Website mit Links zu verschiedenen Arten von Geschäften. Sie könnten Folgendes verwenden:

<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>

CSS-Styling könnte Klassen wie: verwenden.

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

Im obigen Beispiel sehen wir, dass beide Links zu Geschäften sind (im Gegensatz zu den anderen nicht verwandten Links auf der Site) und einer ein CD-Laden ist und der andere ein Buchladen.

Betten Sie die Daten in den Dom ein und verwenden Sie Metadaten für jQuery .

Alle guten Plug-Ins unterstützen das Metadaten-Plugin (wobei Optionen pro Tag zulässig sind).

Es ermöglicht auch unendlich komplexe Daten / Datenstrukturen sowie Schlüssel-Wert-Paare.

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

ODER

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

ODER

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

Dann holen Sie sich die Daten wie folgt:

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

Ich sehe kein Problem darin, vorhandene XHTML-Funktionen zu verwenden, ohne etwas zu beschädigen oder Ihren Namespace zu erweitern. Schauen wir uns ein kleines Beispiel an:

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

Wie füge ich some_content ohne zusätzliche Attribute zusätzliche Informationen hinzu? Was ist mit dem Hinzufügen eines weiteren Tags wie dem folgenden?

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

Es behält die Beziehung über eine genau definierte ID / Erweiterung "_extended" Ihrer Wahl und durch ihre Position in der Hierarchie bei. Ich verwende diesen Ansatz oft zusammen mit jQuery und ohne Ajax-ähnliche Techniken zu verwenden.

Nein. Versuchen Sie stattdessen so etwas:

<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>

Ich verwende keine benutzerdefinierten Attribute, weil ich XHTML ausgeben möchte, weil ich möchte, dass die Daten von Software von Drittanbietern maschinenlesbar sind (obwohl ich das XHTML-Schema erweitern könnte, wenn ich wollte).

Als Alternative zu benutzerdefinierten Attributen finde ich meistens die ID- und Klassenattribute (z. B. wie in anderen Antworten erwähnt) ausreichend.

Beachten Sie auch Folgendes:

• Wenn die zusätzlichen Daten sowohl für Menschen als auch für Maschinen lesbar sein sollen, müssen sie mit (sichtbaren) HTML-Tags und Text anstatt als benutzerdefinierte Attribute codiert werden.

• Wenn es nicht für Menschen lesbar sein muss, kann es möglicherweise mit unsichtbaren HTML-Tags und Text codiert werden .

Einige Benutzer machen eine Ausnahme: Sie lassen benutzerdefinierte Attribute zu, die zur Laufzeit von Javascript auf der Clientseite zum DOM hinzugefügt werden. Sie halten dies für in Ordnung: Da die benutzerdefinierten Attribute nur zur Laufzeit zum DOM hinzugefügt werden, enthält der HTML-Code keine benutzerdefinierten Attribute.

Wir haben einen webbasierten Editor erstellt, der eine Teilmenge von HTML versteht - eine sehr strenge Teilmenge (die von Mail-Clients fast überall verstanden wird). Wir müssen Dinge wie <td width="@INSWIDTH_42@">in der Datenbank ausdrücken , aber das können wir nicht im DOM haben, da sonst der Browser, in dem der Editor ausgeführt wird, ausflippt (oder eher ausflippt als über benutzerdefinierte Attribute ausflippt). . Wir wollten Drag & Drop, also war es nicht möglich, es rein in das DOM zu stellen, ebenso wie jquerys .data()(die zusätzlichen Daten wurden nicht richtig kopiert). Wir brauchten wahrscheinlich auch die zusätzlichen Daten, um für die Fahrt mitzukommen .html(). Am Ende haben wir uns für die Verwendung <td width="1234" rs-width="@INSWIDTH_42@">während des Bearbeitungsprozesses entschieden. Wenn wir dann alles veröffentlichen, entfernen wir widtheine Regex-Suche und zerstören sie s/rs-width=/width=/g.

Zuerst war der Typ, der das meiste davon schrieb, der Validierungs-Nazi zu diesem Thema und versuchte alles, um unser benutzerdefiniertes Attribut zu vermeiden, aber am Ende stimmte er zu, als nichts anderes für ALLE unsere Anforderungen zu funktionieren schien. Es half, als er erkannte, dass das benutzerdefinierte Attribut niemals in einer E-Mail erscheinen würde. Wir haben überlegt, unsere zusätzlichen Daten zu verschlüsseln class, aber entschieden, dass dies das größere von zwei Übeln sein würde.

Persönlich ziehe ich es vor , Dinge sauber zu halten und Validatoren usw. zu bestehen, aber als Angestellter des Unternehmens muss ich daran denken, dass meine Hauptverantwortung darin besteht, die Sache des Unternehmens voranzutreiben (so schnell wie möglich so viel Geld zu verdienen), nicht die meines egoistischen Wunsches nach technische Reinheit. Werkzeuge sollten für uns funktionieren; nicht wir für sie.

Ich weiß, dass die Leute dagegen sind, aber ich habe eine super kurze Lösung dafür gefunden. Wenn Sie ein benutzerdefiniertes Attribut wie "meins" verwenden möchten, zum Beispiel:

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

Dann können Sie diesen Code ausführen, um ein Objekt zurückzugewinnen, genau wie es jquery.data () tut.

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;
});

Spezifikation : Erstellen Sie ein ASP.NET TextBox-Steuerelement, das seinen Text gemäß den Eigenschaften "DecimalSeparator" und "ThousandsSeparator" mithilfe von JavaScript dynamisch automatisch als Zahl formatiert.


Eine Möglichkeit, diese Eigenschaften vom Steuerelement auf JavaScript zu übertragen, besteht darin, dass das Steuerelement benutzerdefinierte Eigenschaften rendert:

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

Benutzerdefinierte Eigenschaften sind über JavaScript leicht zugänglich. Während eine Seite, die Elemente mit benutzerdefinierten Eigenschaften verwendet, nicht überprüft wird , wird das Rendern dieser Seite nicht beeinflusst.


Ich nur diesen Ansatz verwenden , wenn ich einfache Typen wie Strings und Zahlen zu HTML - Elementen für die Verwendung mit JavaScript verknüpft werden soll. Wenn ich die Identifizierung von HTML-Elementen erleichtern möchte, verwende ich die Eigenschaften class und id .

Bei komplexen Web-Apps lege ich überall benutzerdefinierte Attribute ab.

Für öffentlich zugängliche Seiten verwende ich das Attribut "rel" und speichere alle meine Daten dort in JSON und dekodiere sie dann mit MooTools oder jQuery:

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

Ich versuche in letzter Zeit, mich an das HTML 5-Datenattribut zu halten, nur um mich "vorzubereiten", aber es ist noch nicht selbstverständlich.

Ich benutze die ganze Zeit benutzerdefinierte Felder, zum Beispiel <ai = "" .... Dann verweise ich mit jquery auf i. Ungültiges HTML, ja. Es funktioniert gut, ja.

Benutzerdefinierte Attribute sollten meiner bescheidenen Meinung nach nicht verwendet werden, da sie nicht validiert werden. Alternativ dazu können Sie viele Klassen für ein einzelnes Element definieren, z.

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