JSNAV

पेज नेविगेशन

अधिक से अधिक बार जावास्क्रिप्ट में लिखित नेविगेशन का उपयोग करने वाली साइटें वेब पर दिखाई देती हैं। नेविगेशन के लिए जावास्क्रिप्ट का उपयोग करने का एक विशिष्ट मामला: मेनू वाला पृष्ठ और सामग्री का एक ब्लॉक, जहां सामग्री AJAX के माध्यम से लोड की जाती है:







उपयोगकर्ता आइटम पर क्लिक करता है, जावास्क्रिप्ट नेटवर्क से सामग्री को लोड करता है, इसे सामग्री ब्लॉक में सम्मिलित करता है, उपयोगकर्ता संतुष्ट है: पृष्ठ पुनः लोड किए बिना आवश्यक पृष्ठ दिखाता है, और इस तथ्य के कारण कम ट्रैफ़िक की आवश्यकता थी कि सभी HEAD, BODY, STYLE और अन्य तत्वों को लोड करना आवश्यक नहीं था।



लेकिन यहाँ समस्या है: पृष्ठ URL। यदि पुरानी स्कोल साइटों पर प्रत्येक मेनू आइटम के लिए एक नया HTML पृष्ठ प्रदर्शित किया जाता है, और उपयोगकर्ता के पास एक यूएनआई है जिसे वह ब्राउज़र एड्रेस बार से कॉपी कर सकता है, किसी मित्र या बुकमार्क को भेज सकता है, तो AJAX इंटरफेस के मामले में, यूआरआईआई पेज में अक्सर कोई लिंक नहीं होता है। दस्तावेज़ की वर्तमान सामग्री।



किसी ब्राउज़र के एड्रेस बार से किसी मित्र को लिंक अग्रेषित करना, उपयोगकर्ता यह सुनिश्चित नहीं कर सकता है कि दस्तावेज़ उस सामग्री से खुलता है जिसे वह अभी देख रहा है, या पृष्ठ की प्रारंभिक सामग्री वाला दस्तावेज़ खुलता है।



यह कोई रहस्य नहीं है कि इस समस्या को हल करने के लिए, कई प्रोग्रामर वर्तमान में देखी गई सामग्री के दस्तावेज यूआरआई के एंकर में लिंक करते हैं। उदाहरण के लिए, jqapi.com पर (जिसका एक स्क्रीनशॉट विषय की शुरुआत में दिया गया है), जब आप एक मेनू आइटम चुनते हैं, तो पृष्ठ लंगर # p = {contentId} में बदल जाता है।



उदाहरण के लिए:

jqapi.com/#p=jQuery.ajax

jqapi.com/#p=height

jqapi.com/#p=addClass



इस मामले में, लिंक में लंगर द्वारा पृष्ठ लोड करने के बाद, आप बस अनुरोधित सामग्री को पुनर्स्थापित और दिखा सकते हैं।



दुर्भाग्य से, वर्तमान में हर कोई दस्तावेज़ की वर्तमान सामग्री को लंगर में एन्कोडिंग की समस्या को हल करने के लिए अपनी बाइक का आविष्कार कर रहा है। एंकरों को कोड करने के लिए कोई एकल मानक नहीं है। इसके अलावा, डेवलपर्स अक्सर भूल जाते हैं कि मूल रूप से एंकर का उपयोग किस लिए किया गया था और उपयोगकर्ता को दस्तावेज़ के भीतर नेविगेट करने से रोकता है।



किसी तरह इन समस्याओं को हल करने के लिए, यह हमारे लिए जेएसएएनएवी पुस्तकालय बनाने के विचार के साथ आने के लिए गैबेजुक हब्रायुज़र के साथ हुआ, जो उपरोक्त समस्याओं को हल करने में मदद करता है।

यह कैसे काम करता है?

JSNAV ने दस्तावेज़ URI में जावास्क्रिप्ट हैंडलर कॉल को एनकोड किया। एन्कोडिंग के लिए, निम्नलिखित फॉर्म के RFC1630 संगत URI का उपयोग किया जाता है:

user:pass@host:port/path/resource?query#anchor;navEventName;param1;param2;...







पेज एंकर सिंटैक्स:

• सेवा चरित्र # पृष्ठ का URI मानक में निर्दिष्ट एक से अलग नहीं है, परिवर्तन केवल लंगर के सिंटैक्स से संबंधित हैं
• # के तुरंत बाद और चरित्र से पहले; एक मानक कार्रवाई के साथ एक नियमित HTML एंकर है (पृष्ठ को एंकर तत्व तक स्क्रॉल करना)
• लंगर के बाद सेवा का प्रतीक आता है; और घटना का नाम इंगित किया गया है
• प्रतीक के माध्यम से आगे; मापदंडों की एक सूची है जिसके साथ घटना संचालकों को बुलाया जाएगा; UTF-8 बाइट एन्कोडिंग में URL एन्कोडिंग में इनकोडिंग पैरामीटर

पृष्ठ को लोड करने के बाद, पुस्तकालय परिवर्तनशील window.location.href द्वारा URI परिवर्तनों की निगरानी करना शुरू करता है और, यदि इसे बदल दिया जाता है, तो पंजीकृत हैंडलर कहते हैं।



JSNAV नियमित एंकर के साथ काम करने का भी समर्थन करता है: एंकर के साथ लिंक का अनुसरण करने के मामले में, एसीसी तत्व को स्क्रॉल किया जाता है। इस स्थिति में, अंतिम पंजीकृत ईवेंट का विवरण URI में सहेजा गया है।



हैंडलर सामान्य फ़ंक्शन ऑब्जेक्ट होते हैं, जिनके इनपुट से एंकर से डिकोड किए गए ईवेंट पैरामीटर प्रेषित होते हैं।

var addClassHandler = function (className, textId) {

var elm = textId? document .getElementById(textId) : this ;

if (elm.className && elm.className.indexOf(className) < 0) {

elm.className += " " + className;

}

}

JSNAV.bind( "addClass" , addClassHandler);



उदाहरण से AddClassHandler हैंडलर को फॉर्म के URI पर कॉल किया जाएगा:

• test.html #; addClass - window.document.body के संदर्भ में addClassHandler () को कॉल करें
• test.html #; addClass; className - call addClassHandler ('className') window.document.body के संदर्भ में
• test.html #; addClass; className; elementId - कॉल addClassHandler ('className', 'elementId') window.document.body के संदर्भ में
• test.html # anchor; addClass; className - call addClassHandler ('className') एंकर तत्व (आईडी == एंकर 'या नाम ==' एंकर ') के संदर्भ में और एंकर तत्व को स्क्रॉल करें

JSNAV

पुस्तकालय शुद्ध जेएस में लिखा गया है और सिद्धांत रूप में, किसी भी प्रसिद्ध रूपरेखा के साथ संघर्ष नहीं करना चाहिए।



एक गलती की रिपोर्ट करें, एक पैच पेश करें या प्रोजेक्ट वेबसाइट पर कोड डाउनलोड करें । अपाचे 2 लाइसेंस के तहत स्रोत उपलब्ध हैं।



आप देख सकते हैं कि इस पृष्ठ पर उदाहरण में यह सब कैसे काम करता है।

पुनश्च

मुझे टिप्पणी, सुझाव सुनने, बग रिपोर्ट प्राप्त करने में खुशी होगी। इसके अलावा, मैं सभी को कोड और प्रलेखन के विकास में शामिल होने के लिए आमंत्रित करता हूं।