2016-06-20 6 views
3

これは、jQueryを使用してノードを選択し、IDを選択することはおそらくより効果的であると考えていることを理解しています。しかしそれとは別に、長いセレクターになっているのですが、他に何が鳴り響いているのですか?次のアラーム音は鳴りませんか?

私はいくつかの現場でこの質問を見てきましたので、私は尋ねています。私は目に会う以上にこれがあるかどうかを理解しようとしています。私はどのように対応するのか分かります。

ここをクリックしてください:http://www.reed.co.uk/jobs/senior-web-developer/29234531

+1

あなたのHTML構造が 'body div div ...'を決して変更しないと仮定しています。 – KevBot

+2

特権 – elclanrs

+0

@KevBotは、もしそれが 'div> div'ならもっと大きくなります。 –

答えて

3

はい。

  • それはHTMLの構造に非常に壊れやすいです
  • あまりにも具体的だ
  • を変更するにはidを使用しています(ページごとに一意であることを意味し)は不要であるべき他のセレクタ、とそれを修飾します。 JSファイルを複数のページで実行する必要があることもありますが、それは一般にデザインが悪いことです。
  • それはセレクタのみとにかく一つの要素に起因するidが使用されなければならないdocument.querySelectorAll()
  • 返さ要素にハンドオフすることができないため、パフォーマンスを殺す:eq(0)を使用します。

これは単にdocument.getElementById()(私は最後のソースを読んで以来、シズルが変更されていない場合)、または単にネイティブのDOM APIに直接渡されます$('#foo')、する必要があります。

+0

脆弱性 - 良い点。 –

3

物事のカップルは、私に飛び出す:

  1. #foo:eq(0) - :eq(0)はほぼ確実に完全に不要です。 :eqは「このインデックスで一致するセットの要素」を意味し、もちろんIDが1つの要素しか存在できません。すぐに私はフラグを立てます:全体的なことは、同じ文書内で重複IDを使用していますか?

  2. :eq(0)はセレクタの標準CSSではない唯一の部分でもあり、jQueryにブラウザをさせるのではなく、Sizzle(独自のエンジン)でセレクタを強制的に処理させます。パフォーマンスの問題が発生する可能性はありますか?いいえ(あるいはそうであればそれについて心配しますが)それは無意味です。

  3. body部分は完全に無意味です。

  4. セレクタの子孫としてIDセレクタが表示されるたびに、著者はドキュメント内のIDの規則を実際に理解しているかどうか疑問に思います(これは#1に関連していますが少し異なります)。セレクタではなく、単に#fooと同じです。決定的なのは、#foo#fooという要素をどこにも置いているのに対し、の場合はというdiv内のdivの内側にある場合にのみ見つけます。したがって、IDセレクタで有効に終わる子孫セレクタを使用している間は、を有効にすることができます(要素が期待されていない場合は要素を無視する場合)。コードレビューでは、私は、なぜ、というコメントを見たいと思うでしょう。

だから、要するに、私はそれが単に$("#foo")なかった理由について著者からの本当に良い理由をしたいと思います。

+0

...ええと、um、そして脆弱で、[alex pointed out](http://stackoverflow.com/a/37926589/157247)。どのように私は脆弱性を浮き彫りにするのを忘れましたか –

関連する問題