इस पर एक नजर डालिए:
(समय सीमा समाप्त ब्लॉग पेज से पुनर्प्रकाशित 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
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 के ट्रिगर और बाइंड विधियों का उपयोग करते हुए एक पब / उप प्रणाली को लागू करने की एक काफी हद तक बिना चर्चा की पद्धति पर ठोकर खाई है।
डेमो कोड होना चाहिए की तुलना में अधिक obtuse है। नेटवर्क डिटेक्शन ऑब्जेक्ट document स्टेटस ’ईवेंट्स को उस डॉक्यूमेंट को प्रकाशित करता है जो सक्रिय रूप से उनके लिए सुनता है और बदले में सभी सब्सक्राइबरों को 'नोटिफाई’ ईवेंट्स प्रकाशित करता है (बाद में उन पर)। इसके पीछे तर्क यह है कि एक वास्तविक विश्व अनुप्रयोग में 'सूचित' घटनाओं को प्रकाशित और कब प्रकाशित किया जाता है, इसे नियंत्रित करने में शायद कुछ और तर्क होंगे।
$(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 तत्व जो सब्सक्राइबर होने हैं, उन्हें केवल "सब्सक्राइबर" और "networkDetection" के साथ वर्गीकृत किया गया है। हम तब केवल इन तत्वों (जिनमें से डेमो में केवल एक है) पर घटनाओं को प्रकाशित कर सकते हैं, जिससे एक सूचित घटना शुरू हो सकती है$(“.subscriber.networkDetection”)
#notifierDiv जो का हिस्सा है .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");
}
};
});
तो यह तूम गए वहाँ। यह सब बहुत अच्छा है और मेरा उदाहरण बिल्कुल रोमांचक नहीं है। यह भी दिलचस्प नहीं है कि आप इन विधियों के साथ क्या कर सकते हैं, लेकिन अगर किसी को भी स्रोत के माध्यम से खुदाई करने में दिलचस्पी है, तो वह कुछ भी नहीं दिखा सकता है। सभी कोड डेमो पेज के प्रमुख में इनलाइन है