jQuery のカスタム バインディングに関する簡単な説明

jqueryカスタム バインディング

まず、jQuery のカスタム バインディングの使用方法を見てみましょう。bind または live を使用して event をサブスクライブできます (もちろん、1.7 以降でも使用できます)。次のようにコーディングします。

$("#myElement").bind('customEventName',function(e){ ... });
$(".elementsClass").live('customEventName',function(e){ ... });

次に、次のようにイベントをトリガーします:

$("#myelement").trigger('customEventName');

または、カスタム イベントに追加のパラメーターを追加することもできます。たとえば:

$("#myelement").bind('customEventName',function(e,data){ if(data.custom) ... });
$("#myelement").trigger('customEventName',{ custom: false });

魔法のアップグレード

いわゆるマジック アップグレードとは、実際には、プログラム全体のすべてのカスタム イベントを自動的に登録して jQuery にバインドし、実行すると、そのイベントを登録するすべてのモジュールが実行されることを意味します。たとえば、モジュール User.js で定義された User

Update メソッド

と、Blogs.js で定義された BlogUpdate メソッド は、両方ともブログを公開するときに実行する必要がある関数 関数 を定義し、全体で統一されたイベント名を登録できます。プロセス (例: BlogAdded) を jQuery で指定されたコンテナ (例: document) にバインドし、ブログの公開に成功した後、$(document).trigger("BlodAdded") を実行すればOKです。

以下に一般的なサンプル コードを示します:

    var components = [User, Blog, Group, Friend, Topic, Photo];
var eventTypes = ["AddComplete", "UpdateComplete", "DeleteComplete", "LockComplete", "UnLockComplete"];
      $.each(components, function(i,component) {
        $.each(eventTypes, function(i,eventType) {
var handler = component[eventType];
if (handler) $(document).bind(eventType, handler);
        });
      })

次に、各 js モジュール

installation によって定義されるコードは次の形式になります:

    User= {
      AddComplete: function(e, data) {
//...
      },
      UpdateComplete: function(e, data) {
//...
      }
    }

こうして、どこにいても、必要に応じて、jQuery を使用してイベントをトリガーできます:

$(document).trigger("UpdateComplete", data);

このメソッドを通じて、モジュールのメソッドが 1 つのイベントのみを登録できることがわかります。 1 つのメソッドを使用して複数のイベント トリガーを登録するには、次のメソッドを使用できます:

    var blogController = {
      blogAddOrUpdateComplete: function() {
//...
      }
    }
    blogController.blogAddComplete = blogController.blogUpdateComplete = blogController.blogAddOrUpdateComplete;

最後の注意: この記事では、単純な例のみを示しています。異なるモジュール、たとえば、User.js の AddComplete と Blog.js の AddComplete はまったく関連していない可能性があります。つまり、現時点では、このイベントは一律に処理されるべきではありません。ただし、検出対象が同じであれば、User モジュールはアカウントを無効にした後の操作を処理する必要があり、Blog モジュールも必要な場合があるため、汎用的に使用できる DisableUserComplete などを使用できます。アカウントを無効にした後の操作を処理します。

結論

おじさんのメモ: 日々の業務における様々なヒントや資料（テクノロジーを含みますが、これに限定されません）を記録することを目的としています。 役に立った場合は、おじさんに書く動機を与えるために推奨してください。

以上がjQuery のカスタム バインディングに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。