15 KiB
कोड रीफ़ैक्टरिंग और दस्तावेज़ीकरण असाइनमेंट
सीखने के उद्देश्य
इस असाइनमेंट को पूरा करके, आप उन आवश्यक सॉफ़्टवेयर विकास कौशलों का अभ्यास करेंगे जिनका उपयोग पेशेवर डेवलपर्स रोज़ाना करते हैं। आप कोड को रखरखाव योग्य बनाने के लिए व्यवस्थित करना, अमूर्तता के माध्यम से पुनरावृत्ति को कम करना, और भविष्य के डेवलपर्स (खुद सहित!) के लिए अपने कार्य का दस्तावेज़ीकरण करना सीखेंगे।
साफ़-सुथरा, अच्छी तरह दस्तावेज़ किया गया कोड वास्तविक दुनिया के वेब विकास परियोजनाओं में बहुत महत्वपूर्ण होता है जहाँ कई डेवलपर्स सहयोग करते हैं और कोडबेस समय के साथ विकसित होते हैं।
असाइनमेंट अवलोकन
आपके बैंकिंग ऐप की app.js फ़ाइल लॉगिन, पंजीकरण, और डैशबोर्ड कार्यात्मकता के साथ काफी बढ़ गई है। इसे पढ़ने में आसान, रखरखाव में बेहतर, और पुनरावृत्ति को कम करने के लिए पेशेवर विकास प्रथाओं का उपयोग करके इस कोड को रीफ़ैक्टर करने का समय है।
निर्देश
अपने वर्तमान app.js कोड को इन तीन मुख्य रीफ़ैक्टरिंग तकनीकों को लागू करके बदलें:
1. कॉन्फ़िगरेशन स्थिरांक निकालें
कार्य: अपनी फ़ाइल के शीर्ष पर पुन: उपयोग करने योग्य स्थिरांकों के साथ एक कॉन्फ़िगरेशन अनुभाग बनाएं।
क्रियान्वयन मार्गदर्शन:
- सर्वर API बेस URL को निकालें (जो वर्तमान में कई जगहों पर हार्डकोडेड है)
- उन त्रुटि संदेशों के लिए स्थिरांक बनाएं जो कई फ़ंक्शनों में दिखाई देते हैं
- बार-बार उपयोग किए जाने वाले रूट पथ और तत्त्व पहचानकर्ताओं को निकालने पर विचार करें
उदाहरण संरचना:
// विन्यास स्थिरांक
const API_BASE_URL = 'http://localhost:5000/api';
const ROUTES = {
LOGIN: '/login',
DASHBOARD: '/dashboard'
};
2. एक एकीकृत अनुरोध फ़ंक्शन बनाएं
कार्य: createAccount() और getAccount() के बीच डुप्लिकेट कोड को समाप्त करने के लिए पुन: प्रयोज्य sendRequest() फ़ंक्शन बनाएं।
आवश्यकताएं:
- GET और POST दोनों अनुरोधों को संभालें
- उचित त्रुटि प्रबंधन शामिल करें
- विभिन्न URL endpoints का समर्थन करें
- वैकल्पिक अनुरोध बॉडी डेटा स्वीकार करें
फ़ंक्शन सिग्नेचर मार्गदर्शन:
async function sendRequest(endpoint, method = 'GET', data = null) {
// आपकी कार्यान्वयन यहाँ
}
3. पेशेवर कोड दस्तावेज़ीकरण जोड़ें
कार्य: अपने कोड को स्पष्ट, सहायक टिप्पणियों के साथ दस्तावेज़ित करें जो आपके लॉजिक के "क्यों" को समझाएं।
दस्तावेज़ीकरण मानक:
- फ़ंक्शन दस्तावेज़ीकरण जोड़ें जो उद्देश्य, पैरामीटर, और रिटर्न मानों को समझाएं
- जटिल लॉजिक या व्यवसाय नियमों के लिए इनलाइन टिप्पणियां शामिल करें
- संबंधित फ़ंक्शनों को एक साथ समूहित करें अनुभाग शीर्षकों के साथ
- किसी भी अस्पष्ट कोड पैटर्न या ब्राउज़र-विशिष्ट वर्कअराउंड को समझाएं
उदाहरण दस्तावेज़ीकरण शैली:
/**
* Authenticates user and redirects to dashboard
* @param {Event} event - Form submission event
* @returns {Promise<void>} - Resolves when login process completes
*/
async function login(event) {
// जावास्क्रिप्ट के साथ संभालने के लिए डिफ़ॉल्ट फॉर्म सबमिशन को रोकें
event.preventDefault();
// आपका कार्यान्वयन...
}
सफलता मानदंड
आपका रीफ़ैक्टर्ड कोड इन पेशेवर विकास प्रथाओं को प्रदर्शित करना चाहिए:
उत्कृष्ट क्रियान्वयन
- ✅ स्थिरांक: सभी मैजिक स्ट्रिंग्स और URL स्पष्ट नामित स्थिरांकों में निकाले गए हैं
- ✅ DRY सिद्धांत: सामान्य अनुरोध लॉजिक को पुन: प्रयोज्य
sendRequest()फ़ंक्शन में समेकित किया गया है - ✅ दस्तावेज़ीकरण: फ़ंक्शनों के पास उद्देश्य और पैरामीटर समझाने वाले स्पष्ट JSDoc टिप्पणियां हैं
- ✅ संगठन: कोड तार्किक रूप से अनुभाग शीर्षकों और सुसंगत स्वरूपण के साथ समूहित है
- ✅ त्रुटि प्रबंधन: नए अनुरोध फ़ंक्शन का उपयोग करके बेहतर त्रुटि प्रबंधन
पर्याप्त क्रियान्वयन
- ✅ स्थिरांक: अधिकांश दोहराए गए मान निकाले गए हैं, कुछ मामूली हार्डकोडेड मान शेष हैं
- ✅ फैक्टराइज़ेशन: मूल
sendRequest()फ़ंक्शन बनाया गया है लेकिन सभी किनारों के मामलों को संभाल नहीं सकता - ✅ टिप्पणियां: मुख्य फ़ंक्शन दस्तावेज़ित हैं, हालांकि कुछ व्याख्याएं पूरी नहीं हो सकती हैं
- ✅ पढ़ने की योग्यता: कोड आम तौर पर अच्छी तरह संगठित है, कुछ सुधार की गुंजाइश है
सुधार की आवश्यकता
- ❌ स्थिरांक: कई मैजिक स्ट्रिंग्स और URL पूरी फ़ाइल में हार्डकोडेड बने हुए हैं
- ❌ पुनरावृत्ति: समान फ़ंक्शनों के बीच महत्वपूर्ण कोड डुप्लिकेशन बना हुआ है
- ❌ दस्तावेज़ीकरण: टिप्पणी अनुपस्थित या अपर्याप्त हैं जो कोड के उद्देश्य को स्पष्ट नहीं करतीं
- ❌ संगठन: कोड में स्पष्ट संरचना और तार्किक समूह नहीं है
अपना रीफ़ैक्टर्ड कोड परीक्षण करें
रीफ़ैक्टरिंग के बाद सुनिश्चित करें कि आपका बैंकिंग ऐप सही ढंग से काम करता है:
- सभी उपयोगकर्ता फ्लोज़ का परीक्षण करें: पंजीकरण, लॉगिन, डैशबोर्ड प्रदर्शन, और त्रुटि प्रबंधन
- API कॉल की पुष्टि करें: सुनिश्चित करें कि आपका
sendRequest()फ़ंक्शन खाता बनाने और पुनः प्राप्त करने दोनों के लिए काम करता है - त्रुटि परिदृश्यों की जांच करें: अवैध क्रेडेंशियल्स और नेटवर्क त्रुटियों के साथ परीक्षण करें
- कंसोल आउटपुट की समीक्षा करें: रीफ़ैक्टरिंग के दौरान कोई नई त्रुटियाँ न आई हों
सबमिशन दिशानिर्देश
अपनी रीफ़ैक्टर्ड app.js फ़ाइल जमा करें जिसमें शामिल हों:
- विभिन्न कार्यात्मकताओं को व्यवस्थित करने वाले स्पष्ट अनुभाग शीर्षक
- सुसंगत कोड स्वरूपण और इंडेंटेशन
- सभी फ़ंक्शनों के लिए पूर्ण JSDoc दस्तावेज़ीकरण
- शीर्ष पर एक संक्षिप्त टिप्पणी जो आपके रीफ़ैक्टिंग दृष्टिकोण को समझाती हो
बोनस चैलेंज: एक सरल कोड दस्तावेज़ीकरण फ़ाइल (CODE_STRUCTURE.md) बनाएं जो आपके ऐप की वास्तुकला और विभिन्न फ़ंक्शनों के साथ काम करने के बारे में समझाए।
वास्तविक दुनिया का संबंध
यह असाइनमेंट उस प्रकार के कोड रखरखाव का अनुकरण करता है जिसे पेशेवर डेवलपर्स नियमित रूप से करते हैं। उद्योग के परिदृश्यों में:
- कोड समीक्षा पठनीयता और रखरखाव योग्यता का मूल्यांकन करती है जैसे यह असाइनमेंट
- तकनीकी ऋण तब बढ़ता है जब कोड नियमित रूप से रीफ़ैक्टर और दस्तावेज़ित नहीं किया जाता
- टीम सहयोग इस पर निर्भर करता है कि स्पष्ट, अच्छी तरह से दस्तावेज़ किया गया कोड नए टीम सदस्यों के लिए समझने योग्य हो
- बग फिक्स अच्छी तरीके से व्यवस्थित कोडबेस में उचित अमूर्तताओं के साथ बहुत आसान होते हैं
यहाँ जो कौशल आप अभ्यास कर रहे हैं — स्थिरांक निकालना, पुनरावृत्ति समाप्त करना, और स्पष्ट दस्तावेज़ लिखना — पेशेवर सॉफ़्टवेयर विकास के लिए बुनियादी हैं।
अस्वीकरण: इस दस्तावेज़ का अनुवाद AI अनुवाद सेवा Co-op Translator का उपयोग करके किया गया है। हम सटीकता के लिए प्रयासरत हैं, लेकिन कृपया ध्यान रखें कि स्वचालित अनुवाद में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए पेशेवर मानव अनुवाद की अनुशंसा की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।