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

मूल बातें

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

अनाम बंद हो जाता है

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

( फ़ंक्शन ( ) {
// ... सभी संस्करण और फ़ंक्शन केवल इस संदर्भ में
// अभी भी वैश्विक चर तक पहुंच है
} ( ) ) ;

अनाम फ़ंक्शन के आसपास () पर ध्यान दें। यह भाषा द्वारा आवश्यक है, क्योंकि शब्द फ़ंक्शन के साथ शुरू होने वाले बयानों को हमेशा फ़ंक्शन घोषणाओं के रूप में व्याख्या की जाती है। जोड़ने () के बजाय एक कार्यात्मक अभिव्यक्ति बनाता है।

वैश्विक आयात

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

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

( फ़ंक्शन ( $ , YAHOO ) {
// अब कोड में jQuery चर (जैसे $) और YAHOO तक पहुंच है
} ( jQuery , YAHOO ) ) ;

मॉड्यूल निर्यात

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

var MODULE = ( फ़ंक्शन ( ) {
var my = { } ,
निजीकरण = 1 ;

फ़ंक्शन निजी मेथोड ( ) {
// ...
}

मेरी। मॉड्यूलप्रोपरेटी = 1 ;
मेरी। मॉड्यूलमैथोड = फ़ंक्शन ( ) {
// ...
} ;

मेरी वापसी ;
} ( ) ) ;

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

उन्नत दृष्टिकोण

इस तथ्य के बावजूद कि कई मामलों में उपरोक्त तकनीकें पर्याप्त हैं, हम उन्हें सुधार सकते हैं और बहुत शक्तिशाली, विस्तार योग्य डिजाइन बना सकते हैं। हम उन्हें बदले में विचार करेंगे, हमारे मॉड्यूल नाम से शुरू करते हैं।

फिर से भरना

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

var MODULE = ( फ़ंक्शन ( मेरा ) {
मेरी। अन्यमेथोड = फ़ंक्शन ( ) {
// जोड़ा गया तरीका ...
} ;

मेरी वापसी ;
} ( MODULE ) ) ;

यहां हम फिर से एकरूपता के लिए var का उपयोग करते हैं, हालांकि यह आवश्यक नहीं है। इस कोड के निष्पादित होने के बाद, हमारे मॉड्यूल में एक नया सार्वजनिक तरीका होगा, जिसे MODULE.anotherMethod कहा जाता है। पुनःपूर्ति फ़ाइल अपने स्वयं के राज्य और आयातित चर भी संग्रहीत करेगी।

फ्री रिचार्ज

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

var MODULE = ( फ़ंक्शन ( मेरा ) {
// क्षमताओं को जोड़ें ...

मेरी वापसी ;
} ( MODULE || { } ) ) ;

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

सीमित पुनःपूर्ति

नि: शुल्क पुनःपूर्ति अच्छी है, लेकिन यह प्रतिबंध लगाता है, जिनमें से मुख्य यह है कि आप मॉड्यूल सदस्यों को सुरक्षित रूप से ओवरराइड नहीं कर सकते। इसके अलावा, आप प्रारंभ के दौरान अन्य फ़ाइलों के मॉड्यूल सदस्यों का उपयोग नहीं कर सकते हैं (लेकिन आप इसके बाद कर सकते हैं) पूरा करें। सीमित प्रतिपूर्ति बूट क्रम सेट करता है, लेकिन ओवरराइडिंग की अनुमति देता है। यहाँ एक सरल उदाहरण है (हमारे पुराने मॉडल को फिर से भरना):

var MODULE = ( फ़ंक्शन ( मेरा ) {
var old_moduleMethod = मेरा। मॉड्यूलमेथोड ;

मेरी। मॉड्यूलमैथोड = फ़ंक्शन ( ) {
// मेथड ओवरराइड, पुराने के माध्यम से पुराने तक पहुंचता है_मॉडुलेमैथोड ...
} ;

मेरी वापसी ;
} ( MODULE ) ) ;

यहां हमने MODULE.moduleMethod को फिर से परिभाषित किया, लेकिन यदि आवश्यक हो, तो मूल विधि के संदर्भ को बचाया।

क्लोनिंग और वंशानुक्रम

क्रॉस फ़ाइल स्थिति

एक मॉड्यूल को फाइलों में विभाजित करने की एक गंभीर सीमा यह है कि प्रत्येक एक अपनी स्थिति को संग्रहीत करता है और अन्य फाइलों की स्थिति को नहीं देखता है। यहाँ एक मुक्त पूरक मॉड्यूल का एक उदाहरण है जो सभी पुनःपूर्ति के बावजूद राज्य को संग्रहीत करता है:

var MODULE = ( फ़ंक्शन ( मेरा ) {
var _pStreet = my._pStreet = my._pStreet || { }
_seal = my._seal = my._seal || समारोह ( ) {
हटाएं मेरे ।
my._seal हटाएं ;
हटाएं my._unseal ;
} ,
_unseal = my._unseal = my._unseal || समारोह ( ) {
my._pStreet = _pStreet ;
my._seal = _seal ;
my._unseal = _unseal ;
} ;

// _PStreet, _seal और _unseal के लिए स्थायी पहुंच

मेरी वापसी ;
} ( MODULE || { } ) ) ;

कोई भी फ़ाइल स्थानीय चर _ सदस्य पर सदस्यों को सेट कर सकती है, और वे बाहर से तुरंत पहुंच जाएंगे। एक बार जब यह मॉड्यूल पूरी तरह से लोड हो जाता है, तो एप्लिकेशन को MODULE.seal () को कॉल करना चाहिए, जो आंतरिक _private तक बाहरी पहुंच को रोक देगा। यदि हम एप्लिकेशन के जीवन के दौरान मॉड्यूल को फिर से भरना चाहते हैं, तो एक आंतरिक विधि एक नई फ़ाइल को लोड करने से पहले _unseal () और फिर _seal () को निष्पादित करने के बाद कॉल कर सकती है।

यह मेरे लिए काम पर आज हुआ, मैंने पहले ऐसा नहीं देखा था। मुझे लगता है कि यह एक बहुत ही उपयोगी दृष्टिकोण है, और एक अलग विवरण के लायक है।

submodules

हमारा नवीनतम उन्नत दृष्टिकोण सबसे आसान है। सबमॉड्यूल बनाने के कई कारण हैं। यह है कि एक नियमित मॉड्यूल कैसे बनाया जाए:

मॉड्यूल। उप = ( फ़ंक्शन ( ) {
var माय = { } ;
// ...

मेरी वापसी ;
} ( ) ) ;

कोई फर्क नहीं पड़ता कि यह कितना स्पष्ट था, यह मुझे ध्यान देने योग्य था। सबमॉड्यूल्स में सामान्य मॉड्यूल के सभी गुण हैं, जिनमें पुनःपूर्ति और राज्य संरक्षण शामिल हैं।

निष्कर्ष

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

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

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

var UTIL = ( फ़ंक्शन ( जनक , $ ) {
var माय = जनक। अजाक्स = जनक। अजाक्स || { } ;

मेरी। get = function ( url , params , callback ) {
// ठीक है, इसलिए मैं थोड़ा धोखा दे रहा हूं :)
वापसी $। getJSON ( url , params , callback ) ;
} ;

// ...

माता-पिता की वापसी ;
} ( UTIL || { } , jQuery ) ) ;

आशा है आपको अच्छा लगा होगा, अपने विचार साझा करें। अब जायें जावास्क्रिप्ट लिखिए modularly!

जावास्क्रिप्ट मॉड्यूलर दृष्टिकोण