हैबर के आरामदायक पढ़ने के लिए एक स्क्रिप्ट के साथ मेरी कहानी का सुखद अंत

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

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

var trackerLink = document.querySelector('.userpanel > .top > a.count'); trackerLink.href = '#tracker_updates'; var updates = document.createElement('ul'); updates.className = 'updates'; updates.style.display = 'none'; userpanel.appendChild(updates); trackerLink.onclick = function (event) { event.preventDefault(); updates.style.display = (updates.style.display != 'none' ? 'none' : 'block'); }; 

और वह तार्किक रूप से ट्रैकर के पृष्ठों को पार्स करने के कार्य को लिखने के लिए आगे बढ़ा:

  function getUpdates(url, getUrl) { var xmlhttp = new XMLHttpRequest(); xmlhttp.responseType = 'document'; xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var tracks = xmlhttp.responseXML.querySelectorAll(url); for (i = 0; i < tracks.length; i++) { var post = tracks[i]; post.removeChild(post.firstElementChild); updates.appendChild(post); post.outerHTML = post.outerHTML.replace(/td/g, "li"); } } } xmlhttp.open("GET", getUrl, true); xmlhttp.send(); } getUpdates('tr.new > td.event_type', '/tracker/subscribers/'); getUpdates('tr.new > td.mention_type', '/tracker/mentions/'); 

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

  (function () { var xmlhttp = new XMLHttpRequest(); xmlhttp.responseType = 'document'; xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var tracks = xmlhttp.responseXML.querySelectorAll('tr.new > td.post_title'); var commentCounts = xmlhttp.responseXML.querySelectorAll('tr.new > td.comment_count'); for (i = 0; i < tracks.length; i++) { var track = tracks[i]; var commentCount = commentCounts[i].firstChild.nextSibling; commentCount.className = 'count'; track.appendChild(commentCount); updates.appendChild(track); track.outerHTML = track.outerHTML.replace(/td/g, "li"); } }; xmlhttp.open("GET", '/tracker/', true); xmlhttp.send(); })(); 

और उन्होंने अनुरोध को एक गुमनाम आत्म-आहरण समारोह में लपेट दिया क्योंकि पहले वर्णित सभी भागों को एकल नाम वाले फ़ंक्शन के रूप में निष्पादित किया गया था।


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

 var setLocStor = function(name, hh){ if(!localStorage) return; localStorage['custom_'+ name] = JSON.stringify({h: hh}); }, getLocStor = function(name){ return (JSON.parse(localStorage && localStorage['custom_'+ name] ||'{}')).h; } ,removeLocStor = function(name){localStorage.removeItem('custom_'+ name);} 

जहां तक ​​मैं समझता हूं, क्रोम स्टोरेज एपीआई का उपयोग करने के मामले में, अनुरोधों को एसिंक्रोनस रूप से निष्पादित किया जाएगा (कृपया मुझे सही करें, क्योंकि मैं गलत हो सकता हूं)।

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


और लंबी कहानी के अंत में, अपनी टिप्पणी में उपयोगकर्ता के अवतार पर क्लिक करके वर्तमान कर्म और उपयोगकर्ता रेटिंग प्रदर्शित करने के रूप में एक छोटा सा बोनस।


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

अब स्क्रिप्ट का विकास खाली समय और नए ऑफ़र / विशलिस्ट पर निर्भर करेगा, और मैं अभ्यास में प्राप्त ज्ञान को समेकित करना जारी रखूंगा और आगे सीखने वाले जावास्क्रिप्ट के लिए और अधिक जटिल कार्यों के साथ आऊंगा।

सभी के लिए धन्यवाद जो पढ़ते हैं और मुझे आशा है कि, किसी ने "समुराई के रास्ते" को दोहराने के लिए आश्वस्त किया।
मैं रचनात्मक आलोचना और सिफारिशों के लिए आभारी रहूंगा।

क्रोम वेबस्टोर से लिंक करें
जीथब लिंक

अद्यतन - अब उपयोगकर्ता के कर्म और रेटिंग को उसके अवतार पर क्लिक करके प्रदर्शित किया जाता है (पहले की घटना "अवरुद्ध" उपयोगकर्ता नाम और बटन पर क्लिक करके इस टिप्पणी का लिंक प्रदर्शित करें)। मुझे उम्मीद है कि यह थोड़ा बदलाव समय पर आएगा।