ब्राउज़रों में जावास्क्रिप्ट के आगमन के बाद से, वेबसाइटें पहले से कहीं अधिक इंटरैक्टिव और जटिल होती जा रही हैं। वेब प्रौद्योगिकियों का अब आमतौर पर पूरी तरह कार्यात्मक अनुप्रयोग बनाने के लिए उपयोग किया जाता है जो सीधे एक ब्राउज़र में चलता है जिसे हम [वेब एप्लिकेशन](https://en.wikipedia.org/wiki/Web_application) कहते हैं। चूंकि वेब ऐप्स अत्यधिक संवादात्मक हैं, इसलिए उपयोगकर्ता हर बार किसी क्रिया के पूरा होने तक पूर्ण पृष्ठ पुनः लोड होने की प्रतीक्षा नहीं करना चाहते हैं। यही कारण है कि एक चिकनी उपयोगकर्ता अनुभव प्रदान करने के लिए जावास्क्रिप्ट का उपयोग सीधे डोम का उपयोग करके HTML को अपडेट करने के लिए किया जाता है।
इस पाठ में, हम बैंक वेब ऐप बनाने के लिए नींव रखने जा रहे हैं, HTML टेम्प्लेट का उपयोग करके ऐसी कई स्क्रीन बना सकते हैं जिन्हें प्रदर्शित किया जा सकता है और पूरे HTML पृष्ठ को फिर से लोड किए बिना अपडेट किया जा सकता है।
इस पाठ में हमारे द्वारा बनाए गए वेब ऐप का परीक्षण करने के लिए आपको एक स्थानीय वेब सर्वर की आवश्यकता होगी। यदि आपके पास एक नहीं है, तो आप [Node.js](https://nodejs.org) को स्थापित कर सकते हैं और अपने प्रोजेक्ट फ़ोल्डर से कमांड `npx lite-server` का उपयोग कर सकते हैं। यह एक स्थानीय वेब सर्वर बनाएगा और आपके ऐप को एक ब्राउज़र में खोलेगा।
अपने कंप्यूटर पर, उसके अंदर `index.html` नामक फ़ाइल के साथ `bank` नामक एक फ़ोल्डर बनाएँ। हम इस HTML [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code) से शुरू करेंगे :
यदि आप एक वेब पेज के लिए कई स्क्रीन बनाना चाहते हैं, तो एक समाधान यह होगा कि आप जिस भी स्क्रीन को दिखाना चाहते हैं, उसके लिए एक HTML फाइल बनाई जाए। हालाँकि, यह समाधान कुछ असुविधा के साथ आता है:
एक अन्य दृष्टिकोण में केवल एक HTML फ़ाइल है, और `<template>` तत्व का उपयोग करके कई [HTML टेम्पलेट्स](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) को परिभाषित करें। एक टेम्पलेट एक पुन: प्रयोज्य HTML ब्लॉक है जो ब्राउज़र द्वारा प्रदर्शित नहीं किया जाता है, और जावास्क्रिप्ट का उपयोग करके रनटाइम पर तत्काल किया जाना चाहिए।
हम दो स्क्रीन के साथ एक बैंक ऐप बनाएंगे: लॉगिन पेज और डैशबोर्ड। सबसे पहले, एचटीएमएल बॉडी में एक प्लेसहोल्डर तत्व जोड़ें, जिसका उपयोग हम अपने ऐप की विभिन्न स्क्रीन को इंस्टेंट करने के लिए करेंगे:
अगला, लॉगिन पृष्ठ के लिए HTML टेम्पलेट के नीचे जोड़ें। अभी के लिए हम केवल एक शीर्षक और एक अनुभाग रखेंगे जिसमें एक लिंक होगा जिसका उपयोग हम नेविगेशन करने के लिए करेंगे।
> युक्ति: HTML टेम्प्लेट बनाते समय, यदि आप यह देखना चाहते हैं कि यह कैसा दिखेगा, तो आप `<template>` और `</template>` लाइनों को `<!-- -->` के साथ संलग्न करके टिप्पणी कर सकते हैं।
यदि आप अपनी वर्तमान HTML फ़ाइल को किसी ब्राउज़र में आज़माते हैं, तो आप देखेंगे कि यह `Loading...` को प्रदर्शित करता है। ऐसा इसलिए है क्योंकि हमें HTML टेम्प्लेट को इंस्टेंट करने और प्रदर्शित करने के लिए कुछ जावास्क्रिप्ट कोड जोड़ना होगा।
एक टेम्पलेट को तत्काल बनाना आमतौर पर 3 चरणों में किया जाता है:
1. DOM में टेम्पलेट तत्व को पुनः प्राप्त करें, उदाहरण के लिए [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getEgetById) का उपयोग करके।
2. टेम्पलेट तत्व को क्लोन करें, [`cloneNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) का उपयोग करके।
3. इसे एक दृश्य तत्व के तहत DOM में संलग्न करें, उदाहरण के लिए [`appendChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) का उपयोग करके।
हम यहाँ क्या करते हैं, ऊपर वर्णित 3 चरण हैं। हम आईडी `templateId` के साथ टेम्पलेट को इंस्टेंट करते हैं, और हमारे ऐप प्लेसहोल्डर के भीतर इसकी क्लोन सामग्री डालते हैं। ध्यान दें कि हमें टेम्पलेट के पूरे उपप्रकार को कॉपी करने के लिए `cloneNode(true)` का उपयोग करने की आवश्यकता है।
जब एक वेब ऐप के बारे में बात की जाती है, तो हम *रूटिंग* को मैप करने का इरादा **URL** विशिष्ट स्क्रीन पर प्रदर्शित करते हैं जिन्हें प्रदर्शित किया जाना चाहिए। एकाधिक HTML फ़ाइलों वाली वेब साइट पर, यह स्वचालित रूप से किया जाता है क्योंकि URL पर फ़ाइल पथ प्रतिबिंबित होते हैं। उदाहरण के लिए, अपने प्रोजेक्ट फ़ोल्डर में इन फ़ाइलों के साथ:
हालाँकि, हमारे वेब ऐप के लिए हम सभी स्क्रीन वाले एक एकल HTML फ़ाइल का उपयोग कर रहे हैं ताकि यह डिफ़ॉल्ट व्यवहार हमारी मदद न करे। हमें इस नक्शे को मैन्युअल रूप से बनाना होगा और जावास्क्रिप्ट का उपयोग करके प्रदर्शित टेम्प्लेट को अपडेट करना होगा।
URL पथ और हमारे टेम्प्लेट के बीच एक [मैप](https://en.wikipedia.org/wiki/Associative_array) को लागू करने के लिए हम एक साधारण वस्तु का उपयोग करेंगे। इस ऑब्जेक्ट को अपने `app.js` फ़ाइल के शीर्ष पर जोड़ें।
अब चलो `updateRoute` फ़ंक्शन को थोड़ा संशोधित करते हैं। एक तर्क के रूप में सीधे `templateId` पास करने के बजाय, हम पहले वर्तमान URL को देखकर इसे पुनः प्राप्त करना चाहते हैं, और फिर संबंधित टेम्पलेट आईडी मान प्राप्त करने के लिए हमारे मानचित्र का उपयोग करते हैं। URL से केवल पथ अनुभाग प्राप्त करने के लिए हम [`window.location.pathname`](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) का उपयोग कर सकते हैं।
यहां हमने संबंधित टेम्प्लेट में घोषित मार्गों को मैप किया। आप इसे आज़मा सकते हैं कि यह आपके ब्राउज़र में URL को मैन्युअल रूप से बदलकर सही ढंग से काम करता है।
हमें जावास्क्रिप्ट और अधिक विशेष रूप से [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) का उपयोग करना होगा जो URL को अपडेट करने की अनुमति देता है HTML को पुनः लोड किए बिना, ब्राउज़िंग इतिहास में एक नई प्रविष्टि बनाएँ।
> नोट: जबकि HTML एंकर तत्व [`<a href>`] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) का उपयोग हाइपरलिंक बनाने के लिए स्वयं किया जा सकता है विभिन्न यूआरएल, यह ब्राउज़र को डिफ़ॉल्ट रूप से HTML को फिर से लोड करेगा। क्लिक करें घटना पर preventDefault() फ़ंक्शन का उपयोग करके कस्टम जावास्क्रिप्ट के साथ रूटिंग को हैंडल करते समय इस व्यवहार को रोकना आवश्यक है।
यह विधि पहले दिए गए पथ के आधार पर वर्तमान URL को अपडेट करती है, फिर टेम्पलेट को अपडेट करती है। प्रॉपर्टी `window.location.origin` URL रूट लौटाती है, जिससे हम किसी दिए गए पथ से एक पूर्ण URL का पुनर्निर्माण कर सकते हैं।
अब जब हमारे पास यह फ़ंक्शन है, तो हम इस समस्या का ध्यान रख सकते हैं कि अगर कोई रास्ता किसी परिभाषित मार्ग से मेल नहीं खाता है। यदि हम एक मैच नहीं पा सकते हैं, तो हम मौजूदा मार्ग में से किसी एक में वापसी को जोड़कर `updateRoute` फ़ंक्शन को संशोधित करेंगे।
[`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) विशेषता का उपयोग करके जावास्क्रिप्ट कोड पर `click` ईवेंट को बांधें, यहाँ `navigate()` फ़ंक्शन पर कॉल करें।
✅ `History.pushState` विधि HTML5 मानक का हिस्सा है और [सभी आधुनिक ब्राउज़रों](https://caniuse.com/?search=pushState) में लागू किया गया है। यदि आप पुराने ब्राउज़रों के लिए एक वेब ऐप बना रहे हैं, तो इस एपीआई के स्थान पर आप एक ट्रिक का उपयोग कर सकते हैं: इससे पहले [हैश (`#`)](https://en.wikipedia.org/wiki/URI_fragment) का उपयोग कर पथ आप नियमित एंकर नेविगेशन के साथ काम करने वाले रूटिंग को लागू कर सकते हैं और पृष्ठ को फिर से लोड नहीं करते हैं, क्योंकि इसका उद्देश्य एक पृष्ठ के भीतर आंतरिक लिंक बनाना था।
`History.pushState` का उपयोग करके ब्राउज़र के नेविगेशन इतिहास में नई प्रविष्टियाँ बनाता है। आप देख सकते हैं कि आपके ब्राउज़र का *बैक बटन* पकड़कर, इसे कुछ इस तरह प्रदर्शित करना चाहिए:
यदि आप कुछ बार बैक बटन पर क्लिक करने का प्रयास करते हैं, तो आप देखेंगे कि वर्तमान URL बदल जाता है और इतिहास अपडेट हो जाता है, लेकिन वही टेम्पलेट प्रदर्शित होता रहता है।
ऐसा इसलिए है क्योंकि हमें नहीं पता है कि इतिहास बदलने के लिए हमें हर बार `updateRoute()` को कॉल करना होगा। यदि आप [`history.pushState` दस्तावेज़ीकरण](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) पर एक नज़र डालते हैं, तो आप देख सकते हैं कि यदि राज्य बदलता है - इसका अर्थ है कि हम एक अलग URL पर चले गए - [`popstate`] (https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event) इवेंट ट्रिगर है। हम उस समस्या को ठीक करने के लिए इसका उपयोग करेंगे।
यह सुनिश्चित करने के लिए कि ब्राउज़र इतिहास में परिवर्तन होने पर प्रदर्शित टेम्प्लेट को अपडेट किया जाता है, हम एक नया फ़ंक्शन संलग्न करेंगे जो `updateRoute()` कहता है। हम अपने `app.js` फ़ाइल के नीचे करेंगे:
> नोट: हमने एक [एरो फंक्शन](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reference/Arrow_functions) का इस्तेमाल किया है ताकि हम अपने `poopstate` ईवेंट हैंडलर को संक्षिप्तता के लिए घोषित कर सकें, लेकिन नियमित कार्य एक ही काम करेगा।
रूटिंग वेब विकास के आश्चर्यजनक रूप से मुश्किल भागों में से एक है, विशेष रूप से वेब पेज रीफ्रेश बिहेवियर से लेकर सिंगल पेज एप्लीकेशन पेज रिफ्रेश तक चलता है। [कैसे Azure स्टेटिक वेब ऐप सेवा](https://docs.microsoft.com/en-us/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) के बारे में थोड़ा पढ़ें रूटिंग । क्या आप बता सकते हैं कि उस दस्तावेज़ पर वर्णित कुछ निर्णय क्यों आवश्यक हैं?
