jQueryとバイクについて-私の追加

すぐに私は前の記事の著者とは全く関係がないことをお知らせします。 しかし、それを読んで記事に対するコミュニティからのこのような肯定的な反応を見た後、私も刺激を受け、私の観察と知識を少し追加することに決めました。さらに、これはhabrasocietyのサークルへの私のエントリーポイントとして役立つことができます。



手始めに、簡単なものから始めましょう。

1.声に出して言ってください

他のプログラマーの前にあなたの仕事は、あなたがそれを行う方法ではなく、あなたが何をするかを示すことです。



別のコードを書く前に、自分が何をしようとしているのかを考えて声に出して言うか、自分に言ってください。 例：「この要素をクリアする必要があります。」 多くの人はすぐに、ためらうことなく彫刻します：

$(".info").html("")
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以前は便利なフレーズ.innerHTML = ""



を使用していたためです。 より好ましいオプション：

 $(".info").empty()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらの同じプログラマは、多くの場合、新しい情報を入力する前に要素をクリアします。

 $(".info").html("").html("<b>Ok</b>")
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、忘れないでください-あなたはjQueryで書いています！ そして、それはあなたの面倒を見てくれ、そして.html()



自体が新しい値を挿入する前に要素をクリアします。



そして、彼は.innerHTML



介して行うよりも有能にそれを行うでしょう。 実際には、クリアされる要素の内部には、以前に.data()



を使用してイベントハンドラーまたはバインドデータをハングさせた要素が存在する可能性があります。 jQueryはこれをクリーンアップし、メモリリークは発生しません。

ところで、情報を削除するために、要素をクリアするだけでなく、完全に削除する方が便利な場合があります。

 $(".info").remove()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

もっと...



これを書くときはありそうにない：

 $("#history").css("display", "none") $("#description").css("display", "none") $("#category").css("display", "none") $("#contact").css("display", "none")
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「履歴の削除、説明の削除、カテゴリの削除、連絡先の削除」と言いました。 ほとんどの場合、「履歴、説明、カテゴリ、連絡先を削除します」と言いました。 だからこれを書く：

 $("#history, #description, #category, #contact").hide()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jQueryがあなたを愛していること、アイテムを非表示にする.hide()



、表示する.hide()



があることを忘れないでください。

mouseenter/mouseleave



VS mouseover/mouseout

おそらく迷惑に気づいたでしょう：時々、 mouseover/mouseout



イベントのペアを要素に掛けてツールチップを表示すると、このツールチップmouseover/mouseout



ます。 これは、ハンドラーを掛けた要素の内部に別の要素があるために発生します。 マウスカーソルにマウスカーソルをmouseout



と、ブラウザーは外部要素のmouseout



イベント、内部要素のmouseover



イベント、および外部要素のmouseover



イベントを生成します。



しかし、jQueryは私たちを愛し、別のイベントペアmouseenter/mouseleave



を提供します。これは、この問題を次のように解決します。 渡されたハンドラーの場合、ラッパーが実行されます。 カーソルが内側の要素に移動した瞬間に、外側の要素に対してmouseout



イベントがmouseout



れます。 同時に、jQueryはそれほど素朴ではなく、ブラウザーにだまされていません。 懐疑的なラッパー関数は、 event.relatedTarget



プロパティ（現在カーソルが指しているもの）をチェックし、外部要素内にある場合、 mouseleave



たmouseleave



ハンドラーを呼び出しません。 ちらつきもありません。



これに加えて、 .hover(handlerIn, handlerOut)



関数.hover(handlerIn, handlerOut)



忘れないでください。これは、2つのハンドラーを受け取り、 mouseenter



およびmouseleave



としてそれらをハングさせます。

 $(selector).hover(function() { tooltip.show() }, function() { tolltip.hide() })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

UPD ：同志 Waxerは、バージョン1.8 .hover()



は廃止された関数と見なされることを思い出させてくれます。

3. .parent()



対.closest()

多くの場合、私はこの設計に出くわします：

 var person = $(".name").parent().parent().parent()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここに、重要な情報を持っているか、別の必要な要素がある重要な親に到達する試みがあることは明らかです。 しかし、休暇中にあなたの$(".name")



。Name $(".name")



他の場所にあるが、同じperson



中にあるとしたらどうでしょうか？ 多くの職人は、 .parent()



を目的のアイテムに周期的に呼び出します。



より高度なものは、 .parentsUntil(selector)



