看看这个：

（根据http://web.archive.org/web上的存档版本，从过期的博客页面http://jamiethompson.co.uk/web/2008/06/17/publish-
subscribe-with-jquery/转载/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]);
            }
        });
    };
};

您可以在此处查看演示。将您的浏览器设置为离线工作，看看会发生什么”。不，这不是很令人兴奋。

Trigger and Bind

令人兴奋的是（或者至少是让我兴奋的）是通过应用程序传递状态的方法。我偶然发现了一种使用 jQuery
的触发器和绑定方法来实现发布/订阅系统的很大程度上未讨论的方法。

演示代码比它需要的更钝。网络检测对象向主动监听它们的文档发布“状态”事件，然后向所有订阅者发布“通知”事件（稍后会详细介绍）。这背后的原因是，在现实世界的应用程序中，可能会有更多的逻辑控制何时以及如何发布“otify”事件。

$(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 元素。这可以是用于一般事件的窗口或文档对象，或者您可以使用选择器生成 jQuery
对象。我在演示中采用的方法是创建一个几乎命名空间的方法来定义订阅者。

将成为订阅者的 DOM 元素简单地分类为“订阅者”和“网络检测”。然后，我们可以通过触发通知事件仅将事件发布到这些元素（演示中只有一个）
$(“.subscriber.networkDetection”)

#notifier 作为订阅者组一部分的
div然后.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");
        }
    };
});

所以，你去吧。这一切都非常冗长，而我的例子完全令人兴奋。它也没有展示你可以用这些方法做的任何有趣的事情，但是如果有人有兴趣挖掘源代码，请随意。所有代码都内联在演示页面的头部