जावास्क्रिप्ट कोड के मेगाबाइट में डूबने के लिए कैसे नहीं? // Mail.Ru Technologies फोरम 2011 की रिपोर्ट: रिपोर्ट, वीडियो, प्रस्तुति का पाठ

आंद्रेई _{स्यूमिन} ( _habraprofil ) द्वारा रिपोर्ट “ कैसे जेएस कोड के मेगाबाइट में डूबने के लिए नहीं? "- Mail.Ru प्रौद्योगिकी मंच 2011 से टेप की एक श्रृंखला में अगले। रिपोर्ट को डिक्रिप्ट करने की प्रणाली कैसे काम करती है, इसके विवरण के लिए, Mail.Ru टेक्नोलॉजी फोरम का “इनसाइड आउट” लेख देखें : इवेंट-मैनेजमेंट में उच्च तकनीक । वहाँ, साथ ही साथ फोरम की वेबसाइट ( http://techforum.mail.ru ) पर - अन्य रिपोर्टों के लिपियों के लिंक।

(मोबाइल उपकरणों के लिए वीडियो संस्करण डाउनलोड करें - iOS / Android H.264 480; 368, आकार 170 एमबी, वीडियो बिटरेट 500 केबीपीएस, ऑडियो - 64 केबीपीएस)
(उच्च संकल्प वीडियो संस्करण H.264 624; 480 डाउनलोड करें , आकार 610 एमबी, वीडियो बिटरेट 1500 केबीपीएस, ऑडियो 128 केबीपीएस)
(प्रेजेंटेशन स्लाइड्स डाउनलोड करें , 4.7Mb)

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

2002 के आसपास थोड़ा पीछे चलते हैं। साइट्स में तब थोड़ा JS कोड होता था। अधिकांश भाग के लिए, जावास्क्रिप्ट ने छोटे "ट्विक्स" बनाए, जैसे कि माउस होवर पर पृष्ठभूमि को बदलना। परियोजना की संरचना सरल और पारदर्शी थी।



2005 के बाद से, हम तेजी से विकास देख रहे हैं, और तब भी शीर्षक "जावास्क्रिप्ट प्रोग्रामर" के साथ रिक्तियां RuNet पर दिखाई देती हैं। परियोजनाएं भी थोड़ी अधिक जटिल हो गई हैं।



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



नतीजतन, हमारे पास भ्रम है, एक बड़ी फ़ाइल और, सबसे खराब, मेरी राय में - कोई कोड पुन: उपयोग नहीं है।

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



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



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

अगली स्लाइड बहुत महत्वपूर्ण है और मेरी रिपोर्ट के मुख्य बिंदु को दर्शाती है।



विचार इस प्रकार है। हाँ, हमारे पास बहुत सारे जावास्क्रिप्ट हैं, हाँ यह किसी तरह से टूटा हुआ है, हाँ हमें कुछ नियमों के अनुसार पृष्ठों पर इसका हिस्सा जोड़ने की आवश्यकता है। परिणामी HTML, जो हमारे सभी तर्क को काम करने के परिणामस्वरूप निकला, कनेक्ट होने की आवश्यकता का विन्यास हो।

मैं समझा दूंगा। हमारे पास एक div टैग है जिसमें कुछ प्रकार के समाप्त ब्लॉक शामिल हैं - मान लें कि यह फ़ोल्डर्स की एक सूची है, अर्थात, इस diva में फ़ोल्डर्स की एक सूची है। पहला चरण, हम एक वर्ग के साथ चिह्नित करते हैं - यह div एक घटक है। इसका मतलब है कि js इंजन इस बिंदु पर इसके लिए खोज करेगा। दूसरी पंक्ति ऑनक्लिक है, यह रिटर्न और कुछ प्रकार के हैश दिखाती है। इस हैश में इस घटक का क्या वर्णन है।

नतीजतन, हमें डोम ट्री में घटक खोजने की आवश्यकता है। यह निर्धारित करें कि यह किस प्रकार का घटक है (मेरे मामले में, टाइप जानकारी ऑनक्लिक में है)। इसे काम करने के लिए js फ़ाइलों को कनेक्ट करें।

पहला कार्य हल किया गया है, कम से कम आधुनिक ब्राउज़रों में, बहुत आसानी से। CSS चयनकर्ता बहुत काम करते हैं जहां मूल रूप से, और जहां मूल रूप से नहीं, आपके पास आपके निपटान में उपयुक्त पुस्तकालय हैं।

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



इस प्रकार, हम तुरंत घटक के लिए इनपुट डेटा के साथ एक हैश प्राप्त करते हैं।



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



इसके लिए आवश्यकता कुछ लाइब्रेरी में लिखी गई है, कुछ घटक में, यानी, कुछ जावा स्क्रिप्ट-फ़ाइल में, जो कार्यक्षमता के लिए जिम्मेदार है। इसकी मदद से जावास्क्रिप्ट फ़ाइल कर्नेल को बताती है कि मेरे काम के लिए मुझे file1 और file2 की आवश्यकता है। इसे पहले तर्क द्वारा पारित किया जाता है, और दूसरे तर्क से, कर्नेल एक फ़ंक्शन को कॉल करता है जो दोनों को लोड करने के बाद निष्पादित करेगा।

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



यहां बताया गया है कि यह एक छोटे से गुच्छा पर कैसा दिखता है। फोल्डर्स को डेट लाइब्रेरी की जरूरत होती है।



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

हमने अपने उदाहरण से काम करने के लिए कार्यों के पूर्ण सेट की जांच की।



सबसे पहले, DOM ट्री से, हम उन सभी घटकों को अलग कर देते हैं जिनकी आवश्यकता है। दूसरा चरण यह निर्धारित करना है कि यह किस प्रकार का घटक है, हैश में हमारे पास एक कार्य घटक होगा, मान लें कि यह अक्षरों की सूची के साथ काम करने के लिए एक घटक है। अगला फ़ंक्शन की आवश्यकता है, getFileName (प्रकार) के लिए पहला तर्क है। लाइन के द्वारा, कर्नेल src में स्क्रिप्ट टैग को रजिस्टर करने के लिए फ़ाइल के वास्तविक पथ को समझ सकता है। तदनुसार, हमारे मामले में यह फ़ोल्डर्स होगा। जेएस। स्क्रिप्ट फ़ोल्डर लोड होंगे। यह कहेंगे कि मुझे तारीखों की जरूरत है, तारीखें कहेंगी कि मुझे तार चाहिए। 3 स्क्रिप्ट टैग उत्पन्न होंगे, लोड किए गए रिवर्स ऑर्डर में काम करेंगे, और परिणामस्वरूप, हमारे पास फ़ंक्शन होगा जो कहता है - - [प्रकार] .init (), निष्पादित करें और घटक प्रारंभ करना शुरू कर देगा।

लेकिन यह आराम करना बहुत जल्दी है, हमें एक और समस्या है। हमारे पास घटकों का एक लोडिंग है जो काफी अलग-थलग हैं, और इस स्थिति की कल्पना करते हैं - सब कुछ ठीक लगता है। एक प्रबंधक डेवलपर के पास आता है और कहता है: "मैं चाहता हूं कि आप एक कैलेंडर बनाएं।"



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



यह एक ही कैलेंडर लगता है, लेकिन इस खूबसूरत, चाट वाली चीज़ के लिए अलग-अलग लोग जो इंटरफेस चाहते हैं, वह थोड़ा निराशाजनक है।



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



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



यह बहुत आसानी से तराजू है, यह बहुत आसानी से परीक्षणों द्वारा कवर किया गया है, और प्रोग्रामर जो अपनी छोटी सी बात लिखने आया था, अपने कोड को नहीं छूना बहुत आसान है।

ऐसा लगता है कि सब कुछ अब ठीक है सब कुछ ठीक है। Html में हमारे पास एक config है, हमारे पास घटकों की एक डाउनलोड है, जो कि HTML के लिए है। हमारे पास एक दूसरे के साथ घटकों के संचार के लिए एक इंटरफ़ेस है। लेकिन एक और समस्या थी।

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

समाधान सर्वर प्रोग्रामिंग अनुभाग से निकला, उन्होंने मुझे संकेत दिया। यह लंबे समय तक मौजूद रहता है और इसे कहा जाता है - कतार।



हम प्रेषण विधि में एक और तर्क जोड़ते हैं, मैंने इसे लाल रंग में उजागर किया। यह कतार का आकार है। इसके प्रारंभ के दौरान कैलेंडर प्रेषण करता है, क्योंकि हमारे पास कॉलबैक ऑब्जेक्ट है। वह उसे बताता है कि इस तरह के आयोजनों की कतार का आकार एक है, अर्थात अगर कोई इसी तरह की घटना के लिए सदस्यता लेता है और उसे अभी तक कुछ भी प्राप्त नहीं हुआ है, तो पहली बार स्टैक आउट होने पर वह घटनाओं को प्राप्त करेगा। कतार की लंबाई अंतिम तर्क पर इंगित किए गए अंक के आकार के समान होगी। और वह तदनुसार, इन सभी घटनाओं को प्राप्त करता है।

जैसा कि mail.ru के लिए, मैं यहां एक साल से नहीं, बल्कि केवल 4 महीने से काम कर रहा हूं, मैंने सोचा था कि मैं एक लंबा कोट लेकर आऊंगा, और मैं यहां सभी को दिखाऊंगा कि कैसे जीना है। और पहले ही दिन, जब मैंने जावास्क्रिप्ट स्रोत देखा, mail.ru को एहसास हुआ कि उन्होंने लगभग एक ही बात लिखी है। स्थानों में, यहां तक ​​कि पत्रों को भी।



यह पाठ मेल.उ टेक्नोलॉजी फोरम 2011 में सुमिन एंड्री की एक रिपोर्ट पर आधारित है, जो कि 16 नवंबर को इन्फोसिस सेंटर में हुई थी। वीडियो रिपोर्ट के लिए पाठ बनाने के लिए तकनीक के बारे में विवरण के लिए, यहां देखें: द इनसाइड आउट ऑफ द मेल.रु टेक्नोलॉजी फोरम: हाई-टेक इवेंट-मैनेजमेंट । अन्य रिपोर्ट (मोबाइल उपकरणों के लिए संस्करण सहित) के वीडियो संस्करण फोरम वेबसाइट - techforum.mail.ru पर उपलब्ध हैं। रिपोर्ट के पाठ संस्करण हर हफ्ते या फ़ोरम वेबसाइट पर एक समान प्रारूप में प्रायः या कुछ कम प्रकाशित किए जाएंगे। कृपया पाठ में टाइपो के बारे में पीएम को सूचित करें।