👩🏽‍🎨 🤘🏻 🦁 कोड डिजाइन, कोड गुणवत्ता जाँच प्रक्रिया का अनुकूलन 🔧 👆🏾 🐻

जावास्क्रिप्ट, जीतने की शैली

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

कोड की गुणवत्ता तभी बेहतर होगी जब पूरी टीम पूर्वनिर्धारित शैली का पालन करेगी। कुछ नियमों को विकसित करने में कुछ समय बिताना निश्चित रूप से इसके लायक है।

पायथन के विपरीत, जिसके पास "स्टाइल गाइड फॉर पायथन कोड" नियमों का एक एकल सेट है, जावास्क्रिप्ट नहीं करता है। हालांकि, इसमें से चुनने के लिए 6 लोकप्रिय गाइड हैं:

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

पंजीकरण

मांगपत्र

2 स्थान, कोई और अधिक और कोई टैब नहीं: Google, npm, Node.js, मुहावरेदार
टैब: jQuery
4 रिक्त स्थान: क्रॉकफोर्ड

तर्कों और अभिव्यक्ति के बीच का स्थान

एक स्थान के बिना, उदाहरण के लिए: Google, npm, Node.js
```
project.MyClass = function(arg1, arg2) { 
```
एक स्थान के साथ, उदाहरण के लिए: मुहावरेदार, jQuery
```
 for ( i = 0; i < length; i++ ) { 
```
माइनर ओपिनियन: क्रॉकफोर्ड

कई गाइड आपको यह भी याद दिलाते हैं कि लाइनों के अंत में कोई स्थान नहीं है (रिक्त स्थान)

लाइन की लंबाई

अधिकतम 80 वर्ण: Google, npm, Node.js, Crockford

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

सेमीकोलन

हमेशा एक अर्धविराम का उपयोग करें: Google, Node.js, Crockford
कुछ स्थितियों में उपयोग नहीं किया जाना है: npm
लघु राय: jQuery, मुहावरेदार

JSDoc : Google, मुहावरेदार
मुहावरेदार स्टाइल गाइड सरल टिप्पणियों की भी अनुमति देता है, लेकिन JSDoc को प्राथमिकता दी जाती है
माइनर ओपिनियन: npm, Node.js, jQuery, Crockford

उद्धरण

एकल उद्धरण बेहतर हैं। 'value' से बेहतर 'value' "value": Google, Node.js
दोहरा उद्धरण ": jQuery
माइनर ओपिनियन: npm, मुहावरेदार, क्रॉकफोर्ड

परिवर्तनीय घोषणा

एक लाइन पर एक चर: Node.js
```
 var foo = ''; var bar = ''; 
```
उदाहरण के रूप में लाइन के अंत में अल्पविराम द्वारा अलग किए गए कई चर: मुहावरेदार, jQuery
```
 var foo = "", bar = "", quux; 
```
लाइन की शुरुआत में कोमा: एन.पी.एम.
```
 var foo = "" , bar = "" , quux; 
```
माइनर ओपिनियन: गूगल, क्रॉकफोर्ड

कोष्ठक

शुरुआती कोष्ठकों को एक ही पंक्ति पर रखें: Google, npm, Node, Idiomatic, jQuery, Crockford
```
 function thisIsBlock() { 
```
इसका तात्पर्य यह है कि कोष्ठक का उपयोग हमेशा किया जाना चाहिए, यहां तक कि उन स्थितियों में भी जहां उन्हें छोड़ा जा सकता है।
एनपीएम गाइड का कहना है कि कोष्ठक का उपयोग केवल तब किया जाना चाहिए जब फ़ंक्शन का शरीर अगली पंक्ति से लिपटा हो।
```
 if (foo) bar() while (foo) { bar() } 
```

वैश्विक चर

वैश्विक चर का उपयोग न करें: Google, क्रॉकफ़ोर्ड

