2

私の同僚の 1 人は、javascript/jQuery の目的で HTML クラスと ID を使用するのが好きではありません。したがって、彼が次のようなカスタム html 属性を作成したことがわかりました。

<div id="myid" class="cssClasses ..." [some-purpose-id]="mycustomId">...</div>

私は彼にそれが本当に良い考えなのかと尋ねたところ、彼は、クラスと Id はスタイリングのために予約する必要があると考えていると答えました。

個人的には、クラスを使用していたでしょう。いくつかのクラスはスタイリングに使用され、他のいくつかのクラスはプログラミングに使用されます (jQuery セレクター)。アイデアは、物事を別々に保つことでもあります。もちろん、jQuery はスタイリング クラスを設定できますが、可能であればそれらを選択に使用しないでください。もちろん、必要に応じて id も使用しますが、id はページ上で一意であるため、クラスを使用して一般的なことを行うのが好きです。

より良いアプローチについての意見を知りたいです（ある場合）。ありがとうございました。

4

6 に答える 6

2

私はそれをお勧めしませんが、代わりに HTML5 data 属性を使用してください。ここでそれについて読んでください。

于 2012-12-12T22:51:40.583 に答える
1

いいえ、ほとんどの場合、作成された属性を使用するべきではありません。これらは有効な HTML ではなく、コードを検証しようとするとエラーとして表示されます。

ただし、HTML5 では、で始まるカスタム属性を使用できますdata-。詳細については、html5doctor の Web サイトを参照してください。ただし、属性は、ラベルではなく情報data-を保存するために提唱されることがよくあります。例えば、あなたが言うかもしれない製品のために。か何か。data-brand="gucci"

スタイル設定やJavaScript に属性を使用することは誤解を招きます。これは二分法ではないからです。多くの場合、マークアップのスタイルを設定するために ID またはクラスを追加する必要があります。可能であれば、これらの属性を再利用して、属性を追加せずに JavaScript の要素を選択できます。コードをきれいに保ちますが、これは明らかに単なる好みです。

選択に使用できる一意の ID またはクラスをまだ持っていない要素を選択する必要がある場合は、data 属性を使用できます。ただし、id とクラスの使用は依然として標準的な方法です。

于 2012-12-12T23:01:32.790 に答える
1

JavaScript と CSS の両方にクラスと ID を使用する必要があります。あなたの同僚は間違っています。

データ (html)、プレゼンテーション (css スタイリング)、動作 (javascript) を分離したいということを覚えておくと役に立ちます。クラスと ID が存在するのには理由がありますが、それはスタイリングのためではありません (JavaScript のためでもありません!)。それらは、ドキュメントを意味的にマークアップできるようにするためにあります。

適切な HTML を記述する場合、クラスと ID は、ノードに含まれるデータの実際の内容と目的を反映する必要があります。.zip_code次に、スタイルを設定する必要がある場合は、クラスなどの適切なスタイルを指定できます。また、特別な動作が必要な場合は、JavaScript を使用して必要な動作を.deletableリスト アイテムに適用できます。

もちろん、現実の世界では、物事に非常に強い反発を感じている人がいて、その人の思い通りにならざるを得ないこともあります。この場合、他の誰かが提案したように、同僚と妥協して HTML5 の data-* 属性を使用する必要があるかもしれません。ただし、これは有効な HTML を生成するソリューションですが、data-* 属性が設計された目的ではないため、技術的に正しいソリューションではありません。

于 2012-12-12T23:10:51.243 に答える
0

クラスと ID にはそれぞれ長所と短所があります (使い方にも大きく依存します)。

