वेनिला जावास्क्रिप्ट और HTML। कोई ढांचा नहीं। कोई पुस्तकालय नहीं। कोई बात नहीं

क्या आप एप्लिकेशन बनाने के लिए Vue, React, Angular या Svelte का उपयोग कर रहे हैं? मैं उपयोग करता हूं, और यदि आप भी, और मुझे यकीन है कि आपको ऐसा एप्लिकेशन नहीं लिखना है जो इन अद्भुत टूल के बिना जानकारी प्रदर्शित करता है।

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

थोड़ी मात्रा में जानकारी प्रदर्शित करते समय, आपको बिना किसी टूल के HTML, जावास्क्रिप्ट और DOM का उपयोग करना पड़ सकता है। मैंने हाल ही में कुछ बुनियादी उदाहरण लिखे हैं जो वेब विकास की मूल बातें बताते हैं और DOM, HTML, जावास्क्रिप्ट और ब्राउज़र सिद्धांतों को सीखने में मदद करते हैं। इस अनुभव ने मुझे यह समझने की अनुमति दी कि अन्य डेवलपर्स - शायद आप - यह याद करके खुश होंगे कि पुस्तकालयों का उपयोग किए बिना जानकारी कैसे प्रदर्शित करें।

यह मज़ेदार, उपयोगी है और आधुनिक पुस्तकालयों और रूपरेखाओं के मूल्य को समझने में मदद करता है जो हमारे लिए बहुत काम करते हैं।

आइए जानकारी प्रदर्शित करने के विभिन्न तरीकों को देखें। और इस दस्तावेज को संभाल कर रखें!

नमूना आवेदन

यहां वह एप्लिकेशन है जिसे मैंने अपने लेख में प्रदर्शित किया है। यह वर्णों की एक सूची निकालता है और एक बटन दबाए जाने पर उन्हें प्रदर्शित करता है। सूची को पुनः प्राप्त करते समय एप्लिकेशन एक प्रगति बार भी प्रदर्शित करता है।

उपकरण

सही उपकरण चुनना महत्वपूर्ण है। इस अभ्यास में, हमें एक ब्राउज़र में उन सूचनाओं को प्रदर्शित करने की आवश्यकता है, जो हम सभी के लिए उपलब्ध हैं। कोई ढांचा नहीं। कोई पुस्तकालय नहीं। कोई बात नहीं।

हम केवल HTML, टाइपस्क्रिप्ट / जावास्क्रिप्ट, CSS और ब्राउज़र-आधारित DOM (दस्तावेज़ ऑब्जेक्ट मॉडल) का उपयोग करेंगे। आइए देखें कि HTML को कैसे प्रदर्शित किया जा सकता है।

यहां आप वीएस कोड का उपयोग करके टाइपस्क्रिप्ट लिखने के तरीके के बारे में पढ़ सकते हैं।

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

दृष्टिकोण

हमारा आवेदन एक प्रगति बार और पात्रों की एक सूची प्रदर्शित करता है। आइए सबसे सरल संकेतक से शुरू करें - और इसे प्रदर्शित करने के विभिन्न तरीकों पर विचार करें। फिर हम सूची में जाएंगे और देखेंगे कि यदि अधिक जानकारी प्रदर्शित करने की आवश्यकता है तो स्थिति कैसे बदलती है।

प्रगति बार प्रदर्शन

एक संकेतक प्रदर्शित किया जाना चाहिए जबकि आवेदन यह तय करता है कि किन पात्रों को सूचीबद्ध किया जाना चाहिए। यही है, पहले तो संकेतक अदृश्य है, फिर उपयोगकर्ता अपडेट बटन दबाता है, संकेतक दिखाई देता है, और सूची प्रदर्शित होने के बाद फिर से गायब हो जाता है।

नीचे वर्णित सभी विधियों को तत्वों के स्थान की आवश्यकता होती है क्योंकि वे बनाए जाते हैं। उदाहरण के लिए, एक संकेतक और पात्रों की एक सूची कहीं स्थित होनी चाहिए। एक समाधान एक मौजूदा तत्व को संदर्भित करना है जो पहले से ही उनमें शामिल है। या आप एक तत्व को संदर्भित कर सकते हैं और इसे नए डेटा के साथ बदल सकते हैं।

आंतरिक HTML का उपयोग करके संकेतक प्रदर्शित करें

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

 const heroPlaceholder = document.querySelector('.hero-list'); heroPlaceholder.innerHTML = ` <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^ ></progress> `; 

बस। आसानी से। किसी भी कोड के बारे में ऐसा क्यों नहीं कहा जा सकता है? अच्छी तरह से देखो कितनी तेजी से इस समस्या को हल करता है!

