जावास्क्रिप्ट सीखने के मेरे संस्करण के बारे में
पहली पोस्ट के बाद, खुशी के साथ व्यापार का संयोजन करते हुए, मैंने महत्वपूर्ण परिवर्धन करने का फैसला किया और, उसी समय, सीखने में सफलता हासिल की।
स्क्रिप्ट के पहले संस्करण में पहली नज़र में, शायद ही कोई ध्यान देने योग्य नहीं था, लेकिन महत्वपूर्ण कार्य - टिप्पणी के लेखक को एक व्यक्तिगत संदेश भेजना। इसे तुरंत ठीक करने का निर्णय लिया गया:
function clickPm(event) { event.preventDefault(); var username = event.target.parentElement.parentElement.parentElement.querySelector('a.username').innerText; window.location.pathname = '/conversations/' + username; } var infobars = document.querySelectorAll('.to_chidren');
प्रत्येक टिप्पणी के लिए एक संदेश आइकन के साथ एक लिंक बनाया गया है, और एक क्लिक हैंडलर हमें उस उपयोगकर्ता को एक व्यक्तिगत संदेश भेजने के लिए पेज पर भेजता है जिसकी टिप्पणियों में हमने क्लिक किया था।
चूंकि अंतिम दिनों में स्पष्ट रूप से विभिन्न प्रकार के उपयोगकर्ता के लिए एक प्रवृत्ति है, इसलिए इसे कर्म और रेटिंग के अनिवार्य प्रदर्शन के साथ-साथ उपयोगकर्ता ब्लॉक की परिचित संरचना को बनाए रखने का निर्णय लिया गया था। साथ ही, उपयोगकर्ता को पारदर्शी होना चाहिए ताकि घोषणाओं के पृष्ठों (फ़ीड, पोस्ट, और इसी तरह) के माध्यम से नेविगेट करना बहुत मुश्किल न हो। यदि दूसरा शैलियों द्वारा तय किया गया था, तो पहले थोड़ा अधिक जटिल था। प्रसंस्करण अनुरोधों के नियमों के बारे में पढ़ने के बाद, मैंने एक महत्वपूर्ण बात सीखी - केवल अतुल्यकालिक अनुरोध। मैं एक छोटी टिप्पणी करूंगा - आमतौर पर मैं अपने कार्यों के संदर्भ में प्रत्येक नई अध्ययन की गई सामग्री को "रोगी" पर लागू करने की कोशिश करता हूं। मैं आपको शुरुआती लोगों के लिए ऐसा करने की सलाह देता हूं, क्योंकि उनके एकतरफा होने के कारण उदाहरण याद नहीं हैं।
सबसे पहले आपको एक यूजरबार बनाने की आवश्यकता है:
var userpanel = document.querySelectorAll('.userpanel')[0]; var userpanelTop = document.querySelectorAll('.userpanel > .top')[0]; var userpanelBottom = document.querySelectorAll('.userpanel > .bottom')[0]; var karmaDescription = document.querySelectorAll('.charge')[0]; if (userpanelBottom != null) { userpanelTop.innerHTML += userpanelBottom.innerHTML; userpanel.removeChild(userpanelBottom); userpanel.removeChild(karmaDescription); karmaCounter(); }; if (userpanelTop == null) { var top = document.createElement('div'); top.className = 'top'; top.innerHTML = userpanel.innerHTML; userpanel.innerHTML = null; userpanel.appendChild(top); };
मैं विभिन्न उपयोगकर्ता राज्यों (लॉग इन और लॉग आउट) के लिए चर और शर्तों को परिभाषित करता हूं। Userpanel.innerHTML के साथ थोड़ी सी ट्रिक = userpanel वैरिएबल की सामग्री को किसी अन्य userpanelTop वैरिएबल (जो कि userbar कंटेनर है) को पास करने के बाद null हो जाती है और userpanelTop में शामिल होने से पहले userpanelTop, DOM के आसपास अतिरिक्त चलता है।
उपयोगकर्ता डेटा के साथ xml पृष्ठ पार्स करने का कार्य इस प्रकार है:
function karmaCounter() { var xmlhttp=new XMLHttpRequest(); xmlhttp.overrideMimeType('text/xml'); var userBlock = document.querySelectorAll('.top > .username')[0].innerText; var userpanelTop = document.querySelectorAll('.userpanel > .top')[0]; var karmaCharge = document.createElement('a'); karmaCharge.className = 'count karma'; xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { var counter = xmlhttp.responseXML.querySelectorAll('karma')[0].firstChild; var rating = xmlhttp.responseXML.querySelectorAll('rating')[0].firstChild; karmaCharge.innerText = ' '; karmaCharge.appendChild(counter); karmaCharge.innerText += ', '; karmaCharge.appendChild(rating); userpanelTop.insertBefore(karmaCharge, userpanelTop.firstChild.nextSibling.nextSibling); } } xmlhttp.open("GET", '/api/profile/' + userBlock ,true); xmlhttp.send(); }
एक महत्वपूर्ण बिंदु - सही पार्सिंग के लिए, मुझे ओवरराइड माइम टाइप ('टेक्स्ट / xml') का उपयोग करके MIME प्रकार को फिर से परिभाषित करना था।
मैं मुख्य बात का उल्लेख करना भूल गया - स्क्रिप्ट के हिस्से के रूप में, मैं सामान्य शैली का पालन करने और नई कार्यक्षमता का प्रदर्शन करने की कोशिश करता हूं, ताकि यह हबर के सुखद अतिसूक्ष्मवाद में व्यवस्थित रूप से दिखे। बहुत सी चीजों का आविष्कार करने और इसे स्क्रिप्ट में लागू करने का प्रयास करने का कोई उद्देश्य नहीं है, केवल आवश्यक है और बॉक्स से बाहर नहीं है।
इसकी सभी महिमा में यूजरबार गितुब पर स्क्रिप्टक्रोम बाजार में विस्तारऔर इस बार यह पाठ में कुछ फजीहत के बिना नहीं था, जिसके लिए मैं माफी मांगता हूं। मामूली अनुभव के कारण, कहीं न कहीं मैं गलत हो सकता हूं और शायद उचित नाराजगी का कारण बन सकता हूं। टिप्पणियों के रूप में इस तरह के एक तर्क के कारण, यह पोस्ट बनाया गया था, क्योंकि मैं उपयोगी सबक सीख सकता हूं।
उन सभी का धन्यवाद जिन्होंने मेरे मनोरंजन पार्क की यात्रा का निमंत्रण स्वीकार किया।