कोड को पठनीय कैसे बनाया जाए

शायद ही कभी हम सभी ने (और कुछ लिखते हैं) बुरा कोड लिखा है, और मुझे आशा है कि हम सभी अपने कौशल को बेहतर बनाने के लिए काम करेंगे, और इस तरह के लेखों को न पढ़ें।

हमें केवल उत्पादक कोड ही नहीं, अच्छे कोड लिखने की क्या आवश्यकता है?

जबकि आपके उत्पाद या साइट का प्रदर्शन महत्वपूर्ण है, जिस तरह से आपका कोड दिखता है वह भी महत्वपूर्ण है। इसका कारण यह है कि न केवल मशीन आपके कोड को पढ़ रही है ।

सबसे पहले, जल्दी या बाद में आपको अपने स्वयं के कोड को फिर से पढ़ना होगा, और जब वह समय आता है, तो केवल अच्छी तरह से लिखा कोड आपको यह समझने में मदद करेगा कि आपने क्या लिखा है, या यह कैसे ठीक करें।

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

अंत में, आइए एक विशिष्ट उदाहरण देखें।

भाग 1: बुरे कोड की पहचान कैसे करें?

मेरी राय में, खराब कोड की पहचान करने का सबसे आसान तरीका है, कोड को पढ़ने की कोशिश करना जैसे कि यह एक वाक्य या वाक्यांश था ।

उदाहरण के लिए, इस कोड को देखें:

TraverseUpUntil के बुरे संस्करण का स्क्रीनशॉट

ऊपर प्रस्तुत फ़ंक्शन एक तत्व और एक सशर्त फ़ंक्शन को स्वीकार करता है और निकटतम पैरेंट नोड को लौटाता है जो सशर्त फ़ंक्शन को संतुष्ट करता है।

const traverseUpUntil = (el, f) => { 

इस तथ्य के आधार पर कि कोड को सादे पाठ की तरह पढ़ा जाना चाहिए, पहली पंक्ति में तीन सकल दोष हैं।

• फ़ंक्शन पैरामीटर को शब्दों की तरह नहीं पढ़ा जाता है ।
• मान लीजिए कि el को समझा जा सकता है, क्योंकि इस तरह के नाम का इस्तेमाल आमतौर पर किसी तत्व को दर्शाने के लिए किया जाता है, लेकिन पैरामीटर f का नाम कुछ भी स्पष्ट नहीं करता है।
• फ़ंक्शन का नाम इस तरह से पढ़ा जा सकता है: "एल पास होने तक स्विच करें एफ", जो शायद "एल के पास से गुजरने तक स्विच" के रूप में सबसे अच्छा पढ़ा जाता है। बेशक, ऐसा करने का सबसे अच्छा तरीका यह है कि फ़ंक्शन को el.traverseUpUntil(f) रूप में बुलाया जाए, लेकिन यह एक और समस्या है।

 let p = el.parentNode 

यह दूसरी पंक्ति है। नामों के साथ समस्या, इस बार चर के साथ। यदि कोई कोड को देखता है, तो सबसे अधिक संभावना है कि वे समझेंगे कि p क्या p । यह el पैरामीटर parentNode । हालांकि, क्या होता है जब हम कहीं और p उपयोग करते हैं, तो हमारे पास अब कोई संदर्भ नहीं है जो बताता है कि यह क्या है ।

 while (p.parentNode && !f(p)) { 

अगली पंक्ति में, हम जो मुख्य समस्या का सामना कर रहे हैं, वह यह समझने की कमी है कि !f(p) अर्थ है या करता है, क्योंकि "f" का अर्थ कुछ भी हो सकता है । यह माना जाता है कि कोड पढ़ने वाले व्यक्ति को यह समझना चाहिए कि !f(p) एक निश्चित स्थिति को संतुष्ट करने के लिए वर्तमान नोड का एक चेक है। यदि यह गुजरता है, तो चक्र बाधित होता है।

 p = p.parentNode 

यहाँ सब कुछ स्पष्ट है।

 return p 

यह पूरी तरह से स्पष्ट नहीं है कि अमान्य चर नाम के कारण क्या लौटाया जाता है।

भाग 2: आइए रिफ्लेक्टर

TraverseUpUntil के एक अच्छे संस्करण का स्क्रीनशॉट

सबसे पहले, हम मापदंडों और उनके क्रम के नाम बदलते हैं: (el, f) => से (condition, node) => ।
आप सोच रहे होंगे कि "तत्व (रूसी तत्व ) के बजाय मैंने" नोड "(रूसी नोड ) का इस्तेमाल क्यों किया। मैंने इसका उपयोग निम्नलिखित कारणों से किया:

• हम नोड्स के संदर्भ में कोड लिखते हैं, उदाहरण के लिए .parentNode , इसलिए इसे सुसंगत क्यों नहीं बनाया जाए।
• "नोड" "तत्व" से छोटा है, और अर्थ खो नहीं है ।

फिर हम चर नामों पर चलते हैं:

 let parent = node 

अपने चर के मूल्य को इसके नाम में पूरी तरह से प्रकट करना बहुत महत्वपूर्ण है, इसलिए "पी" अब "माता-पिता" (रूसी माता-पिता ) है। आपने यह भी देखा होगा कि अब हम मूल node.parentNode प्राप्त करके शुरू नहीं करते हैं, इसके बजाय हम केवल नोड प्राप्त करते हैं।

हम और आगे बढ़ते हैं:

 do { parent = parent.parentNode } while (parent.parentNode && !condition(parent)) 

while सामान्य के बजाय while मैंने do ... while चुना। इसका मतलब यह है कि हमें हर बार परिस्थितियों की जाँच करने से पहले मूल नोड प्राप्त करने की आवश्यकता है, न कि इसके विपरीत। do ... while का उपयोग do ... while भी सादे पाठ की तरह कोड को पढ़ने में मदद करता है।

आइए पढ़ने की कोशिश करें : "माता-पिता के मूल नोड को माता-पिता को सौंपें, जब तक कि माता-पिता के पास माता-पिता का नोड है, और स्थिति फ़ंक्शन सही नहीं है । " पहले से ही बहुत साफ है।

 return parent 

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

भाग 3: कोड सरलीकरण

अब जब आपने कोड को पठनीय बना लिया है, तो अनावश्यक कोड को हटाने का समय आ गया है । मुझे यकीन है कि आप में से कुछ ने पहले ही ध्यान दिया है कि हमें parent चर की बिल्कुल भी आवश्यकता नहीं है।

 const traverseUpUntil = (condition, node) => { do { node = node.parentNode } while (node.parentNode && !condition(node)) return node } 

मैंने केवल पहली पंक्ति को हटा दिया और "मूल" को "नोड" से बदल दिया। इसलिए मैंने "पैरेंट" बनाने के अनावश्यक कदम को छोड़ दिया और सीधे पाश में चला गया।

लेकिन चर नाम के बारे में क्या?

हालांकि "नोड" इस चर के लिए सबसे अच्छा विवरण नहीं है, यह संतोषजनक है। लेकिन चलो वहाँ नहीं रुकते हैं, चलो नाम बदलें। "CurrentNode" के बारे में क्या?

 const traverseUpUntil = (condition, currentNode) => { do { currentNode = currentNode.parentNode } while (currentNode.parentNode && !condition(currentNode)) return currentNode } 

यह बेहतर है! अब, जब हम विधि पढ़ते हैं, तो हम जानते हैं कि currentNode हमेशा उस नोड का प्रतिनिधित्व करता है जो हम "कुछ दयालु" नोड होने के बजाय अब में हैं।