16

私はアプリケーションに取り組んできました.フロントエンドは主にjQueryを使用しています.

ページに存在する特定の分類された要素に依存して、それらに動作を関連付けることができます。例えば：

$('.block').on('click', clickHandler);

他の開発者の 1 人は、プレゼンテーションをロジックから切り離すべきだと言いました (私も同意します)。クラスはプレゼンテーションに使用されるため、データ属性を使用することを提案しました。

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

ただし、このアプローチについて次のことを知っています。

  • クラスベースのセレクターよりもパフォーマンスが大幅に低下します
  • HTML クラスは、DOM 要素にセマンティックな意味を与えるために使用されるため、表示用途に限定されません。

目立たない javascriptを読んでも、どちらについても特に言及はありません。

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

それは厳密にパフォーマンス/好みの問題ですか?

4

5 に答える 5

13

クラスはプレゼンテーションに使用されるため

これは部分的にしか当てはまりません。クラスは、プレゼンテーションと動作の両方に使用されます。クラスを使用して動作を複数の要素に関連付けることに問題はありません。

データ属性は、追加の要素固有の情報を運ぶのに最適ですが、動作をアタッチするためだけにデータ属性を使用しないことを強くお勧めします。

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

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

対。

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

また

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

しかし、私はこれがやり過ぎだと思います。振る舞いとプレゼンテーションの両方に同じクラス名を使用していることがよくあります。結局、行動とプレゼンテーションはしばしば密接に関連しています。

アップデート：

共同開発者のコ​​メントをもう少し詳しく説明すると、class属性をプレゼンテーションに関連付けるのは実際には間違っていると思います。class属性の HTML5 仕様にも次のように記載されています。

作成者が class 属性で使用できるトークンに追加の制限はありませんが、作成者は、コンテンツの望ましい表現を説明する値ではなく、コンテンツの性質を説明する値を使用することをお勧めします。

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

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

于 2013-03-19T18:20:55.570 に答える
3

最速のセレクターである以外の理由がなければ、できる限り ID を使用することをお勧めします。2 番目のポイントについてさらに詳しく説明します。HTML クラスは、DOM 要素にセマンティックな意味を与えるためにのみ使用する必要があります。それは、あなたが上記のように持っていると私が想定しているCSSクラスを使用しています:

.block {
    display: block;
}

実際、HTML/CSS の精神に反します。すべての人がそうしているわけではありませんが、要点は、少なくともバインド先のクラス名の背後にセマンティックな意味を持たせる必要があるということです。

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

あなたの特定の質問によると、「主な違いは何ですか:」あなたが言うように、クラスを使用する方が高速/パフォーマンスが向上します。構文は確かにきれいです。仕様では、 data- 属性をセレクターとして使用することについて特に何も述べていないようです。しかし、私は常に data- 属性を、値がアルゴリズムに使用されるスカラー データを格納するように設計されていると解釈してきました。これは、値が頻繁に変更される可能性があり、データが要素に頻繁に追加/削除される可能性があることを意味します。これは、セレクターにとって理想的ではありません。

于 2013-03-19T18:25:00.513 に答える
1

複数のクラスを持つことができ、一部の名前をロジックに関連付け、他の名前をプレゼンテーションに関連付けて、クラスセレクターのパフォーマンスを維持することができます。

<el class="block logicClass" />
于 2013-03-19T18:19:17.270 に答える
1

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

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

于 2013-03-19T18:20:56.113 に答える
1

クラスは複数の要素に関連付けることができますが、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>

それが役立つことを願っています!

于 2013-03-19T18:16:44.660 に答える