Смотрите на это:

_{(переизданный от страницы блога с истекшим сроком 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

17-го июня 2008

В целях записи UI jQuery, интегрированного с офлайновой функциональностью Google Gears i’ve играющий с некоторым кодом для опроса относительно состояния сетевого подключения с помощью 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]);
            }
        });
    };
};

можно просмотреть демонстрацию здесь. Усадите свой браузер за работу офлайн и посмотрите что happens†¦. нет, it’s не очень захватывающий.

Триггер и Связывает

, Что является захватывающим, хотя (или по крайней мере что является захватывающим меня) метод, которым состояние передается через приложение. I’ve наткнулся на в основном необсужденный метод реализации pub/sub системы с помощью jQuery’s, инициировали и связывают методы.

демонстрационный код является более тупым, чем это должно быть. Объект определения наличия сети публикует ’status ‘events к документу, который активно прислушивается к ним и в свою очередь публикует события ‘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’s DOM центральные события подхода публикуются к (включенному) элементы DOM. Это может быть объектом окна или объектом документа для общих событий, или можно генерировать объект jQuery использование селектора. Подход i’ve взятый с демонстрацией должен создать почти namespaced подход к определению подписчиков.

элементы DOM, которые должны быть подписчиками, классифицируются просто с “subscriber” и “networkDetection”. Мы можем тогда опубликовать события только к этим элементам (которых существует только один в демонстрации) путем инициирования уведомлять события на [1 124] $(“.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");
        }
    };
});