4

Javascript / jQueryを使用してWebページにHTML要素を追加し、それに合わせて外部CSS宣言を追加する場合は、これらの要素のIDとCSSクラス名がページに既に存在するものと競合しないようにする必要があります。たとえば、ページのどこかに「outerWrapper」や「nav」などのIDがすでにある可能性があり、新しいコンテンツにも同じ名前のIDが含まれている可能性があります。

独自のWebページに追加するコードを作成する場合、比較的簡単です。

ただし、サードパーティのWebサイトで使用できるコードを提供する場合は、ページですでに使用されているIDとクラス名を制御できず、将来ページに加えられる可能性のある変更を制御することはできません。 。

では、サードパーティが使用するコードを処理するときにこれらの競合を回避するためのベストプラクティスは何ですか？

これまでは単にiframeを使用してきましたが、それは理想的ではありません。

CSS子セレクターは、追加されたCSSが既存の要素/クラスに影響を与えるのを防ぐことができますが、新しい要素がすでにページ上にあるCSSによってスタイル設定されるのを防ぐことはできません。

追加したコンテンツのすべてのIDの前に、たとえば会社、製品名、またはコンテナー名を付けることが唯一の方法ですか？たとえば、ビデオプレーヤーJWPlayerは、コンテナー名の前にHTML5プレーヤーのすべての要素IDを付けます。

どんな考えでもありがたいです。

4

2 に答える 2

2

特に、私が取り組んでいるアプリは、ページの親部分のフォーム フィールドと同じ入力 ID を持つフォーム フィールドを含む多くの jquery ポップアップ/ダイアログで構成されているためです。

これを満足のいく方法で解決することがわかったもの：

  1. HTML 入力のサーバー側生成に依存します (このために独自のクラスを作成しました)。これにより、HTML 入力 ID を簡単に「プレフィックス」する自由が得られます。
  2. 何をするにもキャメルケースのみを使用してください。名前の競合を避けるために接頭辞を付ける必要がある場合は、アンダースコアを使用して、名前のどの部分が接頭辞で、どの部分がそうでないかを区別することができます。アンダースコアはアプリで直接的な目的を持つようになり、必要に応じて接頭辞を削除する機能を簡単に記述できるようになりました。
  3. 一貫した命名規則を使用してプレフィックスを作成します。私は個人的に入力元のバックエンド サービス クラスのクラス名を取得し (#1 で説明した、それらを生成するために再利用するクラスと混同しないでください)、それをプレフィックスとして使用します。たとえば、とblogUsers_firstNameはすべて、 というサーバー側クラスからの HTML テキスト入力です。blogUsers_lastNameblogUsers_emailclass blogUsers { }
  4. ajax呼び出しなどを行うときはプレフィックスを削除して、サーバー側コントローラークラスへの入力をプレフィックスなしで受信できるようにします(サーバー側になり、名前の衝突がないため)。これにより、サーバー側での作業がはるかに簡単かつ明確になります。
  5. <form>タグ内に入力を含める可能性が高く、プログレッシブ エンハンスメント/グレースフル デグラデーション(つまり、event.preventDefault を使用した送信ボタンでの jquery クリック バインディング) を実装する可能性が高い、よりパブリックなフロントエンド Web サイトの状況では、使用しないでください。心配してください...サーバー側の生成では、入力の名前ではなく、IDにのみプレフィックスが追加されることを確認してください。データを送信するときに通常の古いフォームの送信が使用さnameれるため、これにプレフィックスを付けないようにしてください.
于 2014-03-20T14:34:12.380 に答える
1

1つのオプションは、DOMオブジェクトが動的に作成されるときにGUIDを使用してIDを生成することです。欠点は、IDがユーザーフレンドリーを使用しないことです（ランダムに生成された文字のリストにすぎないため）。このスレッドをチェックしてください：JavaScriptでGUID / UUIDを作成しますか？

もう1つのオプションは、ASP.Netと同様に、独自の命名規則を作成することです。コントロールには静的な名前（「myControl」など）を付けることができますが、その前に付加されたすべての親オブジェクトのリストを取得します。優れたHTMLプラクティスに従い、要素にIDを提供することを確認するのは、ユーザーの責任です。したがって、生成されたコントロールがdiv内のテーブルにネストされている場合、新しいIDはmyTable_myDiv_myControlのようになります。

于 2013-02-28T13:30:54.203 に答える