TJHolowaychuk द्वारा घटक

25 जनवरी, 2014 को नौवें सम्मेलन "उच्च शिक्षा में मुफ्त सॉफ्टवेयर" पर रिपोर्ट करें । नोटों और उदाहरणों के लिए स्रोत कोड https://github.com/mbykov/articles पर उपलब्ध है।

• घटक के लिए पहला परिचय - वेब प्रोग्रामिंग में यूनिक्स तरीका
• घटक निर्माण उदाहरण
• इकाई परीक्षण - कंसोल
• इकाई परीक्षण - एक्सप्रेस
• इकाई परीक्षण - ब्राउज़र
• बनाम बना गुलाल बनाम ग्रन्ट, और घड़ी
• Z का मृत, बच्चा
• घटकों और couchapps

node.js साथ काम करने node.js हर कोई एक्सप्रेस वेब सर्वर के लेखक टीजे गोलोवैचुक, मोचा टेस्टिंग लाइब्रेरी और इसी तरह से आगे के बारे में जानता है। लेकिन, शायद, आज के लिए उनकी सबसे शानदार परियोजना घटक है - http://github.com/component । रूसी में अवयवों पर अभी भी बहुत कम साहित्य है, मैं इस अंतर को भरने की कोशिश करूंगा। टीजे ने 19 दिसंबर 2012 को अपने ब्लॉग पर पहला घटक पोस्ट किया। अब, विस्फोटक वृद्धि के बाद, घटकों की संख्या पहले से ही एक हजार से अधिक है, और हर दिन बढ़ रही है।



एक ब्राउज़र में जेएस के साथ गंभीरता से काम करने के लिए, हमें कोड को मॉड्यूलर होना चाहिए, ताकि प्रत्येक मॉड्यूल अपनी फ़ाइल में हो, और यह कि प्रत्येक मॉड्यूल को अलग से और स्वतंत्र रूप से परीक्षण किया जा सके। अवयव - ये वो मॉड्यूल हैं जो ब्राउज़र npm मॉड्यूल की तरह उपयोग करता है, जो n.js. उपयोग करता है अवयव Browserify.js द्वारा बनाए गए मॉड्यूल से भिन्न होते हैं, उस ब्राउज़र में "स्रोत सामग्री" के रूप में केवल npm मॉड्यूल का उपयोग करता है, जिसमें केवल JS शामिल हो सकता है, और एक घटक में css, html और फोंट और सभी शामिल हो सकते हैं। एक साथ। यह एक साथ इस तथ्य को ठीक करता है कि सीएसएस का अपना मॉड्यूलर सिस्टम नहीं है। और, उदाहरण के लिए, एप्लिकेशन के किसी भी भाग को हटाने से समस्या खड़ी हो जाती है। यदि आप घटकों का उपयोग करते हैं, तो HTML, सीएसएस के साथ घटकों को हटाते हैं। आदि लगभग तुच्छ क्रिया है।

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

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

एक प्रारंभिक परिचित के लिए, विकी को ब्राउज़ करने के लिए सबसे सुविधाजनक है, खासकर एफएक्यू ।

चंचलता

एक घटक और कई समान परियोजनाओं के बीच मुख्य अंतर - उदाहरण के लिए, jQuery प्लगइन्स, घटक सिर्फ घटक हैं। JQuery प्लगइन का उपयोग केवल jQuery के साथ किया जा सकता है। Dojo, Backbone, या MooTools मॉड्यूल भी केवल उचित बुनियादी ढांचे में हैं। अवयव सिर्फ घटक हैं। उन्हें काम करने के लिए कुछ भी करने की आवश्यकता नहीं है, और उनका उपयोग हर जगह, किसी भी प्रणाली और किसी भी ढांचे के साथ किया जा सकता है। प्रत्येक घटक को स्टैंडअलोन स्क्रिप्ट के रूप में उत्पन्न किया जा सकता है, और किसी भी सिस्टम के बाहर सामान्य रूप से ब्राउज़र में उपयोग किया जा सकता है।

component.json

node.js विपरीत (और, तदनुसार, node.js ), प्रत्येक घटक को node.js फ़ाइल के समान node.js फ़ाइल की आवश्यकता होती है। उन मॉड्यूलों के लिए जिनका उपयोग दोनों वातावरण में, और सर्वर पर, नोड.जेएस और ब्राउज़र में करने की योजना है, यह ओवरकिल की तरह लगता है। जीतना सरल, स्वच्छ और स्पष्ट कोड है, दोनों फाइलों में और घटक में ही। Component.json विनिर्देशन।

namepace: github / लेखक / परियोजना

