Echa un vistazo a esto:
(reimpreso de los vencidos de la página del blog http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/ basado en la versión archivada en http://web.archive.org/web/20130120010146/http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/)
Publicar / Suscribir Con jQuery
17 de junio de 2008
Con miras a la elaboración de una interfaz de usuario jQuery integrado con la funcionalidad sin conexión de Google Gears he estado jugando con el código de encuesta para el estado de conexión de red usando jQuery.
La Red De Detección De Objetos
La premisa básica es muy simple. Creamos una instancia de una red de detección de objeto en el que se encuesta una dirección URL a intervalos regulares. En caso de que estas peticiones HTTP fallar podemos asumir que la conectividad de red que se ha perdido, o el servidor es simplemente inalcanzable en el tiempo actual.
$.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]);
}
});
};
};
Usted puede ver la demo aquí. Configurar su navegador para trabajar sin conexión y ver qué pasa.... no, no es muy emocionante.
Gatillo y se Unen
¿Cuál es emocionante, aunque (o al menos lo que es emocionante mí) es el método por el cual el estado obtiene retransmite a través de la aplicación. Me he tropezado con una gran parte de la onu-se discutió el método de la implementación de un pub/sub sistema usando jQuery gatillo y los métodos de enlace.
La demo código es el más obtuso de lo que necesitan ser. La red de detección de objetos publica 'status 'eventos para el documento en el que se escucha activamente para ellos y, a su vez publica 'notificar' eventos para todos los suscriptores (más de los que más tarde). El razonamiento detrás de esto es que en una aplicación real lo más probable era que algo más de la lógica de control de cuándo y cómo el 'notificar' eventos publicados.
$(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
*/
});
Debido a que jQuery DOM enfoque centrado en los eventos se publican a (activa) de elementos DOM. Esta puede ser la ventana o el objeto del documento para eventos generales o puede generar un objeto jQuery mediante un selector. El enfoque que he tomado con la demo es para crear una casi nombres de espacios para la definición de los suscriptores.
Elementos del DOM que serán abonados se clasifican simplemente con el "suscriptor" y "networkDetection". Entonces podemos publicar eventos sólo a estos elementos (de los que sólo hay uno en la demo) mediante la activación de una notificación de eventos en $(".subscriber.networkDetection")
La #notifier div, que es parte de la .subscriber.networkDetection grupo de suscriptores, a continuación, tiene una función anónima vinculada a ella, actuando efectivamente como oyente.
$('#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");
}
};
});
Así, hay que ir. Es todo muy detallado, y mi ejemplo no es del todo emocionante. Asimismo, no un escaparate de todo lo interesante que se podría hacer con estos métodos, pero si alguien está interesado en absoluto a cavar a través de la fuente de sentirse libre. Todo el código está en línea en el head de la página de demostración
