30

イベント駆動型アーキテクチャの jQuery プラグインはありますか?

ステップ 1: 購読する

代替テキスト
サブスクライバーは途中でイベント ハンドラーにサブスクライブし、コールバック メソッドと、リッスンしているイベントの名前を渡します...

つまり、2 つの緑のサブスクライバーが p0 イベントをリッスンします。青のサブスクライバーは、p1 イベントをリッスンします。

ステップ 2: p0 イベントは、別のコンポーネントによってイベント ハンドラーに対して起動されます。

代替テキスト

  1. p0 イベントがイベント ハンドラーに対して発生します。
  2. イベント ハンドラーはサブスクライバーにイベントを通知し、ステップ 1: サブスクライブでサブスクライブしたときに指定したコールバック メソッドを呼び出します。

blue サブスクライバは p0 イベントをリッスンしていないため、通知されないことに注意してください。

ステップ 3: p1 イベントがコンポーネントからイベント ハンドラーに送信されます。

代替テキスト

p1 イベントは別のコンポーネントによって発生します

青色のサブスクライバーがコールバックを介してイベントを受信し、他の 2 つの緑色のサブスクライバーはイベントを受信しないことを除いて、前と同じです。

Flickrのleeand00による画像

見つけられないようですが、Javascript / jqueryで別の名前を付けているだけだと思います

また、このパターンに名前はありますか？これは単なる基本的なパブリッシャー/サブスクライバーではないため、別の名前を付ける必要があると思います。

4

7 に答える 7

48

これを行うには、おそらくプラグインは必要ありません。まず第一に、DOM 自体は完全にイベント駆動型です。イベント委任を使用して、ルート ノードですべてのイベントをリッスンできます (jQuery live が使用する手法)。DOM に関連しない可能性のあるカスタム イベントも処理するには、単純な古い JavaScript オブジェクトを使用してジョブを実行できます。たった 1 行のコードで MooTools の中央イベント ディスパッチャを作成する方法についてのブログ記事を書きました。

var EventBus = new Class({Implements: Events});

jQueryでも同様に簡単に実行できます。すべてのイベントの中央ブローカーとして機能する通常の JavaScript オブジェクトを使用します。すべてのクライアント オブジェクトは、このオブジェクトのイベントを発行および購読できます。この関連する質問を参照してください。

var EventManager = {
    subscribe: function(event, fn) {
        $(this).bind(event, fn);
    },
    unsubscribe: function(event, fn) {
        $(this).unbind(event, fn);
    },
    publish: function(event) {
        $(this).trigger(event);
    }
};

// Your code can publish and subscribe to events as:
EventManager.subscribe("tabClicked", function() {
    // do something
});

EventManager.publish("tabClicked");

EventManager.unsubscribe("tabClicked");

または、jQuery を公開することに関心がない場合は、単に空のオブジェクトを使用して、jQuery でラップされたオブジェクトに対してbindand を直接呼び出します。trigger

var EventManager = {};

$(EventManager).bind("tabClicked", function() {
    // do something
});

$(EventManager).trigger("tabClicked");

$(EventManager).unbind("tabClicked");

ラッパーは、基礎となる jQuery ライブラリを非表示にするためだけに存在するため、必要に応じて後で実装を置き換えることができます。

これは基本的にPublish/SubscribeまたはObserver パターンであり、いくつかの良い例は、Cocoa のNSNotificationCenterクラス、GWT コミュニティで Ray Ryan によって普及されたEventBusパターン、およびその他のいくつかです。

于 2010-06-03T20:54:03.313 に答える
5

jQueryプラグインではありませんが、TwitterはFlightと呼ばれるJavaScriptフレームワークをリリースしました。これにより、イベントを介して通信するコンポーネントベースのアーキテクチャを作成できます。

Flightは、Twitterの軽量なコンポーネントベースのJavaScriptフレームワークです。MVCパターンに基づく他のJavaScriptフレームワークとは異なり、Flightは動作をDOMノードに直接マップします。

Flightは、リクエストのルーティング方法や、使用するテンプレートライブラリに依存しません。フライトは、関心の分離を厳密に実施します。飛行中のコンポーネントは互いに直接かみ合いません。

それらはイベントとしてアクションをブロードキャストし、それらのイベントにサブスクライブされたコンポーネントはそれらに基づいてアクションを実行できます。Flightを利用するには、AMDローダーとともにES5-shimとjQueryが必要です。

Flight-Twitterの軽量でコンポーネントベースのJavaScriptフレームワーク

于 2013-02-06T05:58:30.733 に答える
2

これは軽量のメッセージ パッシング フレームワークとして機能しますか?

function MyConstructor() {
    this.MessageQueues = {};

    this.PostMessage = function (Subject) {
        var Queue = this.MessageQueues[Subject];
        if (Queue) return function() {
                                        var i = Queue.length - 1;
                                        do Queue[i]();
                                        while (i--);
                                    }
        }

    this.Listen = function (Subject, Listener) {
        var Queue = this.MessageQueues[Subject] || [];
        (this.MessageQueues[Subject] = Queue).push(Listener);
    }
}

次に、次のことができます。

var myInstance = new MyConstructor();
myInstance.Listen("some message", callback());
myInstance.Listen("some other message", anotherCallback());
myInstance.Listen("some message", yesAnotherCallback());

以降：

myInstance.PostMessage("some message");

キューをディスパッチします

于 2010-06-28T16:12:34.623 に答える
2

実際には次の 2 つがあります。

于 2010-06-03T15:27:59.710 に答える
2

これは、ダミーの jQuery ノードをディスパッチャとして使用して簡単に実現できます。

var someModule = (function ($) {

    var dispatcher = $("<div>");

    function init () {
        _doSomething();
    }

    /**
        @private
    */
    function _doSomething () {
        dispatcher.triggerHandler("SOME_CUSTOM_EVENT", [{someEventProperty: 1337}]);
    }

    return {
        dispatcher: dispatcher,
        init: init
    }

}(jQuery));



var someOtherModule = (function ($) {

    function init () {
        someModule.dispatcher.bind("SOME_CUSTOM_EVENT", _handleSomeEvent)
    }

    /**
        @private
    */
    function _handleSomeEvent (e, extra) {
        console.log(extra.someEventProperty) //1337
    }

    return {
        init: init
    }

}(jQuery));

$(function () {
    someOtherModule.init();
    someModule.init();
})
于 2012-01-02T08:51:38.857 に答える
1

パブリッシュ/サブスクライブ サービスにOpenAjax Hubを使用しました。これは jQuery プラグインではなく、スタンドアロンの JavaScript モジュールです。SourceForge から参照実装をダウンロードして使用できます。階層的なトピックの命名と、ワイルドカード表記を使用した複数のトピックへのサブスクライブのサポートが気に入っています。

于 2010-06-04T02:59:20.630 に答える