दूसरा उल्लेखनीय अंतर सामान्य रिपोजिटरी और घटक नाम स्थान है। डिफ़ॉल्ट रूप से घटकों में नोड का अपना रिपॉजिटरी, npmjs.org है - github.com। (आप का उपयोग कर सकते हैं, निश्चित रूप से)। तदनुसार, घटक का नाम उपयोगकर्ता नाम / परियोजना है। यह बहुत सुविधाजनक है। लेखक का नाम जल्दी से पहचानने योग्य हो जाता है, और ऐसे कई नामों से आप तुरंत इस "गुणवत्ता चिह्न" द्वारा चुन सकते हैं।

परोपकारी तानाशाह नोड.जेएस के साथ इन मतभेदों की एक चर्चा उनके ब्लॉग पर और घटक-FAQ में पाई जा सकती है। अंतर घटक की एक विस्तृत तालिका बनाम। जी। स्टैगस द्वारा ब्राउजर तैयार किया गया था।

अतिरिक्त कदम?

हां, सभी एप्लिकेशन घटकों को एक ही build.js , आपको एक अतिरिक्त चरण शुरू करना होगा - make build । लेकिन सभी समान, जब जावास्क्रिप्ट के साथ काम करते हैं, तो हम अनिवार्य रूप से प्रारंभिक चरणों का पालन करते हैं - हमें कॉफी स्क्रिप्ट को बदलने, सैस को बदलने, जैशिंट चलाने, पैक, आदि, आदि की आवश्यकता होती है। इसलिए इस प्रक्रिया का एक अन्य घटक आमतौर पर काम में ध्यान देने योग्य नहीं है। एक साथ सब कुछ हमेशा केवल एक make या grunt , gulp , इसलिए यह एक बड़ा दोष है।

आकार मायने रखता है

घटकों के साथ, आप आमतौर पर jquery , underscore , आदि, आदि का उपयोग नहीं कर सकते हैं। उदाहरण के लिए, यदि आपको each या map का उपयोग करने की आवश्यकता है, तो इसके लिए jquery या underscore न डालें, लेकिन require(component/each) कुछ पंक्तियाँ हों और आपके पास क्रॉस-ब्राउज़र कोड हो। और इसलिए हर विधि के लिए। परिणामस्वरूप:

Angular.js - 709Kb, घटक / प्रतिक्रियाशील - 47Kb। प्रतिक्रियाशील कोणीय का पूर्ण एनालॉग नहीं है, लेकिन केवल इसकी मूल कार्यक्षमता है। लेकिन आपको आमतौर पर इसकी आवश्यकता होती है, और यह सभी हिप्पो को नहीं।

Aloha.js ~ 1Mb, पैदावार / संपादन योग्य - 4.6 Kb, भी Aloha का एक पूर्ण अनुरूप नहीं है, लेकिन केवल मामले का सार है, जिसकी जरूरत है।

कोई टाइपो नहीं है, 1Mb / 4.6Kb। यह ऐसा राक्षसी अनुपात है।

इसके अलावा, make build बनाते समय thedev विकल्प को हटा दें। इसके अलावा, शार्लोट गोर के Flatinator देखें, वह अप्रयुक्त उपनामों को हटाकर कोड को कम कर देता है। इसके अलावा, v1 और भी अधिक कॉम्पैक्टनेस का वादा किया गया है। यह सब न्यूनतमकरण और संपीड़न तक है।

यूनिक्स तरीका है

प्रत्येक घटक छोटा है, और केवल एक कार्य करता है। (परिचित वाक्यांश)। इस वजह से, यहां तक ​​कि एक औसत परियोजना के लिए सैकड़ों घटकों की आवश्यकता हो सकती है। लेकिन यह पहली नज़र में ही डर जाता है। नतीजतन, यहां तक ​​कि एक जुड़े हुए फॉर्म में एक बड़ी परियोजना के लिए, एक गैर-minified build.js का वजन अधिक नहीं हो सकता है, या लगभग 100 Kb। घटक केवल एक और ढांचा नहीं हैं, घटक ब्राउज़र में यूनिक्स-वे हैं।

मेरे लिए सबसे महत्वपूर्ण बात

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

खैर, और जो पहले ही कहा गया है - सर्वर पर एक एकल वर्कफ़्लो, ब्राउज़र में, और, उदाहरण के लिए, काउचडीबी में - हर जगह काम कॉमनजेएस मानक पर आधारित है।

स्थापना:

 <pre> $ sudo npm install -g component $ component --help . . . </pre> 

जारी रखा जाए

पुनश्च सही घटक या घटक क्या है? आइए देखें कि क्या होता है। लिटरेसी.कॉम का कहना है कि "सभी गैर-पारिभाषिक संदर्भों में, शब्द घटक का उपयोग किया जाना चाहिए।" और यहाँ शब्दावली संदर्भ है। वह, घटक-ए, वह है। गुणक में अंतर विशेष रूप से ध्यान देने योग्य है। संख्या - कई घटक या घटक। चूंकि मैं घटक-वाई का चयन करता हूं, बहुवचन में हम पहला विकल्प चुनते हैं - कई घटक।