जावास्क्रिप्ट का उपयोग करके वेब अनुप्रयोगों को विकसित करने के लिए मॉड्यूलर दृष्टिकोण: एएमडी और रिक्जेएस

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

• आवेदन के विभिन्न हिस्सों की निर्भरता का विवरण और संतुष्टि, सर्वर साइड पर निर्भरता के कनेक्शन को व्यवस्थित करने की आवश्यकता;
• वैश्विक दायरे और उनकी टक्कर के लिए चर का निर्यात।

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

बूटलोडर कनेक्शन

हमारे पास निम्नलिखित निर्देशिका संरचना है:

siteroot/ js/ app.js require.js jquery.js mymodule.js index.html 

आरंभ करने के लिए, लोडर को index.html में कनेक्ट करें। हम आवश्यकता का उपयोग करेंगे:
<script data-main="/js/app" src="/js/require.js"></script>

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

मॉड्यूल विवरण

हम परिभाषित का उपयोग करके /js/module.js में हमारे मॉड्यूल का वर्णन करेंगे:

 define( 'mymodule', ['jquery'], function( $ ){ return { foo : 'bar' }; } ); 

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

के उपयोग

/js/app.js जेएस का उपयोग करके आवश्यक मॉड्यूल कनेक्ट /js/app.js और हमारे कोड को निष्पादित करेंगे:

 require( ['mymodule', 'jquery'], function( Module, $ ){ $('body').append( Module.foo ); } ); 

उसी समय, मॉड्यूल वैश्विक दायरे में उपलब्ध नहीं होगा, जैसे निर्भरता से पुस्तकालयों द्वारा निर्यात किए गए अन्य चर। इस तथ्य के बावजूद कि संस्करण 1.7 से jQuery पुस्तकालय एएमडी वास्तुकला का समर्थन करता है, यह एक अपवाद है: यह वैश्विक स्तर पर अपने डॉलर का निर्यात करता है। सबसे अधिक संभावना है, यह कई वर्षों से लिखे गए प्लगइन्स की सेना के साथ संगतता बनाए रखने के लिए किया गया था।

विन्यास

आवश्यकता है कि कई मापदंडों का उपयोग करने से पहले पारित किया जा सकता है। ऐसा करने के लिए, require.config ऑब्जेक्ट का उपयोग करें।

यदि आपको एएमडी के रूप में डिज़ाइन नहीं किए गए मॉड्यूल को जोड़ने और वैश्विक दायरे में चर को निर्यात करने की आवश्यकता है तो क्या करें? आप बेशक इसके स्रोत कोड को संशोधित कर सकते हैं, लेकिन यह बुरा अभ्यास है। ऐसे मॉड्यूल का वर्णन करने के लिए shim पैरामीटर का shim है। आप मैन्युअल रूप से इसकी निर्भरता और निर्यातित चर को निर्दिष्ट कर सकते हैं, और यह अन्य AMD लोगों के साथ सममूल्य पर हमारे आवेदन का हिस्सा बन जाएगा:

 require.config = { shim: { 'oldmodule' : { deps: [], exports: 'OldModule' } } }; 

अब आप इसे एक निर्भरता के रूप में निर्दिष्ट कर सकते हैं:

 require( ['mymodule', 'jquery', 'oldmodule'], function(){} ); 

शिम के अलावा, कई और विकल्प हैं: baseUrl फ़ाइल baseUrl की मूल निर्देशिका, अधिक सुविधाजनक paths कनेक्शन के लिए उपनाम आदि।

निष्कर्ष

मुझे उम्मीद है कि मेरी तरह ही एएमडी कॉन्सेप्ट ने आपको झुका दिया है। यह विकास में बड़ी संख्या में JS-files का उपयोग करते समय अराजकता से बचने में मदद करता है, पुन: प्रयोज्य कोड लिखने को प्रोत्साहित करता है, और बैकएंड से फ़ाइलों को जोड़ने के लिए जिम्मेदारी को हटाता है। और अगर आपके पास एक दर्जन फाइलों के जोड़े का एक बहुत बड़ा एमवीसी अनुप्रयोग है, तो ऐसी प्रणाली बस अपूरणीय है।

बिदाई में, मैं आपको कुछ लिंक दूंगा जिससे आपको समस्या का अध्ययन करने में मदद मिलेगी:

• लेख Addy उस्मानी एएमडी, कॉमनजेएस और ईएस हार्मनी के साथ मॉड्यूलर जावास्क्रिप्ट लेखन ;
• जेईजेएसएस आधिकारिक वेबसाइट ;
• AMD विनिर्देशन।

लेख का स्रोत कोड GitHub पर भंडार में उपलब्ध है ।
हैप्पी हैकिंग!