私の意見では、思考の要素にイベントを掛ける3つの一般的な方法があります：
- 経由ID
- レイアウトから得たものを通して
- 特別クラスを通して
1. IDを介したバインド
何がもっと簡単だろうか？ 彼らがJSに初めて会ったとき、多くの人がこれをしたと思いますが、誰かが今それをやっています。 もちろん、この方法には利点があります。 まず、これは高速です。これは、idを持つ要素がグローバルウィンドウオブジェクトにあり、それらを検索する必要さえないためです。 第二に、テンプレートから、およびハングイベントを通じて、デバッグ時に要素を簡単に見つけることができます。
たとえば、コードがあります
<div class="main"> <p> . 3- 10. <a href="#" id="system-detail"></a> </p> </div>
イベントがこの要素にアタッチされている場所をsystem-detailで簡単に見つけることができることに同意する必要があります。 これは、jsコードがある場合にも当てはまりますが、テンプレートを見つける必要があります。
短所もなく、どこにもありません。 これらの要素がページに複数回挿入されるテンプレートで使用される場合、一致するIDにより競合が発生します。
2.レイアウトから得たものを介したバインディング
このメソッドの本質は、テンプレートを編集するのではなく、持っているものの上に構築することです。 たとえば、このようなテンプレートがあります。
<div class="block_content"> <p class="left b_font red_font"><a href="#"> </a></p> <div class="left inline-block"> <p> ! . , . <a href="#"></a> <p class="hidden"> <span> - <a href="#"> </a></span> </p> </p> </div> </div>
ほとんどの場合、開発者はの精神で何かを書いた
$('.block_content .inline-block a:first'); // $('.block_content .left.b_font.red_font'); // $('.block_content .inline-block a:last'); //
要求内の多数のセレクターに加えて、このコマンドは非常に脆弱です。 いずれかの要素またはその配置のクラスを変更するとすぐに、すべてがバラバラになります。 さらに、このようなクエリはデバッグが非常に困難です。
「アップグレード」でイベントがマウントされている場所を確認する方法！ どのように検索しますか？ 部分的に、ランダムにのみ。 あるセレクターで検索し、次に別のセレクターで検索し、同様のものが見つかるまで続けます。その後、それがまだあるかどうかを確認します。 別の要素でアクションを複製する必要がある場合は、割り当てを書き換える（またはコンマで古いセレクタに追加する）必要があります。
このようなリクエストを変更するには、プロジェクト全体の1つのファイルである場合、類似したものに添付されないようにテンプレートの束を見る必要があります。
そして、ここでテンプレートをレイアウトデザイナに渡し、色を赤から青に編集します。 リンクは機能しなくなりました。
自分でそれを書いた人だけが、そのようなテンプレートをよく理解することができます。
3.特別なクラスを介したバインド
そして最後のポイントに来ます。 イベントをバインドするために、特別なクラス、たとえばjs-new-messageまたはapp-open-windowが追加されます。これらはスタイルの設定には使用されませんが、イベントのハングにのみ必要です。 前の例を取り、それを改良します
<div class="block_content"> <p class="left b_font red_font"><a href="#" class="app-skip-advert"> </a></p> <div class="left inline-block"> <p> ! . , . <a href="#" class="app-modern"></a> <p class="hidden"> <span> - <a href="#" class="app-help-me"> </a></span> </p> </p> </div> </div>
$('.app-skip-advert'); // $('.app-go-to-modern'); // $('.app-help-me'); //
違いは明らかです。 コードはスタイルに依存しません。アクションを複製する必要がある場合は、目的のクラスを適切な場所に割り当てるだけです。 要素とコードの両方の検索は、双方向で簡単です。 このようなコードのサポートには最小限の時間がかかります。 同じページで複数のテンプレートを使用する場合、バインディングがグローバルオブジェクトではなくテンプレートのルートに行くと、コードはうまく機能します。 はい、競合する可能性がありますが、2番目のオプションよりも簡単に追跡できます。