質問

jqueryでカスタムイベントハンドリングを実装するのに最適な方法について、いくつかの意見を探しています。クリックなどのdom要素からイベントをフックする方法は知っていますが、私はいくつかのプレビュー機能を処理するための小さなjavascriptライブラリ/プラグインを構築しています。

私は、ルールとデータ/ユーザー入力のセットから、dom要素内のテキストを更新するスクリプトを実行しました。必要なのは、このスクリプトが必要なテキストを生成するのをどうにかして観察するための良いパターンです。

では、どうすればいいのでしょうか？ユーザーイベントを発生/処理するためのjqueryの組み込み機能を見落としていたのでしょうか、それともjqueryのプラグインが必要なのでしょうか？それともjqueryのプラグインが必要でしょうか？

どのように解決するのですか？

これを見てください。

<サブ (期限切れブログページより転載 http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/ にてアーカイブされたものをベースに http://web.archive.org/web/20130120010146/http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/ )

jQueryでパブリッシュ/サブスクライブする

2008年6月17日

Google Gears のオフライン機能と統合した jQuery UI を書くために、jQuery を使ってネットワークの接続状態をポーリングするコードを考えてみました。

ネットワーク検出オブジェクト

大前提はとてもシンプルです。ネットワーク検出オブジェクトのインスタンスを作成し、一定の間隔でURLをポーリングします。これらの HTTP リクエストが失敗した場合、ネットワーク接続が失われたか、あるいは単に現在の時刻にサーバーに到達できないだけであると考えることができます。

$.networkDetection = function(url,interval){
    var url = url;
    var interval = interval;
    online = false;
    this.StartPolling = function(){
        this.StopPolling();
        this.timer = setInterval(poll, interval);
    };
    this.StopPolling = function(){
        clearInterval(this.timer);
    };
    this.setPollInterval= function(i) {
        interval = i;
    };
    this.getOnlineStatus = function(){
        return online;
    };
    function poll() {
        $.ajax({
            type: "POST",
            url: url,
            dataType: "text",
            error: function(){
                online = false;
                $(document).trigger('status.networkDetection',[false]);
            },
            success: function(){
                online = true;
                $(document).trigger('status.networkDetection',[true]);
            }
        });
    };
};

ここでデモを見ることができます。ブラウザをオフラインで動作するように設定して、何が起こるか見てみましょう...いや、あまり刺激的ではありませんね。

トリガーとバインド

しかし、エキサイティングなのは（少なくとも私がエキサイティングなのは）、アプリケーションを通じてステータスをリレーする方法です。私は、jQueryのトリガーとバインドメソッドを使ってPub/Subシステムを実装する、ほとんど議論されていない方法を偶然発見した。

デモのコードは必要以上にわかりにくいです。ネットワーク検出オブジェクトは 'status' イベントをドキュメントに発行し、ドキュメントがそれを積極的にリッスンし、次に 'notify' イベントをすべてのサブスクライバーに発行します（これらについては後で詳しく説明します）。この背後にある理由は、実際のアプリケーションでは、いつ、どのように「notify」イベントを発行するかを制御するロジックがおそらくもっとあるはずだからです。

$(document).bind("status.networkDetection", function(e, status){
    // subscribers can be namespaced with multiple classes
    subscribers = $('.subscriber.networkDetection');
    // publish notify.networkDetection even to subscribers
    subscribers.trigger("notify.networkDetection", [status])
    /*
    other logic based on network connectivity could go here
    use google gears offline storage etc
    maybe trigger some other events
    */
});

jQueryはDOMを中心としたアプローチをとっているため、イベントはDOM要素に発行されます（トリガー）。一般的なイベントであればwindowやdocumentオブジェクト、セレクタを使用すればjQueryオブジェクトを生成することもできます。このデモでは、サブスクライバを定義するために、ほとんど名前空間的なアプローチを作成することにしました。

購読者となるDOM要素は、単に「subscriber」と「networkDetection」でクラス分けされています。そして、これらの要素（デモでは1つだけ）に対してのみ、イベントを発行することができます。 $(“.subscriber.networkDetection”)

は #notifier の一部である .subscriber.networkDetection のグループには匿名関数がバインドされ、効果的にリスナーとして動作します。

$('#notifier').bind("notify.networkDetection",function(e, online){
    // the following simply demonstrates
    notifier = $(this);
    if(online){
        if (!notifier.hasClass("online")){
            $(this)
                .addClass("online")
                .removeClass("offline")
                .text("ONLINE");
        }
    }else{
        if (!notifier.hasClass("offline")){
            $(this)
                .addClass("offline")
                .removeClass("online")
                .text("OFFLINE");
        }
    };
});

というわけで、お待たせしました。かなり冗長で、私の例はまったく刺激的ではありません。また、これらのメソッドを使って何か面白いことができるわけでもないのですが、もしソースを読んでみたいという人がいれば、遠慮なくどうぞ。すべてのコードは、デモ・ページの先頭にあるインラインにあります。