、すべての親を指定された親（それを除く）に戻すことを知っています。 しかし、それでも決定は面倒です。

 var person = $(".name").parentsUntil(".person").last().parent()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、もっと明白な方法があります：

 var person = $(".name").closest(".person ")
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

言葉で表すようにコードを書くことを思い出すと、このオプションはその透明性と簡潔さにより適しています。

4. $.ajax()



-良いほど少ないが、良い！

AJAX、特に$.ajax()



大好きです。 そして、彼をどれだけ愛していますか？ 別の著者による以前の記事で、このコンポーネントを使用することの有用性が示されました。 いくつか持って行きます...



いつもではないにしても、頻繁に同じファイルにAJAXを介してアクセスし、異なるアクションのために異なるコマンドを渡すと言っても、私は嘘をつきません。 短いアクションのために大量のファイルを作成しないでください。 変更しないパラメータを常に渡すこともできます。 そして、おそらくあなたは常にjsonだけを返します。 jQueryが私たちを愛しているので、私たちの生活を少し簡略化しましょう。

 $.ajaxSetup({ dataType: "json", url: "ajax.php", data: { user_id: userId } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この操作にのみ特徴的なリクエストを行うたびに、これらのパラメーターを指定する必要はありません。

 $.ajax({ data: { product_id: productId }, success: function(json) { console.log(json) }, alert: " ..." //  ? .  })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、クエリには嫌いなコードの繰り返しはありません。 $.ajaxSetup



と$.ajax



からのdata



パラメーターは接着され、それらの合計がサーバーに送信されることに注意してください（ $.ajax



からのパラメーターは、 $.ajax



からの同じパラメーターを上書きします）。

5. $.ajax()



-ユーザーに通知する

それで...または今、私たちは彼の秘密の出来事についてユーザーに通知し、AJAXが要求したときに彼にメッセージを与えるでしょうか？ あなたはこれについて考えたに違いないが、あなたはしばしば同じことを書く必要があるのでそれを避けた。



例を簡単にするために、次の方法でメッセージを発行します。

 <div id="popup" class="---"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、それをリクエストに結び付けます：

 $("#popup").ajaxSend(function(event, xhr, options) { $(this).text(options.alert || "...").show() }).ajaxStop(function() { $(this).fadeOut("fast") })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.ajaxSend()



は、AJAX要求が発生するたびにハンドラーを呼び出します。 ここでは、送信されたメッセージ（上記を参照）またはデフォルトのメッセージを表示します。



.ajaxStop()



は、すべてのAJAXリクエストが完了した後、最後に呼び出されます。 つまり 複数のAJAXリクエストが並行して処理されている場合、ハンドラーは最後のリクエストが実行された後、一度だけ呼び出されます。



また、毎回個別のポップアップで新しいメッセージを配布する場合は、コードをわずかに変更する必要があります。

 $("body").ajaxSend(function(event, xhr, options) { $('<div class="popup" />') .appendTo(this) .css({/*  */}) .text(options.alert || "...") .delay(2000) //   2  .fadeOut("fast", function() { $(this).remove() }) })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

将来の座標の計算を追加することで、ポップアップの配置について心配することもできます。

6. $ .ajax（）-コードを通知します

一方、上の例のポップアップを見てみましょう。 ある人が、ページ上の現在のイベントに関する情報を表示する複雑なウィジェットの開発者だとしましょう。 また、他の人はビジネスロジック自体を開発し、AJAXリクエストを実装します。 明らかに、多くのAJAXリクエストが記述された後にウィジェットが必要になる可能性があります。 つまり 1人だけがプロジェクトに取り組んでいます。 jQueryが私たちを愛しているのと同じくらいコードと将来の同僚を愛していたら、AJAXアクションの一部が完了したときに通知する別のコードの必要性を予想していました。 そしてそうします：

 $.ajax({ data: { action: "search-name", name: $("#name").val() }, beforeSend: function() { $(searchForm).trigger("start.search") }, complete: function() { $(searchForm).trigger("finish.search") } })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今、私たちは将来誰かが私たちの所有物に侵入してラズベリーを台無しにすることを心配することはできません。 （コメントで？）誰でも、必要に応じてイベントstart.search



およびfinish.search



サブスクライブできることを通知するだけで十分です。

 $(searchForm) .on("start.search", function() { //    }) .on("finish.search", function() { //    })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結局のところ、独自のタイプのイベントを作成し、それらを生成し、サブスクライブする機会が与えられました。 すべてがシンプルです！ :) jQueryは私たちを愛しています。