आपने शायद पहले ही देखा है कि यह कोड कितना कमजोर है। HTML में एक गलती - और यह बात है! हमें एक समस्या है। और क्या यह वास्तव में पठनीय है? हाँ, यह है, लेकिन क्या होता है जब HTML बहुत जटिल हो जाता है? जब आपके पास कक्षाओं, विशेषताओं और मूल्यों के साथ कोड की 20 लाइनें हैं ... अच्छी तरह से, आपको बिंदु मिलता है। हां, समाधान एकदम सही नहीं है। लेकिन HTML की एक छोटी राशि के साथ, यह काफी अच्छी तरह से काम करता है, और मेरी सलाह है कि सभी प्रशंसक इसे देखने के लिए एक पंक्ति में सब कुछ लिखते हैं।

यह भी ध्यान दें कि इनलाइन सामग्री कोड की पठनीयता और स्थिरता को कैसे प्रभावित कर सकती है। उदाहरण के लिए, यदि आपको बदलते डाउनलोड संदेश के लिए संकेतक के अंदर जानकारी जोड़ने की आवश्यकता है, तो आप इसे प्रतिस्थापन का उपयोग करके कर सकते हैं, उदाहरण के लिए, ${message} । यह न तो अच्छा है और न ही बुरा है, यह सिर्फ बड़े टेम्पलेट स्ट्रिंग्स बनाते समय सुविधा जोड़ता है।

एक आखिरी innerHTML : innerHTML डिस्प्ले की गति को प्रभावित कर सकता है। मैं ऑप्टिमाइज़ेशन को खत्म नहीं कर पा रहा हूं, लेकिन बेहतर प्रदर्शन की जांच कर रहा हूं, क्योंकि innerHTML ब्राउज़र में साइकल प्रदान करने और रेंडर करने का कारण हो सकता है। ध्यान रखें।

DOM API का उपयोग करके प्रगति बार

आप DOM API का उपयोग करके लंबी लाइनों की थोकता को कम कर सकते हैं। हम एक तत्व बनाते हैं, आवश्यक कक्षाएं और विशेषताओं को जोड़ते हैं, मूल्यों को सेट करते हैं, और फिर इसे डोम में जोड़ते हैं।

 const heroPlaceholder = document.querySelector('.hero-list'); const progressEl = document.createElement('progress'); progressEl.classList.add('hero-list', 'progress', 'is-medium', 'is-info'); const maxAttr = document.createAttribute('max'); maxAttr.value = '100'; progressEl.setAttributeNode(maxAttr); heroPlaceholder.replaceWith(progressEl); 

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

और नुकसान यह है कि यह कोड की छह पंक्तियों को आउटपुट जानकारी में ले जाता है जो innerHTML का उपयोग करते हुए एकल पंक्ति के रूप में प्रदर्शित होता है।

क्या DOM API कोड इंडिकेटर के साथ कोड को पढ़ने योग्य दिखाने के लिए DOM API है? मैं बहस करूंगा। लेकिन क्या यह कारण नहीं है कि संकेतक का HTML कोड बहुत छोटा और सरल है? हो सकता है कि। यदि 20 लाइनें थीं, तो innerHTML को पढ़ना बहुत मुश्किल हो जाएगा ... हालांकि, डोम एपीआई कोड भी।

टेम्प्लेट का उपयोग करके एक संकेतक खींचना

एक और तरीका है <tmplate> और सूचना के उत्पादन को आसान बनाने के लिए इसका उपयोग करना।

<tmplate> बनाएं और इसे एक आईडी असाइन करें। टेम्पलेट को HTML पृष्ठ पर प्रदर्शित नहीं किया जाएगा, लेकिन बाद में आप इसकी सामग्री से लिंक कर सकते हैं और इसका उपयोग कर सकते हैं। यह बहुत उपयोगी है, आप HTML को जहां कहीं भी उपयुक्त लिख सकते हैं: HTML पृष्ठ पर, HTML संपादक की सभी उपयोगी विशेषताओं का उपयोग कर सकते हैं।

 <template id="progress-template"> <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^></progress> </template> 

फिर कोड DOM API से document.importNode() विधि का उपयोग करके टेम्पलेट ले सकता है। आवश्यकतानुसार, कोड टेम्पलेट की सामग्री में हेरफेर कर सकता है। अब संकेतक प्रदर्शित करने के लिए इस सामग्री को DOM में जोड़ें।

 const heroPlaceholder = document.querySelector('.hero-list'); const template = document.getElementById('progress-template') as HTMLTemplateElement; const fetchingNode = document.importNode(template.content, true); heroPlaceholder.replaceWith(fetchingNode); 

