jQueryの柔軟なイベント管理-jquery-behaviorプラグイン

こんにちは、Habr！



私の名前はVyacheslav Grimalskyです。ランディングページデザイナーに取り組んでいます。このページでは、ページをドラッグアンドドロップします。



元々はコンストラクターの一部であったイベントツールについて説明しますが、その後、別のjQueryプラグイン-jquery-behaviorに移動しました。



プラグインはjQuery機能を使用し、次の機能で補完します。

• イベントハンドラーの個別のグループを操作します。 このために、イベントコントローラーが使用されます。
• すべてのコントローラーイベントハンドラーを一覧表示せずに一度に無効にすることができます。
• イベントハンドラーのイベントの追跡。
• それぞれの呼び出しの正確な数を調べることができます。
• 個々のイベントハンドラーの操作、またはコントローラー全体を一度に一時停止できます。
• 特定の要素のイベントハンドラー、特定の名前空間を持つイベントハンドラー、またはすべてのコントローラーイベントハンドラーの完全なリストを取得する機能。

危機にwhatしているものをすぐに示します。

//   . //       ,      . var behavior = $.Behavior(); //   .    ,   jQuery. behavior('body').click(function () {}); behavior(window).on('resize.demo', function () {}); behavior('.top').on('click.demo', '.btn', function () {}); //    ,  . behavior.pause({ types: '.demo' }); //    ,  . behavior.resume({ target: 'span', types: 'click.demo' }); //    ,  . behavior.off();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

イベントコントローラー

 var behavior = $.Behavior();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

イベントコントローラー-イベントハンドラーを追加でき、それらに関するすべての情報を保存するオブジェクト。



イベントハンドラーは削除および一時停止できますが、追加されたもののみです。



これにより、プロジェクトのさまざまな独立した部分のイベントハンドラーを分離し、個別に操作できます。

jQueryスタイルのラッパーの使用

プラグインを使用すると、オブジェクトを操作するラッパーを作成できます。



jQuery：

 $('body').click(function () {}); $(window).on('resize', function () {});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグイン：

 behavior('body').click(function () {}); behavior(window).on('resize', function () {});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、すべての関数とその構文がjQueryからコピーされます。それらの完全なリストです。

1つのトリガーtriggerHandlerオフバインドアンバインドデリゲートアンホバーフォーカスフォーカスフォーカスアウトロードサイズ変更スクロールアンロードクリックdblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave変更選択送信キーダウンキー押下キーアップエラーコンテキストメニュー



イベントで動作するjQueryコードを取得し、$関数を動作に置き換えるか、イベントコントローラーが呼び出されるものであれば何でも実行でき、すべてが動作します。



jQuery：

 $('body').click(function () {}).one('mousemove', function () {}).trigger('click');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグイン：

 behavior('body').click(function () {}).one('mousemove', function () {}).trigger('click');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同時に、この方法で作成されたすべての機能は使用するコントローラーに割り当てられ、コントローラーの他のすべての機能を使用してそれらを操作できます。

イベントハンドラーの追加-behavior.on（）およびbehavior.one（）関数

jQuery関数と同様に、onはイベントハンドラーを追加し、1回だけ実行されるイベントハンドラーを追加します。



