फ्रंट-एंड डेवलपमेंट में COLT एनोटेशन का उपयोग करना

COLT / JS (कोड ऑर्केस्ट्रा लाइवकोडिंग टूल) एक जावास्क्रिप्ट प्री-प्रोसेसर है। इसका मतलब यह है कि "लाइव कोडिंग" के प्रभाव को प्राप्त करने के लिए, एप्लिकेशन को एक विशेष तरीके से स्रोत कोड को जावास्क्रिप्ट में परिवर्तित करने की आवश्यकता है ताकि उपयोगकर्ता द्वारा अपने स्रोत कोड को बदलने और इसे सहेजने के साथ ही किसी भी फ़ंक्शन के "हॉट-स्वैप" को लागू करना संभव हो। ऐसे परिवर्तनों की शक्ति का उपयोग न केवल "लाइव कोडिंग" कार्य के लिए किया जा सकता है, बल्कि अन्य, सरल कार्यों के लिए भी किया जा सकता है।

किसी भी जावास्क्रिप्ट डेवलपर का सामना करने वाले सरल और रोजमर्रा के कार्यों के लिए COLT कोड परिवर्तनों का उपयोग करने के लिए, हमने एनोटेशन के रूप में ऐसा अवसर जोड़ा है।

COLT एनोटेशन आपको टिप्पणियों के रूप में, विशेष टैग्स का उपयोग करने की अनुमति देते हैं, जो लाइव कोडिंग सत्र के दौरान आपके कोड में कुछ जोड़ने के लिए COLT पूर्व-प्रोसेसर को बताएगा।

एक Livecodig सत्र एक प्रक्रिया है जो तब शुरू होती है जब उपयोगकर्ता COLT में "ग्रीन लाइटनिंग" पर क्लिक करता है। इस तरह के सत्र के दौरान, COLT प्रोजेक्ट के स्रोत कोड को "मॉनिटर" करता है और यदि परिवर्तित किया जाता है, तो इसे परिवर्तित करता है, इसे रूपांतरित करता है और इसे दूसरे फ़ोल्डर (आउटपुट) में डालता है। एक लाइव सत्र में प्रोजेक्ट का कम से कम एक एप्लिकेशन (HTML पेज) खोलना और रन-टाइम में परिवर्तन देने के लिए COLT और इस तरह के पेज (लाइव कनेक्शन) के बीच संचार शामिल है।

एनोटेशन एक टिप्पणी का रूप लेते हैं जो "@" अक्षर से शुरू होता है, उदाहरण के लिए /*@edit*/ या //@log । आप किस प्रकार की टिप्पणी का उपयोग करते हैं, इस पर निर्भर करते हुए कि एकल-रेखा या बहु-पंक्ति, एनोटेशन का व्यवहार बदल सकता है।

चलो एनोटेशन के माध्यम से चलते हैं।

निरीक्षण योग्य व्याख्याएँ

अक्सर लाइवकोडिंग प्रक्रिया के दौरान आपको "ट्यून" करना पड़ता है, तर्कों और गुणों के मूल्यों को समायोजित करें। कभी-कभी आप एक दृश्य उपकरण रखना चाहते हैं, जो चल रहे एप्लिकेशन में ऐसे गुणों को संपादित करने के लिए एक रूप है। ऐसे रूपों को जोड़ना सरल है - एक संख्यात्मक या स्ट्रिंग स्थिरांक /*@edit*/ बाईं ओर एक टिप्पणी /*@edit*/ जोड़ें। लाइव मोड में पेज विंडो पर जाएं और ctrl + I दबाएं ।



"स्लाइडर" को स्थानांतरित करें और उस मान को ढूंढें जो आपको यथासंभव सूट करता है।

इंस्पेक्टेबल एनोटेशन का उपयोग करना तब भी उपयोगी होता है जब आपको एक डिज़ाइनर को कनेक्ट करने की आवश्यकता होती है - पेज को दूसरे को देने के लिए आपको "ट्यून" करने की आवश्यकता होती है। चूंकि COLT नेटवर्क पते पर एप्लिकेशन लॉन्च करता है, आप कोड में इस तरह के एनोटेशन जोड़ सकते हैं और एक लिंक भेज सकते हैं। जब संपत्ति मूल्य बदलते हैं, तो आपका कोड बदल जाएगा।

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

इस विचार को विकसित करते हुए, हमने निरीक्षणीय एनोटेशन में अतिरिक्त पैरामीटर जोड़े।

नाम - आप अपने पैरामीटर को नाम दे सकते हैं।

न्यूनतम मूल्य न्यूनतम है।

अधिकतम अधिकतम मूल्य है।

लक्ष्य - jquery कोड जो दिखाता है कि आप किस वस्तु के साथ काम कर रहे हैं। नेत्रहीन, यह एक "रस्सी" की तरह दिखता है जो पृष्ठ के एक निश्चित तत्व के रूप में फैलता है।

प्रकार (विकास में) - हम संपादन गुणों के लिए अलग-अलग नियंत्रण जोड़ देंगे।

enum (विकास में) - मूल्यों की एक सूची।

समूह (विकास के तहत) - समूहों में रूपों को संयोजित करने की क्षमता।

एनोटेशन में पैरामीटर जोड़ने के लिए आपको कोष्ठक जोड़ने की आवश्यकता है -

 /*@edit(name="",min=0,max=10)*/ 

मान अल्पविराम द्वारा अलग किए जाते हैं, और सामान्य जावास्क्रिप्ट की तरह दिखते हैं - चर को मान असाइन करते हैं।

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

@log

बहुत सरल लेकिन बेहद उपयोगी एनोटेशन। अब कंसोल.लॉग () के बजाय आपको केवल इस एनोटेशन के भावों को चिह्नित करना होगा।

उदाहरण के लिए, आपको चर b को कंसोल पर आउटपुट करने की आवश्यकता है।

 var b = 2; var a = /*@log*/ b + 1; // -> 2 

यदि आपको पूरी अभिव्यक्ति प्रदर्शित करने की आवश्यकता है, तो @log को टिप्पणी लाइन का उपयोग करने की आवश्यकता है -

 var b = 2; var a = b + 1; //@log // -> 3 

लाइवकोडिंग के लिए एनोटेशन

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

@ लाइव-अपडेट - एक कोड या फ़ाइल को अपडेट करें
@ कोड-अपडेट - केवल कोड अपडेट करें
@ एसेट-अपडेट - किसी भी फ़ाइल को अपडेट करें png, jpg, gif, आदि।
@ सीएसएस-अपडेट - स्टाइल अपडेट
@ अक्षम-लाइवकोडिंग - कुछ फ़ंक्शन के लिए अक्षम लाइवकोडिंग

निष्कर्ष

हम आशा करते हैं कि आप टिप्पणी के रूप में JS टिप्पणियों का उपयोग करने के विचार का आनंद लेंगे। पेज पर सीधे कंसोल या संपादन स्थिरांक के आउटपुट के लिए लेबल का उपयोग करना हमें "खेलने के लिए" एक अच्छा कारण लगता है। हो सकता है कि यह खिलौना आपके काम में एक वास्तविक उपकरण बन जाए।

यदि आपके पास विचार हैं, तो COLT का उपयोग करके JS को अन्य एनोटेशन में क्या जोड़ा जा सकता है, या मौजूदा लोगों की कार्यक्षमता कैसे विकसित की जाए - विचारों को टिप्पणी में या हमारे ट्रैकर में फेंक दें।

डाउनलोड करें COLT codeorchestra.com पर