クラス- それらはスタイリング情報を伝えるように設計されていましたが、jQuery の出現により、アクション (またはデータ) を意味することもあれば、スタイリングを意味することもある二重の目的を持つようになりました。これは、特に大規模なプロジェクトでは非常に混乱します。デザイナーが CSS を「リファクタリング」しようとして、javascript/jQuery が接続されている要素のこれらのクラス名を変更しようとしていると想像してみてください。悪いことが起こります。非スタイリング クラス名の前に「.donttouchthis-jqueryclass」のような「名前空間」を付けることを軽減できます。これにより、ロジックとプレゼンテーションが非常に原始的な方法で区別されます。クラスを使用する利点は、「スタック」できるため、たとえば ID よりも複雑な「ロジック」を伝えることができることです。

ID - 名前が示すように、要素を一意に識別するように設計されています。プログラミングの観点から見ると、ID は DOM 内の要素にアクセスする最速の方法を提供します (getElementById)。スタイルを設定することもできますが、リファクタリング時に ID を削除する可能性は低くなります (いつでも ID スタイルを削除してクラスを与えることができるため)。ID は一意であるため、複雑なデータを保存するために ID を広範囲に使用することは非常に限られています。しかし、クリック ハンドラーをバインドしたり、DOM のチャンクを一意に識別したりするのには、それらによって識別される要素の 1 つだけが必要な場合に適しています。

クラスと ID の両方に、ビジネス ロジックを伝達する手段としての有用性を制限する重要なルールが 1 つあります。数字で始めることはできません (多くの場合、要素に都合よく割り当てられたデータベース ID が必要なだけです)。

カスタム属性(データではありません) - クールなものなら何でもかまいませんが、HTML の「有効性」を気にする場合は、特定の DTD タイプに制限され、DTD で指定する必要があります。実際には、ブラウザーは (W3C 規則の下で) 不明な属性を無視することが明確に義務付けられているため、HTML に害を及ぼすことはありません。唯一の問題は、潜在的な将来の開発との衝突です。純粋なJavaScriptを使用している場合、それらも使用するのが少し面倒です（ただし、これは主観的なオプションです-上記の回答の1つで示唆されているように、これはそれらをデータストレージとして使用するための優れた補足オプションです）。CSS をリファクタリングする際の混同の可能性はわずかです。

カスタム データ属性- jQuery を使用している場合、非常に複雑なデータ (オブジェクトなど) を保存できるため、これらは優れています。正しく使用すると、DOM 要素の機能を説明するための素晴らしい語彙が得られます。「data-」名前空間は、名前空間のない属性との将来の競合から適切に保護します。

最善の解決策は、これらのいずれにもあからさまに依存するのではなく、親 DOM 要素を渡して後でマークアップに基づいて機能を適用できるようにする JavaScript パターンを実装することです (標準の jQuery プラグイン パターンのように)。このようにして、静的 HTML ソースの一部である特定の属性/クラス/ID に対する多くの依存関係を削除します。

于 2012-12-13T00:48:32.860 に答える
0

あなたの同僚は、 Dojo ツールキットで使用されている宣言型スタイルの例に触発されたのかもしれません。

data- は、特定の目的のために属性を「スタンプ」する良い方法です (例えば、Dojo 固有の属性はすべて data-dojo-whatever の形式です)。これにより、他のスクリプトや css と競合するリスクが軽減されます。

はい、それは良い考えかもしれませんが、スタイリング用に予約されているクラスとIDはありません。

于 2012-12-12T23:45:13.973 に答える
0

複数の目的で属性内に別のデータを提供する場合に役立つ場合があります。次の例をご覧ください。

<script>
    function getIt(){
   ob = document.getElementById('myid') 
    alert(ob.getAttributeNode('anotherTitle').value)

    }
</script>
<div id="myid" class="cssClasses" anotherTitle="new Title">The div</div>
<a href="javascript:getIt()">Test</a>

anotherTitle 属性を使用して、別の用途で使用できる別のデータ セットを保存または保存しました。これは実際の例ですhttp://jsfiddle.net/vxknh/

参照: http://www.w3schools.com/jsref/prop_attr_value.asp

于 2012-12-12T23:05:24.137 に答える