構文は次のとおりです。

 behavior.on({ //   target: 'body', // ,     types: 'click.namespace', //        selector: '.btn', //  .     handler: function (event) {}, //   //   throttle: { //  .     _.throttle wait: 1000, leading: true, trailing: true }, after: 1, //  .     _.after log: true //  .  ""  ,   . });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

いくつかの例。

 behavior.on({ target: window, types: 'resize', handler: handlerFn }); //  behavior(window).on('resize', handlerFn);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.on({ target: window, types: 'resize', handler: handlerFn, throttle: { wait: 200, leading: false } }); //  behavior(window).on('resize', _.throttle(handlerFn, 200, { leading: false }));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.on({ target: 'body', types: 'click', selector: '.btn', handler: handlerFn, after: 2 }); //  behavior('body').on('click', '.btn', _.after(2, handlerFn));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

afterおよびthrottleパラメーターで「フル」レコードを使用する場合、これらの関数はプラグインに組み込まれているため、アンダースコアまたはlodashライブラリーは不要です。

イベントの無効化-behavior.off（）関数

1回の呼び出しでコントローラーによって作成されたすべてのイベントハンドラーを無効にできます。

 behavior.off();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

特定の要素または要素のグループのすべてのイベントハンドラーを無効にできます。

 behavior.off({ target: window }); //  behavior(window).off();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.off({ target: $btns }); //  behavior($btns).off();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.off({ target: 'body .btn' }); //  behavior('body .btn').off();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

特定のタイプと名前空間のすべてのイベントハンドラーを無効にできます。

 behavior.off({ types: 'click' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.off({ types: 'click.namespace' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.off({ types: '.namespace1, .namespace2' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.off({ types: 'click.namespace1, .namespace2' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

委任されたイベントを削除できます。

 behavior.off({ target: 'body', types: 'click', selector: '.btn' }); //  behavior('body').off('click', '.btn');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.off({ target: 'body', types: '.namespace', selector: '**' }); //  behavior('body').off('.namespace', '**');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、すべてのハンドラーを参照によって削除します。

 behavior.off({ handler: handlerFunction });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてもちろん、これらすべてを組み合わせることができます。

 behavior.off({ target: 'body', types: '.namespace', handler: handlerFunction1 }); //  behavior('body').off('.namespace', handlerFunction1);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.off({ target: 'body', handler: handlerFunction1 });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ハンドラーの中断と再開-behavior.pause（）およびbehavior.resume（）関数

引数はbehavior.off（）関数と同じです。



1回の呼び出しでコントローラーによって作成されたすべてのイベントハンドラーを一時停止します。

 behavior.pause();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、それらを仕事に戻す：

 behavior.resume();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、すべての例はbehavior.off（）に似ています。

 behavior.pause({ target: window });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.pause({ types: 'click.namespace1, .namespace2' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.pause({ target: 'body', types: 'click', selector: '.btn' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.pause({ target: 'body', types: '.namespace', handler: handlerFunction1 });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コントローラーの一時停止と再開-behavior.start（）およびbehavior.stop（）関数

これらの関数はbehavior.pause（）およびbehavior.resume（）に似ていますが、いくつかの違いがあります。



特定のイベントハンドラーのレベルではなく、コントローラーレベルで動作します。つまり、イベントハンドラーではなくコントローラー自体を停止します。 コントローラー全体が停止するため、behavior.stop（）の実行後に追加されたイベントハンドラーは、behavior.start（）関数でコントローラーを再開するまで機能しません。



コントローラーを作成すると、behavior.start（）も呼び出され、破棄されるとbehavior.stop（）が呼び出されます。

コントローラーイベント

コントローラーを作成するときに、onStart、onStop、およびonFireパラメーターを指定できます。

 var behavior = $.Behavior({ onStart: function (data) {}, onStop: function (data) {}, onFire: function (event) {} });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

onFire関数は、コントローラーのイベントハンドラーが起動するたびに呼び出されます。 引数とコンテキストは、イベントハンドラーと同じになります。



onStart関数は、behaviour.start（）が呼び出されたときに実行されます。 最初の引数を取る場合があります。



論理的なonStop関数は、behaviour.stop（）が呼び出されたときに実行され、最初の引数を取ることもできます。



イベントコントローラーが最初にオフになり、onStopが呼び出されず、behaviour.start（）を呼び出すまでイベントが実行されないようにするには、コントローラーの作成時にアクティブフラグにfalse値を指定する必要があります。

 var behavior = $.Behavior({ active: false });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コントローラーの破壊-behavior.destroy（）

コントローラが不要になった場合、イベントをオフにして、すべてのメモリをクリアする必要があります。この機能を使用する価値があります。

複数のコントローラーを使用する

プロジェクト全体で1つのコントローラーを使用することも、イベントを異なるコントローラーに効果的に分割することもできます。



良い例は、プラグインを使用したDrag'n'Dropの実装です。



1つのコントローラーは「スリープ」状態イベントであり、もう1つはドラッグアンドドロップイベントであり、単純に切り替えます。







JSFiddleデモ： http ://jsfiddle.net/fm22ptxv/

大きな赤いピクセルがマウスでドラッグされます。

デバッグツール

プラグインには、ハンドラーに何が起こるかを理解するのに役立つデバッグツールが組み込まれています。 どれがまだアクティブで、どれが呼び出されており、どれが非アクティブで、いくつがまだ生きていますか。

コントローラー情報の取得-behavior.data（）

コントローラーに関するすべての必要な情報（現在の状態、イベントハンドラーのリスト）を返します。

 { log: false, namespace: "bhvr", onFire: null, onStart: null, onStop: null, records: Array }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

レコード配列のオブジェクトがどのようなものかを理解することが重要です。



クラス.btn1と.btn2の2つのボタンがあり、それらに2つの同一のイベントハンドラーを割り当てるとします。

 behavior('.btn1, .btn2').on('mousedown mouseup', handler);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、次のように記述したように、4つの「低レベル」イベントハンドラーが追加されます。

 behavior('.btn1').on('mousedown', handler); behavior('.btn1').on('mouseup', handler); behavior('.btn2').on('mousedown', handler); behavior('.btn2').on('mouseup', handler);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、recordsフィールドには、宣言したフォームのハンドラーに関する情報が含まれます。



この例では、これは次のとおりです。

 { targets: JQuery[], //  $('.btn1, .btn2') types: 'mousedown mouseup', //      handler: function (event) {}, //   selector: undefined, //     calls: 0, //    handler bindings: Array //   " " }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、レコードからのバインディングにはすでに4つの類似したオブジェクトがあります。

 { target: JQuery[], //  $('.btn1') type: 'mouseup', //   namespaces: string[], //    handler: function (event) {}, //   selector: undefined, //     calls: 0, //    handler paused: false //   }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

レコード内のオブジェクトの呼び出しの数は、すべてのバインディングの呼び出しの数の合計に常に等しくなります。



また、バインディングではそれらは異なり、別々に考慮されます。これは、どの特定のイベントハンドラが呼び出され、どの要素で起動されるかを調べる必要がある場合に便利です。

イベントハンドラーのリスト-behavior.filter（）関数

すべての「低レベル」ハンドラーを検索し、それらのリストを返します。



この関数の構文は、behavior.off（）、behavior.pause（）、behavior.resume（）と同じです。



ハンドラーの完全なリストを取得します。

 behavior.filter();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オブジェクトのイベントハンドラーの取得：

 behavior.filter({ target: window });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

などなど。

 behavior.filter({ types: 'click.namespace1, .namespace2' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.filter({ target: 'body', types: 'click', selector: '.btn' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 behavior.filter({ target: 'body', types: '.namespace', handler: handlerFunction1 });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

イベントログ

実行中のイベントを追跡しておくと便利な場合があります。



コントローラーには組み込みのログメカニズムがあり、イベントハンドラーの各実行、およびコントローラー自体の停止と継続に関する情報（behaviour.stop（）およびbehavior.start（）関数）を表示します。



イベントコントローラーがコンソールに発生するすべての情報を出力するには、コントローラーの作成時に値trueでログフラグを指定するだけで十分です。

 var behavior = $.Behavior({ log: true });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コントローラの作成後にログを有効にすることもできます。

 behavior.logOn();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のようにログをオフにできます。

 behavior.logOff();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

独自のログハンドラを割り当てることができます。コンソールにメッセージを表示する代わりに、必要な処理を実行できます。



これを行うには、コントローラーを作成するときに、logFn関数を指定する必要があります。

 var behavior = $.Behavior({ logFn: function (type, behavior, event, data) {} });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

type引数には、ログのタイプ（開始、停止、起動）が含まれます。 動作引数には、コントローラー自体への参照が含まれています。 次に、イベントハンドラーに渡される引数があります。これらはイベントとデータです。 データ引数が欠落している可能性があります。

テスト中

プラグインをテストするために、 ネイティブのjQueryイベントテストを実施しました。



同時に、削除されていないテストでいくつかのイベントハンドラが見つかりましたが、テストでこれを監視しようとします。 これを修正する私のコミットはjQueryで受け入れられました 。



テストは、機能、およびネイティブテストの影響を受けない状況についても作成されました。

おわりに

プラグインの最初のバージョンは、約1年半前に作成されました。 それ以来、プラグインは現在の形になるまで何度も書き直され、修正されています。



この間ずっと、私は開発に積極的に使用してきましたが、実際には非常に便利です。



コメント、コメント、提案をお待ちしております。



githubへのリンク： https : //github.com/grimalschi/jquery-behavior



どうもありがとう！