जावास्क्रिप्ट में मॉड्यूल सिस्टम का परिचय

मॉड्यूल की अवधारणा मॉड्यूलर प्रोग्रामिंग प्रतिमान से आती है। इस प्रतिमान का प्रस्ताव है कि सॉफ्टवेयर अलग-अलग विनिमेय घटकों से बना होना चाहिए जिन्हें कहा जाता है "मॉड्यूल" प्रोग्राम फ़ंक्शंस को स्टैंड-अलोन फ़ाइलों में तोड़कर अलग-अलग काम कर सकते हैं या एक में युग्मित कर सकते हैं आवेदन पत्र।

एक मॉड्यूल एक स्टैंड-अलोन फ़ाइल है जो कुछ कार्यक्षमता को लागू करने और पुन: प्रयोज्यता और संगठन को बढ़ावा देने के लिए कोड को इनकैप्सुलेट करती है।

यहां आप मॉड्यूल पैटर्न, अधिकांश नोड.जेएस अनुप्रयोगों में उपयोग किए जाने वाले कॉमनजेएस मॉड्यूल सिस्टम और ईएस6 मॉड्यूल सिस्टम सहित जावास्क्रिप्ट अनुप्रयोगों में उपयोग किए जाने वाले मॉड्यूल सिस्टम को कवर करेंगे।

मॉड्यूल पैटर्न

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

इसे तुरंत लागू किए गए फ़ंक्शन एक्सप्रेशंस का उपयोग करके लागू किया गया था, जिसे आईआईएफई के रूप में जाना जाता है। एक IIFE एक गैर-पुन: प्रयोज्य कार्य है जो इसे बनाते ही चलता है।

आईआईएफई की मूल संरचना यहां दी गई है:

(समारोह () {
// कोड यहाँ
})();
(() => {
// कोड यहाँ
})();
(async () => {
// कोड यहाँ
})();

उपरोक्त कोड ब्लॉक तीन अलग-अलग संदर्भों में उपयोग किए गए आईआईएफई का वर्णन करता है।

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

उदाहरण के लिए:

कॉन्स्ट फू = (समारोह () {
कॉन्स्ट कहना नाम = (नाम) => {
सांत्वना देना।लकड़ी का लट्ठा('अरे, मेरा नाम है ${नाम}`);
 };
// चर को उजागर करना
वापस करना {
 कॉलसेनाम: (नाम) => कहो नाम (नाम),
 };
})();
// उजागर विधियों तक पहुँचना
foo.callSayName("छड़");

ऊपर दिया गया कोड ब्लॉक इस बात का एक उदाहरण है कि मूल जावास्क्रिप्ट मॉड्यूल की शुरुआत से पहले मॉड्यूल कैसे बनाए गए थे।

उपरोक्त कोड ब्लॉक में आईआईएफई है। आईआईएफई में एक फ़ंक्शन होता है जिसे इसे वापस करके इसे एक्सेस किया जा सकता है। IIFE में घोषित सभी चर वैश्विक दायरे से सुरक्षित हैं। इस प्रकार, विधि (SayName) केवल सार्वजनिक समारोह के माध्यम से पहुँचा जा सकता है, callSayName.

ध्यान दें कि IIFE एक चर में सहेजा गया है, फू. ऐसा इसलिए है, क्योंकि स्मृति में इसके स्थान को इंगित करने वाले चर के बिना, स्क्रिप्ट चलने के बाद चर अप्राप्य होंगे। यह पैटर्न इसके कारण संभव है जावास्क्रिप्ट बंद.

कॉमनजेएस मॉड्यूल सिस्टम

कॉमनजेएस मॉड्यूल सिस्टम कॉमनजेएस समूह द्वारा परिभाषित एक मॉड्यूल प्रारूप है जो प्रत्येक मॉड्यूल को उसके नामस्थान में निष्पादित करके जावास्क्रिप्ट स्कोप के मुद्दों को हल करने के लिए है।

कॉमनजेएस मॉड्यूल सिस्टम मॉड्यूल को उन चरों को स्पष्ट रूप से निर्यात करने के लिए मजबूर करके काम करता है जिन्हें वे अन्य मॉड्यूल को उजागर करना चाहते हैं।

यह मॉड्यूल सिस्टम के लिए बनाया गया था सर्वर-साइड जावास्क्रिप्ट (Node.js) और, जैसे, ब्राउज़रों में डिफ़ॉल्ट रूप से समर्थित नहीं है।

अपने प्रोजेक्ट में कॉमनजेएस मॉड्यूल को लागू करने के लिए, आपको पहले एनपीएम को अपने एप्लिकेशन में चलाकर इनिशियलाइज़ करना होगा:

एनपीएम init -y

कॉमनजेएस मॉड्यूल सिस्टम के बाद निर्यात किए गए वेरिएबल्स को इस प्रकार आयात किया जा सकता है:

//randomModule.js
// स्थापित पैकेज
कॉन्स्ट स्थापित आयात = ज़रूरत होना("पैकेज का नाम");
// स्थानीय मॉड्यूल
कॉन्स्ट स्थानीय आयात = ज़रूरत होना("/path-to-module");

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

आप नामांकित निर्यात या डिफ़ॉल्ट निर्यात का उपयोग करके कॉमनजेएस मॉड्यूल सिस्टम के बाद एक चर निर्यात कर सकते हैं।

नामित निर्यात

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

उदाहरण के लिए:

//main.js
निर्यात.myExport = समारोह () {
सांत्वना देनालॉग ("यह एक उदाहरण है का एक नामित निर्यात");
};
निर्यात। एक और निर्यात = समारोह () {
सांत्वना देनालॉग ("यह एक और उदाहरण है का एक नामित निर्यात");
};

उपरोक्त कोड ब्लॉक में, आप दो नामित कार्यों का निर्यात कर रहे हैं (myExport और अन्यनिर्यात) उन्हें संलग्न करके निर्यात वस्तु।

इसी प्रकार, आप कार्यों को इस प्रकार निर्यात कर सकते हैं:

कॉन्स्ट माय एक्सपोर्ट = समारोह () {
सांत्वना देनालॉग ("यह एक उदाहरण है का एक नामित निर्यात");
};
कॉन्स्ट अन्य निर्यात = समारोह () {
सांत्वना देनालॉग ("यह एक और उदाहरण है का एक नामित निर्यात");
};
मापांक.निर्यात = {
 मेरा निर्यात,
 अन्य निर्यात,
};

उपरोक्त कोड ब्लॉक में, आप सेट करते हैं निर्यात नामित कार्यों पर आपत्ति। आप केवल असाइन कर सकते हैं निर्यात के माध्यम से एक नई वस्तु पर आपत्ति करें मापांक वस्तु।

यदि आप इसे इस तरह से करने का प्रयास करते हैं तो आपका कोड एक त्रुटि फेंक देगा:

//गलत तरीका
निर्यात = {
 मेरा निर्यात,
 अन्य निर्यात,
};

नामित निर्यात को आप दो तरीकों से आयात कर सकते हैं:

1. सभी निर्यातों को एक ही वस्तु के रूप में आयात करें और उन्हें अलग से उपयोग करके एक्सेस करें डॉट नोटेशन.

उदाहरण के लिए:

//otherModule.js
कॉन्स्ट फू = ज़रूरत होना("।/मुख्य");
फू.myExport();
फू.दूसरा निर्यात();

2. से निर्यात को डी-स्ट्रक्चर करें निर्यात वस्तु।

उदाहरण के लिए:

//otherModule.js
कॉन्स्ट {myExport, OtherExport} = ज़रूरत होना("।/मुख्य");
मेरा निर्यात ();
एक और निर्यात ();

आयात करने के सभी तरीकों में एक बात सामान्य है, उन्हें उन्हीं नामों का उपयोग करके आयात किया जाना चाहिए जिनके साथ उन्हें निर्यात किया गया था।

डिफ़ॉल्ट निर्यात

एक डिफ़ॉल्ट निर्यात आपकी पसंद के किसी भी नाम से पहचाना जाने वाला निर्यात है। आपके पास प्रति मॉड्यूल केवल एक डिफ़ॉल्ट निर्यात हो सकता है।

उदाहरण के लिए:

//main.js
कक्षाफू{
 छड़() {
सांत्वना देनालॉग ("यह एक उदाहरण है का ए गलती करनानिर्यात");
 }
}
मापांक.निर्यात = फू;

उपरोक्त कोड ब्लॉक में, आप एक वर्ग निर्यात कर रहे हैं (फू) पुन: असाइन करके निर्यात उस पर आपत्ति करें।

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

उदाहरण के लिए:

//otherModule.js
कॉन्स्ट बार = ज़रूरत होना("।/मुख्य");
कॉन्स्ट वस्तु = नया छड़();
वस्तु।छड़();

उपरोक्त कोड ब्लॉक में, डिफ़ॉल्ट निर्यात का नाम दिया गया था छड़, हालाँकि आप अपनी पसंद के किसी भी नाम का उपयोग कर सकते हैं।

ES6 मॉड्यूल सिस्टम

ECMAScript हार्मनी मॉड्यूल सिस्टम, जिसे लोकप्रिय रूप से ES6 मॉड्यूल के रूप में जाना जाता है, आधिकारिक जावास्क्रिप्ट मॉड्यूल सिस्टम है।

ES6 मॉड्यूल ब्राउज़र और सर्वर द्वारा समर्थित हैं, हालांकि उनका उपयोग करने से पहले आपको कुछ कॉन्फ़िगरेशन की आवश्यकता होती है।

ब्राउज़रों में, आपको निर्दिष्ट करना होगा प्रकार जैसा मापांक स्क्रिप्ट आयात टैग में।

जैसे इतना:

//index.html
<स्क्रिप्ट src="./app.js" टाइप ="मापांक"></script>

Node.js में, आपको सेट करना होगा प्रकार को मापांक आप में पैकेज.जेसन फ़ाइल।

जैसे इतना:

//package.json
"प्रकार":"मापांक"

आप नामांकित निर्यात या डिफ़ॉल्ट निर्यात का उपयोग करके ES6 मॉड्यूल सिस्टम का उपयोग करके चर भी निर्यात कर सकते हैं।

नामित निर्यात

कॉमनजेएस मॉड्यूल में नामित आयात के समान, उन्हें उन नामों से पहचाना जाता है जिन्हें उन्हें सौंपा गया था और प्रति मॉड्यूल कई निर्यात की अनुमति देता है।

उदाहरण के लिए:

//main.js
निर्यातकॉन्स्ट माय एक्सपोर्ट = समारोह () {
सांत्वना देनालॉग ("यह एक उदाहरण है का एक नामित निर्यात");
};
निर्यातकॉन्स्ट अन्य निर्यात = समारोह () {
सांत्वना देनालॉग ("यह एक और उदाहरण है का एक नामित निर्यात");
};

ES6 मॉड्यूल सिस्टम में, नामित निर्यात को वेरिएबल के साथ उपसर्ग करके निर्यात किया जाता है निर्यात कीवर्ड।

नामांकित निर्यात को कॉमनजेएस की तरह ही ईएस6 में दूसरे मॉड्यूल में आयात किया जा सकता है:

• से आवश्यक निर्यात को डी-स्ट्रक्चर करना निर्यात वस्तु।
• सभी निर्यातों को एक वस्तु के रूप में आयात करना और डॉट नोटेशन का उपयोग करके उन्हें अलग से एक्सेस करना।

यहाँ डी-स्ट्रक्चरिंग का एक उदाहरण है:

//otherModule.js
आयात {myExport, OtherExport} से "./main.js";
myExport ()
दूसरा निर्यात ()

यहाँ संपूर्ण वस्तु को आयात करने का एक उदाहरण दिया गया है:

आयात * जैसा फू से './main.js'
फू.myExport()
फू.दूसरा निर्यात()

उपरोक्त कोड ब्लॉक में, तारक चिह्न (*) का अर्थ है "सब"। जैसा कीवर्ड असाइन करता है निर्यात इसके बाद आने वाली स्ट्रिंग पर आपत्ति करें, इस मामले में, फू.

डिफ़ॉल्ट निर्यात

कॉमनजेएस में डिफ़ॉल्ट निर्यात के समान, वे आपकी पसंद के किसी भी नाम से पहचाने जाते हैं, और आपके पास प्रति मॉड्यूल केवल एक डिफ़ॉल्ट निर्यात हो सकता है।

उदाहरण के लिए:

//main.js
कक्षाफू{
 छड़() {
सांत्वना देनालॉग ("यह एक उदाहरण है का ए गलती करनानिर्यात");
 }
}
निर्यातगलती करना फू;

को जोड़कर डिफ़ॉल्ट निर्यात बनाए जाते हैं गलती करना कीवर्ड के बाद निर्यात कीवर्ड, उसके बाद निर्यात का नाम।

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

उदाहरण के लिए:

//otherModule.js
आयात छड़ से "./main.js";

मिश्रित निर्यात

ES6 मॉड्यूल मानक आपको कॉमनजेएस के विपरीत, एक मॉड्यूल में डिफ़ॉल्ट निर्यात और नामित निर्यात दोनों की अनुमति देता है।

उदाहरण के लिए:

//main.js
निर्यातकॉन्स्ट माय एक्सपोर्ट = समारोह () {
सांत्वना देनालॉग ("यह एक और उदाहरण है का एक नामित निर्यात");
};
कक्षाफू{
 छड़() {
सांत्वना देनालॉग ("यह एक उदाहरण है का ए गलती करनानिर्यात");
 }
}
निर्यातगलती करना फू;

मॉड्यूल का महत्व

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