jquery - イベントを添付する前にボタン/リンクの存在を確認するJqueryのベストプラクティス

Question

ボタンとリンクが存在する場合と存在しない場合がある Web ページがあります。clickこれらのボタンとリンクにイベントを実行して割り当てるjQueryがあります。

添付やその他のイベントを試みる前に、ボタンやリンクの存在を確認しないのは悪い習慣ですか? click影響は何ですか？

ボタンとリンクの存在を確認する必要がある場合、どの手法がベストプラクティスですか? そのように長さをチェックする$('myButton').length != 0か、または他の方法で？

score 10 · Accepted Answer

そこにない場合は別のことをする必要がない限り、事前に確認する必要はまったくありません。

id値を持つボタンがある場合とない場合があると仮定しましょう"myButton"。これを行う場合：

$("#myButton").click(function() { /* ..... */ });

...そしてボタンは存在せず、ハンドラは接続されていません。それは事実上ノーオペレーションです。

別の方法として、次のようにします。

var btn = $("#myButton");
if (btn.length !== 0) {
    btn.click(function() { /* ... */ });
}

...これでは何も節約できませんが (DOM を調べる必要があります)、より多くのコードが必要になります。

これは、jQuery の「集合論」アプローチの優れた点の 1 つです。集合が空の場合、集合に対する操作は失敗せず、何もしません。

score 2 · Accepted Answer

要素を含まない jQuery オブジェクトで jQuery 関数を呼び出しても影響はありません。これは、jQuery が既に暗黙的にこれを処理しているためです。基本的に、一致した各要素に対して順番に作用し、初期化されているが空のコレクションを反復しようとすると、アクションが発生しません。

score 2 · Accepted Answer

$('myButton')DOM を介した検索です。検索条件の定義が不十分で、DOM の重みが大きすぎると、検索操作のコストが高くなる可能性があります。

一部の開発者はこれを忘れて、次のような同じ検索クエリに対して複数の操作を実行します。

if ($('myButton').length !== 0) {
    $('myButton').click(...);    
}

$('mybutton')1 つ以上の結果が返された場合、上記の検索は 2 回実行されます。

あなたは確かにこれを「最適化」することができます

var myButtonSearchResult = $('myButton');
if (myButtonSearchResult.length !== 0) {
    myButtonSearchResult.click(...);
}

ただし、これは、jquery が空のセットでの操作を喜んで受け入れることに注意することで、さらに改善できます。

$('myButton').click(...);

jquery は、検索を実行するのに十分スマートです。返された空のセットに注意してください.click()。

つまり、最初にボタンの存在を確認する必要はありません。

score 1 · Accepted Answer

ボタンの存在を確認する必要はありません。「#myButton」が存在しない場合、 $('#myButton').click( ... ) は何も添付しません。これは悪い習慣ではありません。

4 に答える 4