🎒 👨🏼‍💼 📼 जटिल AJAX साइटों को बनाने के लिए 6 युक्तियाँ 🤛🏻 🚣 👩🏽‍🤝‍👨🏼

एजेक्स का उपयोग करने के कई फायदे हम सभी जानते हैं: उपयोगकर्ताओं को लोड करने के लिए एक नए पृष्ठ की प्रतीक्षा करने की आवश्यकता नहीं है, पृष्ठभूमि में क्रियाएं की जाती हैं, जिसके परिणामस्वरूप बहुत अधिक गतिशील उपयोगकर्ता अनुभव प्रदान किया जा सकता है। विचार सरल प्रतीत होते हैं, लेकिन एक जटिल AJAX वेब एप्लिकेशन बनाना काफी कठिन है। मैंने अपना ब्लॉग AJAX के आधार पर बनाया, मेरे पास कुछ सुझाव हैं और मैं अपना अनुभव आपके साथ साझा करना चाहता हूं। मुझे आशा है कि मैं भविष्य में कुछ समस्याओं से छुटकारा पाने में आपकी मदद कर सकता हूँ!

ईवेंट प्रतिनिधिमंडल का उपयोग करें

AJAX साइटों की मुख्य विशिष्ट विशेषता इवेंट डेलिगेशन का उपयोग है। आपको यह नहीं समझना चाहिए कि पृष्ठ पर एक तत्व मौजूद है (क्योंकि यह AJAX के माध्यम से डाला गया हो सकता है), आपको कभी भी इवेंट श्रोताओं (तत्वों) को तत्वों (document.body को छोड़कर) को सीधे असाइन करने का प्रयास नहीं करना चाहिए। इसके बजाय, सबसे अच्छा समाधान इवेंट डेलिगेशन का उपयोग करना है। यहाँ jQuery के साथ प्रतिनिधिमंडल का उपयोग करने का एक बहुत ही सरल उदाहरण है:

// Add event listener to the body because it is a constant jQuery("body").on("click", "a", function(event) { event.preventDefault(); // Trigger the XHR to load the page content // ... // Update the History with pushState // ... // Other tasks // ... });

अपनी साइट के निर्माण के दौरान, मैंने अपना कोड ऐसा लिखा था जैसे कि कोई तत्व <body> मौजूद नहीं है। परिणामस्वरूप, मुझे पेजयल AJAX नेविगेशन को लागू करने में 30 मिनट से भी कम समय लगा। इवेंट डेलिगेशन AJAX पेज लोड करने में सक्षम बनाता है।

सिग्नल इवेंट्स के लिए पब / सब का उपयोग करें

प्रति से। - सिग्नल इवेंट्स, उदाहरण के लिए, एक लिंक पर क्लिक करें।

प्रकाशन और सदस्यता को लागू करने से आपके आवेदन को अधिक शक्ति मिलती है। यदि आप पब / उप से परिचित नहीं हैं, तो कल्पना करें कि रेडियो कैसे काम करता है: रेडियो प्रसारण ( प्रकाशित ) करता है और यह नहीं जानता कि कौन इसे सुन रहा है। श्रोता ( सदस्यता ) सुन सकते हैं, जिसका स्टेशन से कोई संबंध नहीं है।

मैं अपनी साइट से एक उदाहरण दिखाऊंगा कि आप पब / उप का उपयोग क्यों और कैसे कर सकते हैं। किसी भी लेख के लिए, मुझे लोकप्रिय सामाजिक नेटवर्क का पहला, डाउनलोड विजेट्स चाहिए और दूसरा, रेटिंग विजेट दिखाएं ताकि उपयोगकर्ता लेख की उपयोगिता का मूल्यांकन कर सकें। एक अधिक स्थैतिक साइट में, आप बस इन विजेट्स को डोमकॉन्टलेंटेड में बनाने के लिए कोड चलाएंगे । एक जटिल AJAX साइट पर, आपको कई बार इन कार्यों को करने की आवश्यकता हो सकती है, इसलिए हमें इन विजेट को पुनः बनाने के लिए पृष्ठ को बदलने के लिए एक संकेत की आवश्यकता होती है।

 // In the method where we do the AJAX request for new page content.... jQuery.ajax({ url: event.target.href }).done(function(data) { // Place the content in the page // ... // Send a pub/sub signal that the page is ready so that widgets can be created publish("/page/loaded", data); // Arguments are the channel name and data }); // ... Elsewhere, where the we set up the social widgets.... subscribe("/page/loaded", function(data) { // Set up the widgets! createSocialWidgets(data); // Fade in the widgets // ... }); // ... Elsewhere, where the we set up the rating widgets.... subscribe("/page/loaded", function(data) { // Set up the widgets! createStarRatingWidget(data); // Fade in the widget // ... });