गूगल:
वैश्विक नाम संघर्ष डिबग करना मुश्किल है, और दो परियोजनाएं जब एकीकृत करने की कोशिश करती हैं, तो यह अलग-अलग समस्याएं पैदा कर सकती हैं। सामान्य जावास्क्रिप्ट कोड साझा करना संभव बनाने के लिए, हमने टक्करों को रोकने के लिए सम्मेलनों को अपनाया है।

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

नाम

चर

पहला शब्द कैपिटल लेटर के साथ, बाद में एक कैपिटल लेटर के साथ: Google, npm, Node, Idiomatic
```
 var foo = ""; var fooName = ""; 
```

स्थिरांक

पूरा शब्द बड़े अक्षरों में: Google, npm, Node
```
 var CONS = 'VALUE'; var CONSTANT_NAME = 'VALUE'; 
```
माइनर ओपिनियन: jQuery, मुहावरेदार, क्रॉकफोर्ड

कार्यों

पहला शब्द एक छोटे अक्षर के साथ, बाद के सभी एक पूंजी वाले के साथ (camelCaps / camelCase): Google, npm, Node, Idiomatic

एक लंबा नाम पसंद किया जाता है जो फ़ंक्शन की कार्रवाई का वर्णन करता है।
```
 function veryLongOperationName function short().. 
```
शब्दों का प्रयोग करें, सेट करें, प्राप्त करें:
```
 function isReady() function setName() function getName() 
```
मामूली राय: jQuery, Crockford

सरणियों

शब्द के बहुवचन रूप का उपयोग करें: मुहावरेदार
```
  var documents = []; 
```
माइनर ओपिनियन: Google, jQuery, npm, Node, Crockford

वस्तुओं और वर्गों

पास्कल केस (एक बड़े अक्षर के साथ प्रत्येक शब्द) का उपयोग करें: Google, npm, Node
```
 var ThisIsObject = new Date(); 
```
माइनर ओपिनियन: jQuery, मुहावरेदार, क्रॉकफोर्ड

अन्य

कई कंपाउंड फ़ाइल नामों और सेटिंग्स के लिए सभी निचले-हाइफ़न-सीएसएस-केस का उपयोग करें: npm

JSHint और .jshintrc फ़ाइल का उपयोग करें

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

 { "camelcase" : true, "indent": 2, "undef": true, "quotmark": "single", "maxlen": 80, "trailing": true, "curly": true }

ब्राउज़र द्वारा संसाधित की गई सभी फ़ाइलों में, जोड़ें:

 /* jshint browser:true, jquery:true */

Node.js फ़ाइलों में, जोड़ें:

 /*jshint node:true */

सभी प्रकार की JS फ़ाइलों में, जोड़ना भी बेहतर है:

 'use strict';

यह JSHint और जावास्क्रिप्ट हैंडलर दोनों को एक पूरे के रूप में प्रभावित करेगा, जो कम त्रुटि सहिष्णु हो जाएगा, लेकिन तेजी से काम करेगा। 'सख्त उपयोग करें' (बाहरी लिंक) के बारे में और पढ़ें

Git कमिट करने से पहले JSHint कोड को स्वचालित रूप से जांचना

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

 #!/bin/bash # Pre-commit Git hook to run JSHint on JavaScript files. # # If you absolutely must commit without testing, # use: git commit --no-verify filenames=($(git diff --cached --name-only HEAD)) which jshint &> /dev/null if [ $? -ne 0 ]; then echo "error: jshint not found" echo "install with: sudo npm install -g jshint" exit 1 fi for i in "${filenames[@]}" do if [[ $i =~ \.js$ ]]; then echo jshint $i jshint $i if [ $? -ne 0 ]; then exit 1 fi fi done

ps।
पढ़ने वालों (मूल लेख) के अनुरोध पर, एक Git रिपॉजिटरी बनाई गई थी, कोई भी .jshintrc या प्रलेखन के लिए अपने परिवर्तन कर सकता है।

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

मूल लेख: (http://seravo.fi/2013/javascript-the-winning-style)

कोड डिजाइन, कोड गुणवत्ता जाँच प्रक्रिया का अनुकूलन