HTML बनाने के लिए टेम्प्लेट एक अच्छा तरीका है; मुझे यह पसंद है क्योंकि यह आपको HTML लिखने की अनुमति देता है जहां यह समझ में आता है, और आप टाइपस्क्रिप्ट / जावास्क्रिप्ट कोड के साथ कम कर सकते हैं।

क्या मैं अन्य फाइलों से टेम्प्लेट आयात कर सकता हूं? हां, लेकिन अन्य पुस्तकालयों की मदद से। हालांकि, अब हमने उन्हें जानबूझकर मना कर दिया है। HTML आयात पर वर्षों से चर्चा की गई है, लेकिन जैसा कि आप Can I Use साइट से देख सकते हैं, सभी आधुनिक ब्राउज़र इस सुविधा का समर्थन नहीं करते हैं।

चरित्र सूची प्रदर्शन

अब बात करते हैं कि आप एक ही तीन तकनीकों का उपयोग करके पात्रों की सूची कैसे प्रदर्शित कर सकते हैं। किसी एकल <prgress> HTML तत्व और वर्णों की सूची प्रदान करने से अंतर यह है कि अब हम:

• कई HTML तत्वों को प्रदर्शित करें;
  
• कई कक्षाएं जोड़ें;
  
• बच्चों का एक निश्चित क्रम जोड़ें;
  
• प्रत्येक वर्ण के लिए समान जानकारी का प्रदर्शन;
  
• तत्वों के अंदर गतिशील रूप से पाठ प्रदर्शित करें।
  

आंतरिक HTML का उपयोग करके वर्ण प्रदर्शित करें

innerHTML का उपयोग करते समय यह वर्णों की एक सरणी के साथ शुरू करने और इसे पुनरावृत्त करने के लिए समझ में आता है। इस तरह आप एक बार में एक लाइन बना सकते हैं। लाइनें केवल वर्ण नाम और विवरणों में भिन्न होंगी, जिन्हें टेम्प्लेट लाइनों का उपयोग करके डाला जा सकता है। ऐरे में प्रत्येक वर्ण एक li टैग बनाता है, जो एक स्ट्रिंग ऐरे से जुड़ा होता है। अंत में, स्ट्रिंग सरणी को शुद्ध HTML में बदल दिया जाता है, ul में लपेटा जाता है और innerHTML HTML को सौंपा जाता है।

 function createListWithInnerHTML(heroes: Hero[]) { const rows = heroes.map(hero => { return `<li> <div class="card"> <div class="card-content"> <div class="content"> <div class="name">${hero.name}</div> <div class="description">${hero.description}</div> </div> </div> </div> </li>`; }); const html = `<ul>${rows.join('')}</ul>`; heroPlaceholder.innerHTML = html; 

यह काम करता है। और शायद यह अधिक पठनीय है। प्रदर्शन के बारे में क्या? क्या टाइप करना मुश्किल है (या संभवतः भी?) टाइप करते समय टाइप करें कोड? आपको न्याय करने के लिए। लेकिन जब तक हम दूसरी तकनीकों का पता नहीं लगाते, तब तक निष्कर्ष नहीं निकालते।

DOM API का उपयोग करके कैरेक्टर मैपिंग

 function createListWithDOMAPI(heroes: Hero[]) { const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); heroes.forEach(hero => { const li = document.createElement('li'); const card = document.createElement('div'); card.classList.add('card'); li.appendChild(card); const cardContent = document.createElement('div'); cardContent.classList.add('card-content'); card.appendChild(cardContent); const content = document.createElement('div'); content.classList.add('content'); cardContent.appendChild(content); const name = document.createElement('div'); name.classList.add('name'); name.textContent = hero.name; cardContent.appendChild(name); const description = document.createElement('div'); description.classList.add('description'); description.textContent = hero.description; cardContent.appendChild(description); ul.appendChild(li); }); heroPlaceholder.replaceWith(ul); } 

टेम्पलेट के साथ चरित्र प्रदर्शन

टेम्प्लेट का उपयोग करके वर्णों की सूची प्रदर्शित की जा सकती है। इसके लिए, उसी तकनीक का उपयोग <prgress> तत्व प्रदर्शित करने के लिए किया जाता है। सबसे पहले, HTML पेज पर एक टेम्पलेट बनाएं। यह HTML <prgress> तुलना में थोड़ा अधिक जटिल होगा। लेकिन यह कोई समस्या नहीं है। यह HTML पृष्ठ के अंदर सिर्फ HTML है, जिससे हम आसानी से त्रुटियों को ठीक कर सकते हैं और सुंदर वीएस कोड संपादक के साथ प्रारूपण कर सकते हैं।

 <template id="hero-template"> <li> <div class="card"> <div class="card-content"> <div class="content"> <div class="name"></div> <div class="description"></div> </div> </div> </div> </li> </template> 

