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

零下一度
リリース: 2017-06-19 10:52:29
オリジナル
1345 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート