🚘 🙎🏻 🔵 हम फ्रंट-एंड लिखते हैं जो काम करता है। या किसी डेवलपर से इंजीनियर कैसे बने। भाग 1 👨‍🏭 🖥️ 🧔🏾

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

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

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

सौ बार सुनने से बेहतर है एक बार देखना

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

परिचयात्मक

कार्ड को तीन पदों में से एक पर कब्जा करने में सक्षम होना चाहिए। 1 - कार्ड को आरंभीकृत किया जाता है, 2 - उपयोगकर्ता ने कार्ड को ऊपर खींच लिया (इसे खोला), 3 - उपयोगकर्ता ने इसे हटाने के लिए कार्ड को नीचे स्वाइप किया।
न्यूनतम कार्ड का आकार 50vh है, अधिकतम सीमित नहीं है (इसका अर्थ है स्थिति 2 में स्क्रॉल करने की संभावना)

आवश्यकताओं को प्राप्त करने के बाद, डेवलपर सबसे पहले यह तय करने की कोशिश कर रहा है कि किस ढांचे का उपयोग करना है। और अभियंता इस प्रक्रिया को अधिक विस्तार से वर्णन करने का प्रयास करेंगे, और इस विवरण से प्रमुख विशेषताओं की पहचान करेंगे।

उदाहरण के लिए:

एक शीर्ष-स्तरीय एक्शन आरेख कुछ इस तरह दिखता है, यह बहुत जटिल नहीं है:

ड्रैगअप कार्रवाई पर विचार करें:

यहां आप तुरंत देख सकते हैं कि ड्रैगपप कार्रवाई केवल उस स्थिति से असंभव है जब कार्ड स्क्रॉल किया जाता है। कार्ड के आकार की परवाह किए बिना, अन्य सभी पदों से, हमें ड्रैगअप कार्रवाई को संभालना चाहिए।

कठिनाई केवल आकार में कार्डों का वर्गीकरण है। हमें कार्ड को छोटे रूप में वर्गीकृत करना चाहिए ताकि इसे 50vh से अधिक खींचने से रोका जा सके, एक मध्यम आकार का कार्ड इसकी ऊंचाई से ऊपर नहीं उठना चाहिए (अन्यथा यह सिर्फ "हवा" में लटका रहता है), लेकिन बड़े आकार के कार्ड को Y = 0 से अधिक नहीं खींचना चाहिए (शीर्ष) स्क्रीन)।

एक अच्छा गणितज्ञ एक आलसी गणितज्ञ है। आकार के आधार पर कार्डों को वर्गीकृत करना और अधिकतम ड्रैग ऊँचाई निर्धारित करना मुश्किल है, यहाँ पर यह सोचना उचित है कि इन कार्डों को और अधिक आसानी से कैसे प्रस्तुत किया जाए, न कि सब कुछ सिर पर हल करने के लिए (यह गणित की तरह जब आप सब कुछ एक सामान्य भाजक पर लाते हैं)।

इस स्तर पर, हम कल्पना कर सकते हैं कि कार्ड एक वर्चुअल व्यूपोर्ट में तैयार किया गया है जो वास्तविक व्यूपोर्ट के सापेक्ष ऊपर और नीचे जा सकता है, इस वर्चुअल व्यूपोर्ट की न्यूनतम ऊंचाई 50vh है, अधिकतम 100vh है।

अब किसी भी स्थिति में सभी आकारों के कार्डों के लिए सामान्य पैरामीटर (inited, open) पावर रिजर्व है।

ड्रैगअप कार्रवाई के प्रसंस्करण आरेख को निम्नानुसार वर्णित किया जा सकता है:

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

और प्रतिबंधात्मक स्थितियों के लिए स्पष्टता में नेता स्क्रॉल है। ध्यान रखने वाली एकमात्र बात यह है कि स्क्रॉलिंग केवल खुली स्थिति में ही संभव हो जाती है, जब वर्चुअल और रियल व्यूपोर्ट पूरी तरह से इंटरसेक्ट हो जाते हैं। (और हम सीएसएस के माध्यम से इस स्थिति को लागू करते हैं, स्थिति के लिए खुले ओवरफ्लो-वाई को निर्दिष्ट करते हुए)

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

संपूर्ण

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

हम फ्रंट-एंड लिखते हैं जो काम करता है। या किसी डेवलपर से इंजीनियर कैसे बने। भाग 1

सौ बार सुनने से बेहतर है एक बार देखना

परिचयात्मक

संपूर्ण

More articles: