এক নজর দেখে নাও:
(মেয়াদোত্তীর্ণ ব্লগ পৃষ্ঠা থেকে পুনরায় মুদ্রিত 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
গুগল গিয়ার্সের অফলাইন কার্যকারিতার সাথে সংহত জ্যাকুয়ারি ইউআই লেখার দৃশ্যে আমি jQuery ব্যবহার করে নেটওয়ার্ক সংযোগের স্থিতির জন্য জরিপ করতে কিছু কোড দিয়ে চেষ্টা করছি।
নেটওয়ার্ক সনাক্তকরণ অবজেক্ট
প্রাথমিক ভিত্তি খুব সহজ। আমরা একটি নেটওয়ার্ক সনাক্তকরণ অবজেক্টের একটি উদাহরণ তৈরি করি যা নিয়মিত বিরতিতে কোনও ইউআরএল পোল করে। এই এইচটিটিপি অনুরোধগুলি যদি ব্যর্থ হয় তবে আমরা ধরে নিতে পারি যে নেটওয়ার্ক সংযোগটি হারিয়ে গেছে, বা বর্তমান সময়ে সার্ভারটি কেবল অ্যাক্সেসযোগ্য।
$.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 এর ট্রিগার এবং বাইন্ড পদ্ধতি ব্যবহার করে একটি পাব / সাব সিস্টেম প্রয়োগের একটি বৃহত আলোচিত-আলোচিত পদ্ধতিতে হোঁচট খেয়েছি।
ডেমো কোডটি যতটা প্রয়োজন তার চেয়ে বেশি অবচেতন। নেটওয়ার্ক সনাক্তকরণ অবজেক্ট দস্তাবেজগুলিতে 'স্থিতি' ইভেন্টগুলি প্রকাশ করে যা তাদের জন্য সক্রিয়ভাবে শ্রবণ করে এবং ফলস্বরূপ সমস্ত গ্রাহকদের কাছে 'বিজ্ঞপ্তি' ইভেন্টগুলি প্রকাশ করে (পরবর্তীতে তাদের আরও কিছু)। এর পিছনে যুক্তিটি হ'ল সত্যিকারের বিশ্ব প্রয়োগে 'নোটিফাই' ইভেন্টগুলি কখন এবং কীভাবে প্রকাশিত হবে সম্ভবত আরও কিছু যুক্তি নিয়ন্ত্রণ করতে পারে।
$(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”)
#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");
}
};
});
সুতরাং, আপনি সেখানে যান। এটি সবই সুন্দর ভার্জোজ এবং আমার উদাহরণটি মোটেও আকর্ষণীয় নয়। এটি এই পদ্ধতিগুলির সাথে আপনি করতে পারেন এমন আকর্ষণীয় কিছুও প্রদর্শন করে না তবে উত্সটি খনন করতে আগ্রহী যদি কেউ নির্দ্বিধায় থাকেন। সমস্ত কোড ডেমো পৃষ্ঠার শিরোনামে ইনলাইন