मैंने अपनी विशलिस्ट पर कैसे अध्ययन किया

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

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

function initialHide() { function hideReply() { var replies = document.querySelectorAll('.reply_comments'); for (var r = 0; r < replies.length; r++) { var reply = replies[r]; reply.style.display = 'none'; } } hideReply(); function hideImages() { var images = document.querySelectorAll(".content > img, .content > div > img, .content > div > div > img, .content > a > img, .content > a > div > img, .content > table > tbody > tr> td> a > img, .content > table > tbody > tr> td> img, .content > ul > li > img, .content > ul > li > table > tbody > tr> td> img, .message > a > img, .message > img, .sidebar_right > .banner_300x500, .sidebar_right > #htmlblock_placeholder"); for (var m = 0; m < images.length; m++) { var image = images[m]; image.style.display = "none"; } } hideImages(); } 

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

  function imgPosts() { var imgs = document.querySelectorAll(".content > img, .content > div > img, .content > div > div > img, .content > a > img, .content > a > div > img, .content > table > tbody > tr> td> a > img, .content > table > tbody > tr> td> img, .content > ul > li > img, .content > ul > li > table > tbody > tr> td> img, .message > a > img, .message > img"); var button = document.createElement("input"); button.type = "button"; button.className = "habraimage"; button.value = "◄  "; document.querySelectorAll(".main_menu")[0].appendChild(button); button.onclick = function () { for (var x = 0; x < imgs.length; x++) { var img = imgs[x]; img.style.display = (img.style.display != 'none' ? 'none' : 'block'); } }; function addCSSRule(sheet, selector, rules) { if (sheet.insertRule) { sheet.insertRule(selector + "{" + rules + "}"); } else { sheet.addRule(selector, rules); } } addCSSRule(document.styleSheets[0], ".habraimage", "position:fixed; right: 6%; z-index: 1; height: 2.45em; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background-image: -webkit-linear-gradient(top, #eeeeee, #e1e1e1); background-image: linear-gradient(top, #eeeeee, #e1e1e1); background-image: -moz-linear-gradient(top, #eeeeee, #e1e1e1); background-repeat: repeat-x; border: 1px solid #d9d8d8; border-color: #d9d8d8 #cccbcb #aeaeae; text-shadow: 0 1px 0px rgba(255, 255, 255, 0.8); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0px 1px 7px rgba(177, 180, 199, 1); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0px 1px 7px rgba(177, 180, 199, 1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0px 1px 7px rgba(177, 180, 199, 1);"); addCSSRule(document.styleSheets[0], ".habraimage:hover", "background-color: #fcfcfc !important; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fcfcfc), to(#e8e8e8));background-image: -webkit-linear-gradient(top, #fcfcfc, #e8e8e8); background-image: linear-gradient(top, #fcfcfc, #e8e8e8); background-image: -moz-linear-gradient(top, #fcfcfc, #e8e8e8);background-repeat: repeat-x; text-decoration: none;"); } 

शैलियों के साथ काम करने की विधि के बारे में एक टिप्पणी - IE अभी योजनाओं में था, एक छोटे से एसएसडी पर परीक्षणों के लिए एक आभासी मशीन के लिए कोई जगह नहीं थी।

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

  function declOfNum(number, titles) { cases = [2, 0, 1, 1, 1, 2]; return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]]; } 

खैर, परिणाम तीसरा ब्लॉक था, जो बटन का उपयोग करके टिप्पणी के लिए प्रतिक्रिया पेड़ को छिपाने / प्रदर्शित करने के लिए जिम्मेदार था, जिस पर प्रत्येक टिप्पणी के लिए जवाबों की वर्तमान संख्या प्रदर्शित की गई थी:

  hideReplies(); function hideReplies() { function getChildrenByClassName(el, className) { var children = []; for (var i = 0; i < el.childNodes.length; i++) { if (el.childNodes[i].className == className) { children.push(el.childNodes[i]); } } return children; } function addBtn() { var comments = document.querySelectorAll(".comments_list > .comment_item"), comment, combody; function declOfNum(number, titles) { cases = [2, 0, 1, 1, 1, 2]; return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]]; } for (var i = 0; i < comments.length; i++) { comment = comments[i]; var replies = comment.querySelectorAll('.reply_comments .comment_body'); if (replies.length > 0) { combody = getChildrenByClassName(comment, 'comment_body')[0]; if (combody) { var btn = document.createElement("input"); btn.type = "button"; btn.className = "hidereplies"; btn.value = replies.length + declOfNum(replies.length, [' ', ' ', ' ']); combody.appendChild(btn); } } } function addCSSRule(sheet, selector, rules) { if (sheet.insertRule) { sheet.insertRule(selector + "{" + rules + "}"); } else { sheet.addRule(selector, rules); } } addCSSRule(document.styleSheets[0], ".hidereplies", "height: 2em; margin-bottom: 2em; border-radius: 6px; background-image: -webkit-linear-gradient(top, #eeeeee, #e1e1e1); background-image: -o-linear-gradient(top, #eeeeee, #e1e1e1); background-image: linear-gradient(top, #eeeeee, #e1e1e1); background-image: -moz-linear-gradient(top, #eeeeee, #e1e1e1); background-repeat: repeat-x; border: 1px solid #d9d8d8; border-color: #d9d8d8 #cccbcb #aeaeae; text-shadow: 0 1px 0px rgba(255, 255, 255, 0.8); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);"); addCSSRule(document.styleSheets[0], ".hidereplies:hover", "background-color: #fcfcfc; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fcfcfc), to(#e8e8e8));background-image: -webkit-linear-gradient(top, #fcfcfc, #e8e8e8); background-image: linear-gradient(top, #fcfcfc, #e8e8e8); background-image: -moz-linear-gradient(top, #fcfcfc, #e8e8e8);background-repeat: repeat-x; text-decoration: none;"); addCSSRule(document.styleSheets[0], ".hidereplies:active", "-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); background: #e1e1e1 !important; border: 1px solid #a4a7ac; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: #a4a7ac #d2d3d4 #e1e1e1; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);"); } addBtn(); function hideR() { var buttons = document.querySelectorAll(".hidereplies"); for (a = 0; a < buttons.length; a++) { var btn = buttons[a]; btn.onclick = function (event) { var btn = event.currentTarget; var comments = btn.parentNode.parentNode.querySelectorAll(".reply_comments"); for (var y = 0; y < comments.length; y++) { var reply = comments[y]; reply.style.display = (reply.style.display != 'none' ? 'none' : 'block'); } }; } } hideR(); } 

और मैंने सभी ब्लॉकों को एक अनाम सेल्फ-इनवोकेशन फ़ंक्शन में लपेट दिया।

परिणाम जीथब पर पोस्ट किया गया था।



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

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