web-dev-qa-db-ja.com

CSSクラスをデコレーターとして使用する-良いパターン？

私はかなり複雑なGUIを持つWebアプリを構築してきました-多くの小さな要素を並べて、さまざまな動作（ドラッグ、クリック、状況依存）を必要とする他の要素内に。

私のコードは次のように機能する傾向があります：

コントロールはhtmlタグとして始まります

<li>

その後、タグにクラスを追加します

<li class = 'static passive included'>

一部のクラスは、CSSスタイリングが外観に影響を与える可能性があります

.static {background: blue; float: left;}

他のjQueryは、関連するDOMイベントの動作を提供するために実行されます

$("#container").delegate(".passive", function {onclick : //do-stuff})

そして、他のものは、ドキュメントをスキャンするとき、通常のJavaScriptによって拾われるかもしれません。 'included'クラスを持つすべてのノードのテキスト値を収集します。したがって、特定のDOM要素は、cssとjQueryの組み合わせによって定義されたクラスを実装するGUIオブジェクトです。

私の質問は、これは働くのに良い方法ですか？そして、これらは本当に「装飾者」でもあります-彼らは確かに「オブジェクトに動的に追加の責任を追加します」が、私はその用語についてはわかりません。最後に、このパターンを自分のサイトで使用していますか？

javascriptdesign-patternsweb-applicationsjquerycss
8
Andrew M

私はあなたがしていることが死んでいると思います。属性名を作成するのではなく、クラスを使用する利点は、ページを検証できることです。未定義のCSSクラスに不満を感じる最新のブラウザーはなく、jQueryなどで使用するのは簡単です。

10
Peter Rowell

クラスは問題ありませんが、 HTMLデータ属性 も検討します。多くの場合、クラス名は、適切なjavascriptフックを有効にするのに十分な情報を伝えません（要素ID名をハードコーディングしないと）。 HTMLデータ属性は、要素を分類および選択し、JavaScriptベースの拡張機能などの補助的な目的で要素にデータを添付する別の方法を提供します。

JQueryを使用すると、HTMLデータ属性はCSSクラスと同じくらい簡単に使用できます。

1
quentin-starin

うーん...はい、いいえ。そのようなことをすることは問題ありませんが、クラスは実際にはクラス内のデータについて何が一般的であるかを示すために名前を付けられるべきです。 2つのタグの間に共通点がない場合は、クラスの要件が後で分岐する可能性があります。

要件の例：

  • すべてのナビゲーションアイテムは、白地に青、ヘルベチカ、余白が1pxになります。
  • コメントの説明はすべて白地に青、arialはマージンが4px、パディングが2pxになります

両方のクラスにwhiteonblueを与える方が良いですか？

.whiteonblue {
  font-color: white;
  background-color: blue;
}

または繰り返しコードを持っている

.navitems {
  font-color: white;
  background-color: blue;
// more css
}

.commentdesc {
  font-color: white;
  background-color: blue;
// more css
}

私は後者を主張します。 navitemsとcommentdescsの間には関係がないため、一方が変更されても、もう一方は変更されない可能性があります。その時点でCSSに移動する前に、正しいクラスのhtmlを検索し、クラスを削除し、新しいクラス（whiteonred）を追加する必要がありますか？私はしません。

同様にJavascript。最初のデザインでonclickと同じものを必要とするかもしれませんが、1つが変更されても、もう1つは変更されない可能性があります。言うのは簡単です

$(".navitems, .commentdesc")

このポリシーに固執すれば、質問がすぐに消えてしまうことに気付くと思いますが、そうでない場合は、あなたがやっていることは問題ありません。

0
pdr