javascriptの動作にデータ属性とクラス/ IDを使用する違いは何ですか？

Question

私はアプリケーションで作業していますが、フロントエンドは主にjQueryを使用しています。

私たちは振る舞いを付けることができるように、ページ上に存在する特定の分類要素に依存しています。例：

他の開発者の1人は、プレゼンテーションをロジック（私が同意するもの）から切り離すべきだと言いました。しかし、私はこのアプローチについて、次の知っている

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

：クラスは、プレゼンテーションのために使用されているので、彼はデータ属性使うことを提案

• それは、クラスベースのセレクタよりも大幅にパフォーマンスが低いの
• HTMLクラスは、DOM要素に意味的な意味を付与するために使用され、したがって、プレゼンテーション用途に限定されない。

unobtrusive javascriptを読んでも特に気がかりなことはありません。

[data-attribute]をクラス/ IDに使用する主な違いは何ですか？

厳密にはパフォーマンス/環境設定の問題ですか？

Answer 1

クラスは、プレゼンテーション

のために使用されているので、これは部分的にしか真実です。クラスは、プレゼンテーションとビヘイビアの両方に使用されます。ビヘイビアを複数の要素に関連付けるためにクラスを使用することには何も問題ありません。

データ属性は要素固有の追加情報を運ぶのに最適ですが、データ属性を使用して動作を付加することを強く推奨します。

プレゼンテーションと動作の目的でクラスの使用を本当に分離する必要がある場合は、適切に名前を付けることをお勧めします。たとえば、あなたができる：

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

対

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

または

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

をしかし、私はこの行き過ぎを見つけます。私はしばしば、自分自身が同じクラス名を使用して、ふるまいとプレゼンテーションの両方を使用していることが分かります結局のところ、行動と提示はしばしば密接に関連している。

UPDATE：

さらに少しあなたの共同開発者のコ​​メントを取るために、I（s）は信じる彼は、プレゼンテーションでclass属性を関連付けるために、実際に間違っています。 classのためのHTML5仕様でも状態属性：

あり、著者は、クラス属性で使用できるトークンには追加の制限はありませんが、著者は、コンテンツの性質を記述する値ではなく、値を使用することが推奨されていますコンテンツの所望の提示を記述する。

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

そうではなく、class="big-red-box"を使用して、あなたはclass="alert"を使用する必要があります。これで、そのalertクラス（color:red;font-size:bold）にスタイルをアタッチできます。また、動作（つまり、ホバー上のポップアップ）も可能です。

Answer 2

クラスは複数の要素に関連付けることができますが、idは1つの要素にのみ関連付けられます。

私はもう少し慎重にあなたの質問を読んで、あなたはより多くの情報が必要であることを参照してください。

私は個人的にイベントを処理するときに使用することができ、必要な変数を格納するためにdata属性を使用して、私はクラス「イベント」を使用CSSではなくjQueryで使用されるものについては、例：

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

Answer 3

あなたは複数のクラスを持つことができますし、プレゼンテーションでロジックと他の人といくつかの名前を関連付け、クラスセレクタのパフォーマンスを維持することができます。

<el class="block logicClass" /> 

Answer 4

データ属性はセレクタのみを対象としていません。スクリプトが使用する可能性のあるタグに特別な意味を与えたいことがあります。

たとえば、値が最初のパスワードを参照するpassword-repeatフィールドにdata-attribute-validate-repeat="firstpassword"を含めることができます。次に、フォームバリデーターはこの属性を読み取ってIDで他のフィールドを見つけます。特別な命名規則を使用しない限り、クラスやIDだけではできませんが、これはあまりうまくいかないでしょう。

Answer 5

セレクタの中で最も速い以外の理由がある場合は、できるだけ確実にIDを表示する必要があります。私はあなたの第2のポイントをさらに拡大します.HTMLクラスは、のみがDOM要素に意味的な意味を与えるために使われるべきです。 CSSクラスを使用しています：

.block { 
    display: block; 
} 

実際にはHTML/CSSの精神に反しています。あなたの具体的な質問、「何を1として

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

：それは私たちは、すべてのそれをしないが、ポイントは、あなたが、少なくともあなたがにバインドするクラス名の後ろにセマンティックな意味を持つべきであるということであると言うことはありません大きな違いがあります： "あなたが言うように、クラスの使用はより速く、より効果的です。構文は確かにきれいです。データ属性をセレクタとして使用することに関する仕様doesn't seem to say anything specific。しかし、私は常にデータ属性を、アルゴリズムに値が使用されるスカラデータを格納するように設計されていると解釈してきました。これは、値が頻繁に変更される可能性があり、データが頻繁に要素に追加/削除される可能性があることを意味します。