Was sind die Unterschiede zwischen der Verwendung von Datenattributen und der Klasse/ID für JavaScript-Verhalten?

Question

Ich habe an einer Anwendung gearbeitet, das Front-End verwendet hauptsächlich jQuery.

Wir verlassen uns darauf, dass bestimmte klassifizierte Elemente auf der Seite vorhanden sind, damit wir ihnen ein Verhalten zuordnen können. Zum Beispiel:

Einer der anderen Entwickler sagte, wir sollten Präsentation von Logik entkoppeln (was ich stimme). Da die Klassen für die Darstellung verwendet werden, schlug er vor Datenattribute mit:

$('[data-attribute-name~=value]').on('click', clickHandler); 

Ich weiß jedoch, folgendes über diesen Ansatz:

• Es ist deutlich weniger performant als eine klassenbasierte Selektor
• HTML-Klassen werden verwendet, um einem DOM-Element semantische Bedeutung zu verleihen, und sind daher nicht auf Präsentationszwecke beschränkt.

Ich sehe keine besondere Erwähnung von entweder beim Lesen auf unobtrusive javascript.

Was sind die Hauptunterschiede bei der Verwendung von [data-attribute] über Klassen/IDs?

Ist es ausschließlich eine Frage der Leistung/Präferenz?

Answer 1

Da die Klassen für die Darstellung verwendet werden

Dies ist nur zum Teil richtig. Klassen werden sowohl für die Darstellung als auch für das Verhalten verwendet. Es ist nichts falsch daran, Klassen zum Anhängen von Verhalten an mehrere Elemente zu verwenden.

Datenattribute eignen sich hervorragend zum Tragen zusätzlicher elementspezifischer Informationen, aber ich rate dringend davon ab, Datenattribute nur zum Zweck des Anhängens von Verhalten zu verwenden.

Wenn Sie wirklich die Verwendung von Klassen für Präsentations- und Verhaltenszwecke trennen müssen, würde ich empfehlen, sie entsprechend zu benennen.Zum Beispiel könnten Sie tun:

<div class="pres-alert">Watch Out!</div> 

gegen

<div class="behav-alert">Watch Out!</div> 

oder

<div class="pres-alert behav-alert">Watch Out!</div> 

Allerdings habe ich diese Overkill finden. Ich finde oft den gleichen Klassennamen für beide, Verhalten und Präsentation. Am Ende sind Verhalten und Präsentation oft eng miteinander verbunden.

UPDATE:

Um Ihr Co-Entwickler-Kommentar ein wenig weiter zu nehmen, ich glaube, er (sie) ist eigentlich falsch class Attribute mit Präsentation zu verknüpfen. Die HTML5-Spezifikationen für class Attribute sogar Zustand:

Es gibt keine zusätzliche Einschränkungen für die Token Autoren in der Klasse Attribute verwenden können, aber Autoren sind aufgefordert, Werte zu verwenden, die die Art des Inhalts beschreiben, anstatt Werte, die Beschreiben Sie die gewünschte Präsentation des Inhalts.

http://www.w3.org/html/wg/drafts/html/master/dom.html#classes

Also anstatt class="big-red-box" verwenden, sollten Sie class="alert" verwenden. Jetzt können Sie Stile an die alert Klasse (color:red;font-size:bold) sowie Verhalten (d. H. Popup bei Hover) anhängen.

Answer 2

Eine Klasse kann mehreren Elementen zugeordnet sein, während eine ID nur einem Element zugeordnet ist.

Ich lese Ihre Frage nur ein wenig mehr sorgfältig und sehen, dass Sie weitere Informationen benötigen:

persönlich verwende ich data Attribute notwendigen Variablen zu speichern, die verwendet werden kann, wenn ein Ereignis verarbeiten und ich verwende die Klasse „Ereignis“ für alles, was von jQuery anstelle von CSS verwendet wird. Zum Beispiel:

<a class="event" data-action="Alert" data-id="123" href="#">Foo</a> 

<script> 

var Event = { 
    Alert: function(ele){ 
    alert(ele.attr("data-id")); //alerts "123" 
    }; 
}; 

$(".event").on("click",function(){ 
    var ele = $(this); 
    Event[ele.attr("data-action")](ele); 
}); 

</script> 

Hoffe, dass hilft!

Answer 3

können Sie mehrere Klassen haben, und Sie können den Namen von einigen der Logik und andere mit Präsentation und halten die Leistung der Klassenauswahl zuzuordnen.

<el class="block logicClass" /> 

Answer 4

Datenattribute sind nicht nur für Selektoren gedacht. Manchmal möchten Sie einem Tag, das das Skript verwenden kann, eine zusätzliche Bedeutung geben.

Zum Beispiel könnten Sie eine data-attribute-validate-repeat="firstpassword" in einem Passwort-Wiederholungsfeld haben, wobei sich der Wert auf das erste Passwort bezieht. Dann kann ein Formvalidator dieses Attribut lesen, um das andere Feld nach ID zu finden. Dies kann nicht nur durch Klassen und IDs erfolgen, es sei denn, Sie verwenden eine spezielle Namenskonvention, die nicht sehr ordentlich wäre.

Answer 5

Sie sollten auf jeden Fall mit IDs bleiben, wenn Sie können, aus keinem anderen Grund, als es der schnellste der Selektoren ist. Ich würde mehr auf Ihren zweiten Punkt erweitern: HTML-Klassen sollten nur verwendet werden, um einem DOM-Element semantische Bedeutung zu verleihen. Das ist mit einer CSS-Klasse, die ich oben haben Sie wie:

eigentlich geht gegen den Geist von HTML/CSS. Das ist nicht zu sagen, wir haben nicht alle tun es, aber der Punkt ist, dass man zumindest semantische Bedeutung hinter den Klassennamen haben sollten, die Sie binden möchten:

$(".show-popup").on('click', showPopup); 

Wie pro Ihre spezifische Frage, „was sind die Hauptunterschiede: "Wie Sie sagen, ist die Verwendung der Klasse schneller/leistungsfähiger. Die Syntax ist sicherlich sauberer. Die Spezifikation doesn't seem to say anything specific über die Verwendung der Datenattribute als Selektoren. Ich habe die Datenattribute jedoch immer so ausgelegt, dass sie skalare Daten speichern, deren Werte für Algorithmen verwendet werden. Dies bedeutet, dass sich Werte häufig ändern können und Daten häufig zu Elementen hinzugefügt bzw. daraus entfernt werden können, was sie für Selektoren unproduktiv macht.