अब आप वर्णों की सूची बनाने के लिए कोड लिख सकते हैं। सबसे पहले, li अक्षरों के साथ लाइनों को लपेटने के लिए ul बनाएं। अब आप सरणी के माध्यम से जा सकते हैं और प्रत्येक वर्ण के लिए समान टेम्पलेट लागू करने के लिए समान document.importNode() विधि का उपयोग कर सकते हैं। ध्यान दें कि प्रत्येक पंक्ति बनाने के लिए पैटर्न का पुन: उपयोग किया जा सकता है। यह एक स्रोत ड्राइंग में बदल जाता है, जो आवश्यक संख्या में लाइनें बनाता है।

पात्रों की सूची में नाम और विवरण होने चाहिए। यही है, टेम्पलेट के भीतर विशिष्ट मूल्यों को बदलने के लिए आवश्यक होगा। ऐसा करने के लिए, यह सलाह दी जाती है कि आप उन स्थानों को पहचानें और संदर्भित करें जहां आप इन मूल्यों को सम्मिलित करेंगे। हमारे उदाहरण में, प्रत्येक वर्ण के लिए एक लिंक प्राप्त करने के लिए, हम querySelector('your-selector') पद्धति का उपयोग करते हैं, जिसके बाद हम एक नाम और विवरण देते हैं।

 function createListWithTemplate(heroes: Hero[]) { const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); const template = document.getElementById('hero-template') as HTMLTemplateElement; heroes.forEach((hero: Hero) => { const heroCard = document.importNode(template.content, true); heroCard.querySelector('.description').textContent = hero.description; heroCard.querySelector('.name').textContent = hero.name; ul.appendChild(heroCard); }); heroPlaceholder.replaceWith(ul); } 

क्या यह टेम्पलेट अन्य तकनीकों की तुलना में आसान है? मुझे यह अपेक्षाकृत आसान लगता है। मेरे दृष्टिकोण से, कोड एक टेम्पलेट पर बनाया गया है जो प्लेबैक और पठनीयता को सरल करता है, और त्रुटियों से भी बेहतर तरीके से बचाता है।

परिणाम

मैंने यह उल्लेख नहीं किया कि लोकप्रिय फ्रेमवर्क और लाइब्रेरी जानकारी कैसे प्रदर्शित करते हैं। Vue, React, Angular और Svelte कार्य को बहुत आसान बनाते हैं और लिखने के लिए कम कोड की आवश्यकता होती है। इनके अन्य फायदे भी हैं। इस लेख में, हमने DOM और शुद्ध HTML, साथ ही टाइपस्क्रिप्ट / जावास्क्रिप्ट का उपयोग करके जानकारी प्रदर्शित करने के लिए केवल अपेक्षाकृत सरल तकनीकों की जांच की।

हम क्या करने आए हैं?

मुझे आशा है कि अब आप कल्पना कर सकते हैं कि पुस्तकालयों का उपयोग किए बिना सूचना कैसे प्रदर्शित की जाए। क्या कोई अन्य तरीके हैं? बेशक। क्या मैं फ़ंक्शंस लिख सकता हूं जो कोड को सरल करता है और इसे बार-बार उपयोग करने की अनुमति देता है? बेशक। लेकिन एक दिन आप इस तरह के एक महान उपकरण जैसे कि Vue, React, Angular या Svelte के साथ प्रयोग करना चाहेंगे।

ये फ्रेमवर्क हमारे लिए बहुत काम करते हैं। आप याद रख सकते हैं कि जावास्क्रिप्ट या jQuery के साथ शुद्ध DOM कोड का उपयोग करके जानकारी कैसे आउटपुट की जाती है। या हैंडलबार या मूंछ जैसे टूल के साथ ऐसा कैसे करें। या हो सकता है कि आप किसी फ्रेमवर्क की मदद के बिना कभी भी DOM को जानकारी आउटपुट न करें। आप कल्पना कर सकते हैं कि आधुनिक पुस्तकालयों और रूपरेखाओं के हुड के तहत क्या प्रक्रियाएं हो रही हैं जब वे स्क्रीन पर आपके लिए जानकारी प्रदर्शित करते हैं।

यह जानना अच्छा है कि आप शुद्ध एचटीएमएल, टाइपस्क्रिप्ट / जावास्क्रिप्ट और सीएसएस के साथ क्या कर सकते हैं, भले ही आप एक फ्रेमवर्क का उपयोग करें जो आपको बचाता है।

आपके अनुभव के बावजूद, मुझे उम्मीद है कि जानकारी प्रदर्शित करने की कुछ तकनीकों में यह संक्षिप्त भ्रमण आपके लिए उपयोगी था।