अनुवाद AirBnB स्टाइल गाइड

हम, बाकी सभी लोगों की तरह, शुरू में विकास में कोड लिखने के लिए मानकों का उपयोग करते थे, लेकिन वास्तव में वे कुछ इस तरह से सीमित थे:

- क्या आप ऊंट में लिखते हैं?
- हां, हमेशा की तरह, एक ऊंट में
... दो हफ्ते हो गए ...
- ठीक है, हम एक ऊंट में सहमत हुए !!!

हमारे मामले में, शायद अंतिम वाक्यांश नहीं था।
लंबे समय से मैं किसी तरह इसे व्यवस्थित करना चाहता था, लेकिन मेरे हाथ jQuery, Google, ideomatic.js और Crockford से शैलियों के बीच विकल्प तक नहीं पहुंचे।

जब AirBnB नेतृत्व एक महीने पहले की तुलना में थोड़ी अधिक मात्रा में ट्रेंडिंग में आया, तो इसने तुरंत हमारी आंख पकड़ ली ...
एक हफ्ते पहले, हमने इसे मुख्य रूप से अपनी आवश्यकताओं के लिए अनुवादित किया , लेकिन समुदाय के साथ साझा नहीं कर सके।

• मूल: https://github.com/airbnb/javascript
• अनुवाद: https://github.com/uprock/javascript

मैं अत्यधिक सभी नौसिखिया जेएस डेवलपर्स को कम से कम पढ़ने की सलाह देता हूं।


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

डिज़ाइन के बारे में, यह मार्गदर्शिका "लोकप्रिय" विकल्पों का उपयोग करती है।
उदाहरण:
2 स्पेस टैब का उपयोग Google, npm, Node.js, Idiomatic में भी किया जाता है
हमेशा एक अर्धविराम का उपयोग करें, जैसे कि Google, Node.js, Crockford में
एक संस्करण में झूलते हुए अल्पविराम के साथ वैरिएबल घोषित करना, जैसा कि मुहावरेदार, jQuery में
दिलचस्प है, यहां तक ​​कि एक समान क्षण यहां भी संकेत दिया गया है:

उन चरों को घोषित करें जिन्हें अंत में मान नहीं दिया गया है। यह तब सुविधाजनक है जब आपको पहले से ही दिए गए मूल्यों के आधार पर इनमें से किसी एक चर का मान निर्धारित करने की आवश्यकता है।

चर के लिए camelCase - जैसे Google, npm, Node, Idiomatic में
उसी समय, यह मार्गदर्शिका स्पष्ट रूप से इंगित करती है:

ऑब्जेक्ट्स, फ़ंक्शंस और वेरिएबल्स के नाम के लिए कैमलकेस का उपयोग करें
क्लास कंस्ट्रक्टर्स के नाम के लिए PascalCase का इस्तेमाल करें।

कुछ बिंदु स्पष्ट और स्पष्ट रूप से स्पष्ट हैं, उदाहरण के लिए:

वस्तुओं के अंत में अतिरिक्त अल्पविराम: कोई नहीं। यह संगतता मोड में IE6 / 7 और IE9 के साथ समस्याएं पैदा कर सकता है। कुछ ईएस 3 कार्यान्वयन में, सरणी के अंत में अल्पविराम इसकी लंबाई 1 से बढ़ाता है, जिससे समस्याएं हो सकती हैं। यह प्रश्न केवल ES5 (मूल) में स्पष्ट किया गया था:

ECMAScript 5 संस्करण अनायास ही इस तथ्य को स्थापित करता है कि ArrayInitialiser के अंत में अल्पविराम को सरणी की लंबाई नहीं बढ़ानी चाहिए। यह ECMAScript 3 संस्करण से एक गैर-अर्थ परिवर्तन है, लेकिन कुछ कार्यान्वयन ने पहले इस समस्या को गलत तरीके से हल किया।

दायरे के भीतर चर और कार्यों की घोषणाओं के "सरफेसिंग" के तंत्र को स्पष्ट रूप से समझाया गया है।

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

प्रत्येक उदाहरण स्पष्ट रूप से और रेखांकन कोड के एक परीक्षण ब्लॉक द्वारा सचित्र है, प्रदर्शन या प्रदर्शन के कारणों के लिए चुनी गई बहुत सी चीजें jsPerf, ECMAScript विनिर्देश (उन अविश्वसनीय उबाऊ लोगों के लिए जिनके पास सरल स्पष्टीकरण, या इस विषय पर कुछ बहुत दिलचस्प लेखों की आवश्यकता नहीं है) के लिंक के साथ हैं।

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

