Clever Geek Handbook

カスタムイベントの例

おそらく多くの人が、jQueryにはClickやMouseDownなどの一連の標準イベントがあり、それらを使用してハンドラーをハングアップしたり、mousedown（）などをclick（）関数で励起できることを知っているでしょう。 bind（）およびtrigger（）関数を使用して同じアクションを実行できることを知っている人は少なくなります。

$( document ).bind( 'click' , function (){

alert( 'It works!' );

});



$( document ).trigger( 'click' );



* This source code was highlighted with Source Code Highlighter .





そしておそらく、bind（）およびtrigger（）関数で独自のイベントを使用できることを知っている人はほとんどいないでしょう。 なぜこれが必要なのか、例を挙げて説明したいと思います。



問題文


私たちのサイトはあらゆる種類のポップアップでいっぱいであり、それらはさまざまな場所から呼び出され、製品に関する情報を表示するポップアップ、ログインフォームを含むポップアップ、他の場所から呼び出されることを想像してください。 これを実装する方法に関する最初の考えは、おそらく次のとおりです。

$( '#products .item .info' ).bind( 'click' , function (){

$( this ).parents( '.item' ).eq(0).find( '.float' ).fadeIn(500);

});



$( '#login-link' ).bind( 'click' , function (){

$( '#login-form' ).fadeIn(500);

});



* This source code was highlighted with Source Code Highlighter .





この考えは明らかに間違っており、デザイナーが「0.5秒ではなく、2秒で表示された方が良いと思われる」または「右ではなく左に飛び出すことを意味している」と言ったらすぐにこれを理解できます。あなたはすべての場所を検索して編集する必要があります、あなたはこのいまいましいウィンドウを手に入れます。



2番目のオプション、これを実装する方法は、おそらく次のようになります。

function ShowMe(el) {

el.fadeIn(500);

}



$( '#products .item .info' ).bind( 'click' , function (){

ShowMe($( this ).parents( '.item' ).eq(0).find( '.float' ));

});



$( '#login-link' ).bind( 'click' , function (){

ShowMe($( '#login-form' ));

});



* This source code was highlighted with Source Code Highlighter .





すでに優れていますが、ここでは問題がないわけではありません。 実際には、選択した要素には転送する必要のある機能に関する情報が含まれていないため、自分で要素を突き出す場所を覚えて、コードを常に調べる必要があります。 また、たとえば、すべてのコードを関数でラップして範囲を制限したいので、ポップアップウィンドウをコンテンツのどこかに配置する必要がある場合は、ShowMeなどの関数をグローバルスコープに含める必要があります。



どちらの方法にも共通の問題があります。ウィンドウの外観に加えて、ウィンドウを非表示にするように注意する必要があります。どういうわけか、ウィンドウを閉じる各方法を考慮に入れます（そして、クロス、閉じるボタン、ウィンドウのテキスト内の閉じるリンク、ウィンドウの外側をクリックするなど、好きな方法を考えることができます）。



経験の浅いプログラマーは、おそらく、クラスを作成し、ポップアップウィンドウの種類ごとにそれを継承し、hideメソッドとshowメソッドをオーバーライドする必要があると言うでしょう。 しかし、これをすべて構成し、コードと頭の混乱を避ける別の方法を提案したいと思います。 Habrakatの前に見出しと本文を読んだら（それを読んでいない人もいますか？）、おそらく私が提供したいものをすでに推測しているでしょう。



カスタムイベントを使用する


2つのアプローチを示す小さな例を用意しました。 最初のコードは、イベントを使用せずに、<div id = "not-envents">ブロックにあります。 それぞれ、<div id = "envents">の2番目。

最初の例で見せたかったこと：

  1. 「ロジック」と「プレゼンテーション」と呼ばれるものは混在しており、1か所で何が起こるべきか、どのように行われるべきかが決定されます。
  2. .another-link1（仮想的には別のファイルにある、同じウィンドウを開くだけでよい）を作成する必要がある場合、表示に関与するすべてのコードを繰り返す必要がありました。
  3. テキスト内のウィンドウを直接閉じる「ウィンドウ2」にリンクを作成する必要がある場合、非表示にするコードを繰り返す必要がありました。 そして、これは最も単純なケースであり、すべてがさらに悪化する可能性があります。
2番目の例では、「hidefloat」および「showfloat」カスタムイベントを使用します。 2番目の例で見せたいこと：

  1. .closeボタンの例に示すように、すべてのポップアップに対していくつかの共通要素を選択し、それらのロジックを1か所に記述することができます。
  2. 「ビュー」（ウィンドウを非表示にする方法を示す部分）は、ロジックとは完全に分離されています。 さらに、もちろん、ここでの「プレゼンテーション」という名前は条件付き以上のものです。 非常に頻繁に、ウィンドウが表示されたときにいくつかの追加要素を表示し、非表示になったときに非表示にする必要がある場合があります。
  3. 要素（.link1、.link2、.link3）にかかっているすべてのイベントは、実行する必要があることを明確に示しますが、その方法については何も言いません。
  4. 「ウィンドウ2」のテキスト内のリンクコードは、ウィンドウを非表示にすることだけを示しています。 非表示にする方法が変更された場合、「ウィンドウ2」のリンクを編集する必要はありません。
  5. 最後に、「。closeall」リンクを作成することが可能になります。これは、ウィンドウが非表示になる方法についても何も知りません。 このような単純なページでさえ、最初のオプションに.closeallボタンを作成することは幻想的なものであることがわかります。


当然、私が説明したのは、ユーザーイベントがどのような問題を解決できるかの一例にすぎません。実際、アプリケーションの範囲は1つのポップアップウィンドウに限定されません。


More articles:


All Articles