पब / उप के बारे में अच्छी बात यह है कि हमारे जावास्क्रिप्ट मॉड्यूल AJAX के साथ भागों से अलग हैं और हमें भारी कॉलबैक से नहीं निपटना है। publish करने के publish एक कॉल और हम किसी भी मॉड्यूल को इस घटना की subscribe और प्रतिक्रिया देने की अनुमति देते हैं!

एकल पुशस्टैट प्रबंधक का उपयोग करें

जटिल AJAX साइटें केवल नई सामग्री अपलोड नहीं करती हैं, वे HTML5 इतिहास एपीआई का उपयोग करके URL भी बदलती हैं।
Pjax इतिहास के लिए लोकप्रिय jQuery प्लगइन।

AJAX पेज डाउनलोड के साथ अपने ब्राउज़िंग इतिहास को सिंक में रखना महत्वपूर्ण है ताकि उपयोगकर्ता दोस्तों के साथ वर्तमान पृष्ठ के URL को अपडेट, बुकमार्क या साझा कर सकें। यह भी सुनिश्चित करेगा कि ब्राउज़र में बटन आगे और पीछे सही तरीके से काम करें!

स्थायी स्थान पर सूचनाएं पोस्ट करें

उपयोगकर्ताओं के लिए संभावित समस्याओं में से एक, वे ब्राउज़र लाइन में डाउनलोड स्थिति नहीं देखते हैं, इसे पृष्ठ पर एक विशिष्ट स्थान पर एक अधिसूचना (स्पिनर) रखकर रोका जा सकता है। यह महत्वपूर्ण है कि उपयोगकर्ता हमेशा जानते हैं कि प्रसंस्करण कब होता है, और यह विशेष रूप से महत्वपूर्ण है जब सामग्री को गतिशील रूप से लोड और प्रतिपादन किया जाता है!

URL द्वारा कैश क्वेरी परिणाम

वेब के साथ, आप अपनी आवश्यकता से अधिक अनुरोध नहीं चाहते हैं, और जब आप पृष्ठ को पूरी तरह से अनुरोध करते हैं तो यह विशेष रूप से सच है। AJAX साइट के लिए कैशिंग सिस्टम बनाना (आमतौर पर) आपके विचार से बहुत आसान है:

 var cache = {}; // ... // ... within the AJAX callback cache[url] = data; // ... // ... within the click callback that would set forth a request if(cache[url]) { // Explicitly call the callback, passing it the cached page data return successCallback(cache[url]); } else { // ... do all of the AJAX request and callback stuff }

यदि उपयोगकर्ता कई बार लिंक पर क्लिक करता है, तो इस कैश का उपयोग नहीं किया जाएगा, लेकिन यदि उपयोगकर्ता बटन को आगे और पीछे क्लिक करता है तो इसका उपयोग किया जाएगा। आपका सर्वर और उपयोगकर्ता क्लाइंट-साइड कैशिंग के लिए आभारी होंगे!

जब AJAX का उपयोग नहीं करना है

हर पेज को AJAX के माध्यम से लोड करने की आवश्यकता नहीं है, और यह बहुत महत्वपूर्ण है कि डेवलपर्स निर्धारित कर सकते हैं कि AJAX का उपयोग करते समय समस्याग्रस्त हो। कई मामलों में, फॉर्म में परिणाम कैश्ड या गतिशील रूप से लाने की आवश्यकता नहीं होती है। ऐसे परिदृश्य हो सकते हैं जिनमें आपका बुनियादी ढांचा AJAX कार्यभार से ग्रस्त होगा। यदि आप उन URL को परिभाषित कर सकते हैं जिन्हें AJAX का उपयोग करके लोड नहीं किया जाना चाहिए, तो आप jQuery चयनकर्ता को बदल सकते हैं:

 jQuery("body").on("click", "a:not(href$='/some/page')", function(event) { });

आप यूआरएल को होस्ट करने के लिए कॉलबैक में अधिक तर्क जोड़ सकते हैं। यदि क्लिक करने पर URL मेल खाता है, तो आप preventDefault() कॉल नहीं कर सकते हैं और पृष्ठ को सामान्य रूप से लोड करने दें।

जब आप लचीले कोड के साथ आगे की योजना बनाते हैं, तो AJAX वेबसाइट बनाना आपके विचार से आसान होता है। याद रखें कि इस पोस्ट से युक्तियां और 80% पहले ही हो चुकी हैं। बेशक, कुछ सुविधाएँ आपकी साइट के लिए विशिष्ट होंगी, लेकिन वे संपूर्ण अनुप्रयोग के संबंध में महत्वहीन होंगी। हैप्पी AJAXing!