यहां व्यस्ततम के लिए सामग्री का त्वरित सारांश दिया गया है:

• वस्तुओं और सरणियों को बनाने के लिए हमेशा छोटे वाक्यविन्यास का उपयोग करें;
  
• तार के लिए, एकल उद्धरण का उपयोग करें, अधिकतम स्ट्रिंग लंबाई 80 वर्ण है, + के माध्यम से हाइफ़नेशन;
  
• ब्लॉक की शुरुआत में वैरिएबल (और फ़ंक्शंस) की सभी घोषणाएं, अल्पविराम से और पूरे फ़ंक्शन के लिए एक संस्करण से अलग हो जाती हैं। सशर्त ब्लॉकों में फ़ंक्शन घोषणा (असाइनमेंट नहीं) की अनुमति नहीं है;
  
• मूल्य असाइनमेंट के बिना चर चर घोषणा के अंत में जाते हैं;
  
• किसी वस्तु के गुणों और तरीकों तक पहुंच हमेशा एक अवधि के माध्यम से संभव है, उपयोगकर्ता ['प्राप्त'] जैसे अनुरोध निषिद्ध है (यदि यह कोड में कुछ विशेष के लिए आवश्यक नहीं है);
  
• हमेशा सख्त समानता की जांच करें और टाइप कास्टिंग का उपयोग करें;
  
• घुंघराले ब्रेसिज़ केवल बहु-पंक्ति कोड ब्लॉक के लिए हैं। यदि एक नई लाइन से एक बयान है - इसे {} में भी लपेटा जाना चाहिए;
  
• मल्टी-लाइन टिप्पणियां हमेशा / ** * / के माध्यम से, JSDoc का उपयोग करें;
  
• एकल लाइन टिप्पणियों के माध्यम से ही // हमेशा वर्णन से पहले, वे एक खाली लाइन से पहले होते हैं;
  
• टैब - दो स्थान, उद्घाटन ब्रैकेट के साथ हमेशा एक स्थान;
  
• कॉल श्रृंखला में तार्किक इंडेंटेशन का उपयोग करें, प्रत्येक नई लाइन पर कॉल करता है। इसलिए, jQuery में, उदाहरण के लिए, लक्ष्य ब्लॉक (.find, .ososest, .children और इतने पर) के प्रत्येक परिवर्तन से पहले और बाद में एक ओस्टप रखा जाता है;
  
• अर्धविराम - जहां भी आवश्यक हो;
  
• एक ऑपरेशन की शुरुआत में जब भी संभव हो, प्रकारों का बलात्कार; संख्याओं के लिए हमेशा parseInt या संख्या का उपयोग करें। कास्टिंग के लिए बिटवाइज़ संचालन गति के लिए अनुमेय हैं, इस तरह के प्रत्येक ऑपरेशन पर टिप्पणी करने की आवश्यकता है;
  
• सभी कार्यों को नामित किया गया है, सभी चर और कार्यों के लिए कैमसेलकेस, निर्माणकर्ताओं के लिए पास्कलकेस। निजी विधियों और गुणों के लिए, पहले "_" सेट करें
  इसे संदर्भित करने के लिए, _this का उपयोग करें;
  
• यूनिवर्सल एक्सेसर्स का उपयोग नहीं किया जाता है, प्रत्येक संपत्ति या सामान्य .get के लिए गेटर्स और सेटर असाइन किए जाते हैं और .set बनाये जाते हैं।
  एक प्रोटोटाइप को बदलना बुराई है; प्रोटोटाइप का केवल विस्तार किया जा सकता है;
  
• एक घटना को हमेशा एक वस्तु के रूप में पारित किया जाता है ताकि इसे चढ़ाई के दौरान विस्तारित किया जा सके;
  
• jQuery के चर $ के साथ उपसर्ग किए गए हैं;
  

हमने अपने दम पर कुछ व्याख्यात्मक ब्लॉक जोड़े और एक परिवर्तन किया: मूल ने // FIXME और // TODO टिप्पणियों का उपयोग करने का सुझाव दिया, लेकिन IDE और कोड संपादक आमतौर पर केवल // TODO को उजागर करते हैं, इसलिए // FIXME के ​​बजाय इसका उपयोग करने का सुझाव दिया गया है: TODO FIXME स्वचालित रूप से उत्पन्न सूचकांक पर आसान नेविगेशन के लिए।

बस के मामले में, मैं लिंक की नकल:

• मूल: https://github.com/airbnb/javascript
• अनुवाद: https://github.com/uprock/javascript