लड़ाई में CoffeeScript - पांच चीजें आप जावास्क्रिप्ट के साथ कर सकते हैं

अनुवादक से : इस लेख में कई जावास्क्रिप्ट बारीकियाँ हैं जो उन लोगों के लिए रूचि की हो सकती हैं जो कॉफीस्क्रिप्ट से दूर हैं

सभी प्रोग्रामर की तरह, मैं CoffeeScript के बारे में सावधान हूं। थोड़ा सा संश्लिष्ट चीनी अतिरिक्त संकलन कदम को कैसे सही ठहरा सकता है?

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

1. चर घोषणा

कई शुरुआती मानते हैं कि var x का अर्थ है: "मैंने X नाम के साथ एक चर घोषित किया।" दरअसल, var केवल X को वर्तमान क्षेत्र के बाहर घूमने से रोकता है। यदि आप लिखते हैं:

x = 'Hello from the JavaScript Nation!';

और आप var का उपयोग नहीं करेंगे, तो X अपने आप वैश्विक हो जाएगा। अपने आवेदन के दो हिस्सों में एक समान त्रुटि करें, और एक वैश्विक चर एक त्रुटि पैदा करते हुए, दूसरे को ओवरलैप करेगा।

यहां तक ​​कि अनुभवी पेशेवरों अक्सर एक समान गलती करते हैं, खासकर जब एक श्रृंखला के साथ चर घोषित करते हैं: var a = 1, b = 2 और पर्यावरण के भीतर एक नया मान असाइन करते हैं, जबकि var a = 1; b = 2 वैश्विक चर b को मान प्रदान करता है।

अनुवादक से : उन लोगों के लिए जो संदेह करते हैं कि वे "," और ";" मैं एक और उदाहरण दूंगा: var a = b = 3

कॉफ़ीस्क्रिप्ट पथ

CoffeeScript के साथ, सभी चर स्वचालित रूप से वर्तमान वातावरण में आते हैं। जब आप लिखते हैं:

x = 'Welcome to CoffeeScriptville!'

आप यह सुनिश्चित कर सकते हैं कि आपने किसी वैश्विक चर को फिर से परिभाषित नहीं किया है। इतना ही नहीं, CoffeeScript संकलक के लिए धन्यवाद, X स्वचालित वर्तमान फ़ाइल तक सीमित है।

2. यह एक और

जावास्क्रिप्ट में भ्रम के सबसे आम स्रोतों में से एक यह कीवर्ड है । आप एक साधारण कॉल करें:

 tinman.prototype.loadBrain = function() { this.brain = 'loading...'; $.get('ajax/brain', function(data) { this.brain = data; }); }; 

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

कॉफ़ीस्क्रिप्ट पथ

सबसे पहले, इस कीवर्ड में सामान्य चर से दृश्य अंतर बनाने के लिए उपनाम @ है।

दूसरे, किसी संबंधित फ़ंक्शन के लिए @ चर पास करने के लिए, आपको सामान्य प्रतीक के विपरीत => (बोल्ड एरो) का उपयोग करना होगा, - फ़ंक्शन की घोषणा करना:

 tinman::loadBrain = -> @brain = 'loading...' $.get 'ajax/brain', (data) => @brain = data 

3. स्थितियों में कमी

टर्नेरी ऑपरेटर जावास्क्रिप्ट में एक विशेष स्थान लेता है: अन्य सशर्त संरचनाओं के विपरीत ( यदि , स्विच ), तो यह परिणाम देता है। इसका मतलब यह है कि प्रोग्रामर को टर्नेरी ऑपरेटर की संक्षिप्तता के बीच चयन करना होगा:

 closestEdge = x > width / 2 ? 'right' : x < width / 2 ? 'left' : 'center'; 

या तार्किक श्रृंखला:

 if (x > width / 2) { closestEdge = 'right'; } else if (x < width / 2) { closestEdge = 'left'; } else { closestEdge = 'center'; } 

कॉफ़ीस्क्रिप्ट पथ

CoffeeScript की सभी स्थितियों के परिणामस्वरूप परिणाम मिलता है। यह हमें व्यर्थ दोहराव के बिना एक स्पष्ट दूसरा दृष्टिकोण देता है:

 closestEdge = if x > width / 2 'right' else if x < width / 2 'left' else 'center' 

4. अतुल्यकालिक कार्यक्षमता

लोकप्रिय परीक्षण "क्या आप जावास्क्रिप्ट वेल जानते हैं" में यह कार्य शामिल है:

 for (var i = 1; i <= 3; i++) { setTimeout(function() { console.log(i); }, 0); } 

परिणाम होगा:
4
4
4
क्यों? यहां तक ​​कि अगर टाइमआउट को सेटटाइमआउट में 0 पर सेट किया गया है, तो यह फ़ंक्शन लूप के समाप्त होने के बाद ही काम करेगा। और जब फ़ंक्शन निष्पादित किया जाता है, तो मैं 4 वें के बराबर होगा। I के प्रत्येक मूल्य को पकड़ने के लिए, आपको करना होगा:

 for (var i = 1; i <= 3; i++) { (function(i) { setTimeout(function() { console.log(i); }, 0); })(i); } 

कॉफ़ीस्क्रिप्ट पथ

हालांकि कॉफीस्क्रिप्ट स्वचालित रूप से एक लूप में चर पर कब्जा नहीं करता है, यह एक छोटी कैप्चर प्रदान करता है:

 for i in [1..3] do (i) -> setTimeout (-> console.log i), 0 

परिणाम होगा:
1
2
3

5. पुनरावृत्ति, पुनरावृत्ति

कोड खुद के लिए बोलता है:

 x = sprite.x; y = sprite.y; css = { opacity: opacity, fontFamily: fontFamily }; function(request) { body = request.body; status = request.status; // ... } 

कॉफ़ीस्क्रिप्ट पथ

ऊपर का प्रत्येक टुकड़ा एक पंक्ति में बदल जाता है:

 {x, y} = sprite css = {opacity, fontFamily} ({body, status}) -> ... 

निष्कर्ष

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

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

(बेशक, अगर आप रेल 3.1 में अपग्रेड करते हैं, तो आपके पास कोई विकल्प नहीं होगा )
अनुवादक से : किसी को गुमराह न करने के लिए, मैं कहूंगा कि यह एक मजाक है! बेशक एक विकल्प है, बस जेमफाइल से लाइन हटा दें।

अनुवादक से : आरआईएल 3.1 बीटा 1 की रिहाई पर सभी आरओआर डेवलपर्स को बधाई। अनुवाद में सब कुछ सटीक नहीं है, कृपया इसे पीएम को भेजें।