4

ブラウザーのスタイリングに使用されるクラスを dom 操作に使用されるクラスから分離するためのベスト プラクティスへの提案またはポインターを探しています。

より具体的には、ページ要素を動的に更新する (新しいコンテンツをページに追加、非表示、および追加する) ために jQuery を広範に利用する単一ページの backbone.js Web アプリケーションを作成しています。私たちが直面している問題は、class 属性のオーバーロードが原因のようです。これは、プレゼンテーションのスタイル設定と、jQuery を介した GUI アプリ ロジックのページ要素の識別に使用されます。これは、スタイルの変更に関して問題を引き起こします。これは、特定のクラス (または DOM 要素) が基になる JavaScript アプリケーションで必要とされているかどうかを知る明確な方法がないためです。

言い換えれば、誰かが単純にタグのクラスを変更または削除した場合、彼らがプレゼンテーションを変更しているだけであると仮定すると、アプリケーションが壊れます。私はこれらの問題を分離する方法を探しています - jQuery セレクターに使用されるクラスを CSS スタイリングに使用されるクラスから分離しておくためです。これは「解決された問題」であると想定しています。なぜなら、JavaScript を大量に使用する Web アプリケーションを作成したのは私たちが初めてではないことは明らかだからです。これに対処する標準的な方法はありますか？明らかな何かが欠けていますか？

4

1 に答える 1

2

おそらく、JavaScript ロジックをバインドするために css クラス名をまったく使用しないことをお勧めします。HTML5 では、タグにカスタムのユーザー定義属性を追加する方法が導入されています。これを行うには、タグに属性を追加するだけですが、その名前は「data-」プレフィックスで始まります。例えば：

<a href="#" data-role="link-to-author" data-value="John Doe">John Doe</a>

1.4.3 以降の jQuery には、.data() 関数を使用してそのような属性を操作する組み込みメソッドがあります。詳細については、http: //api.jquery.com/data/#data-html5を参照してください。

アプリで何らかの理由でクラス名をポインタとして使用する必要がある場合は、次の規則を作成できます。

「js-」プレフィックスで始まるクラス名は、購入スクリプトで html 要素を識別するためにのみ使用され、スタイリングには使用できません。したがって、このようにして、要素は各要素に複数のクラスを持ちます (一部はスタイリング用、一部はロジック用):

<a href="#" class="author js-link-to-author">John Doe</a>

このようにして、接頭辞のないクラスは問題なく削除できます。接頭辞のあるクラスを削除すると、何かが壊れることを確信できます。

于 2012-05-31T17:55:22.783 に答える