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

ईएस मॉड्यूल बनाम कॉमनजेएस

जावास्क्रिप्ट पारिस्थितिकी तंत्र में विभिन्न मॉड्यूल सिस्टम हैं। ईएस मॉड्यूल (ईएसएम) ईसीएमएस्क्रिप्ट विनिर्देश में मानक है, जिसका उपयोग मुख्य रूप से ब्राउज़र में किया जाता है और तेजी से नोड.जेएस में समर्थित होता है। CommonJS एक अन्य मॉड्यूल सिस्टम है जिसका उपयोग पारंपरिक रूप से Node.js में किया जाता था।

ईएस मॉड्यूल (ईएसएम)

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

निर्यात और आयात

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

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

//modules.js
const greet = () => {
   console.log('Hello World');
};
export { greet};

नामित निर्यातों को आयात करते समय, आपको निर्यातों के समान नामों का उपयोग करना होगा।

import { greet } from './module.js';
greet(); // Hello, World!

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

//modules.js
const greet = () => {
   console.log('Hello World');
};
export default greet;

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

import message  from './module.js';
message(); // Hello, World!

HTML में मॉड्यूल का उपयोग करना

ब्राउज़र में मॉड्यूल का उपयोग करते समय, आपको उन्हें अपनी HTML फ़ाइल में शामिल करना होगा। आप

ब्राउज़र समर्थन

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

Node.js में मॉड्यूल का उपयोग करना
Node.js में ES मॉड्यूल का उपयोग करने के लिए, आप .mjs फ़ाइल एक्सटेंशन का उपयोग कर सकते हैं या package.json फ़ाइल में "type": "module" सेट कर सकते हैं।

// package.json
{
 "type": "module"
}

आयात उपनाम

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

// math.js
export function add(a, b) {
   return a   b;
}
 export function subtract(a, b) {
   return a - b;
}

आप उपनामों का उपयोग करके इन फ़ंक्शन को विभिन्न नामों से आयात कर सकते हैं:

// main.js
import { add as sum, subtract as diff } from './math.js';


console.log(sum(2, 3)); // 5
console.log(diff(5, 3)); // 2

संपूर्ण मॉड्यूल को उपनाम के रूप में आयात करना

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

// main.js
import * as math from './math.js';


console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 3)); // 2

गतिशील आयात

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

// main.js
const loadModule = async () => {
   try {
     const module = await import('./math.js');
     console.log(module.add(2, 3));
   } catch (error) {
     console.error('loading error:', error);
   }
 };


 loadModule();

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

कॉमनजेएस (सीजेएस)

CommonJS एक मॉड्यूल सिस्टम है जिसका उपयोग मुख्य रूप से Node.js में किया जाता है। ईएस मॉड्यूल के मानकीकृत होने से पहले यह डिफ़ॉल्ट मॉड्यूल प्रणाली थी और अभी भी कई Node.js परियोजनाओं में इसका व्यापक रूप से उपयोग किया जाता है। यह मॉड्यूल आयात करने के लिए require() का उपयोग करता है और मॉड्यूल से कार्यक्षमता निर्यात करने के लिए मॉड्यूल.निर्यात या निर्यात करता है।

CommonJS में, मॉड्यूल से मान निर्यात करने के लिए मॉड्यूल.एक्सपोर्ट और एक्सपोर्ट दोनों का उपयोग किया जाता है। निर्यात अनिवार्य रूप से मॉड्यूल.एक्सपोर्ट के लिए आशुलिपि है, जो किसी एक का उपयोग करने की अनुमति देता है। हालाँकि, संभावित भ्रम या अप्रत्याशित व्यवहार से बचने के लिए आमतौर पर मॉड्यूल.एक्सपोर्ट्स का लगातार उपयोग करने की सलाह दी जाती है।

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

// greet.js
module.exports = function(name) {
   return `Hello, ${name}!`;
};

// app.js
const greet = require('./greet');
console.log(greet('Alice')); // 'Hello, Alice!'

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

// math.js
exports.add = function(a, b) {
   return a   b;
};
exports.subtract = function(a, b) {
   return a - b;
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 2)); // 3

जावास्क्रिप्ट मॉड्यूल कई लाभ प्रदान करते हैं जो कोड के संगठन, रखरखाव और प्रदर्शन में सुधार करते हैं।

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

• रखरखाव
  कोड को छोटे, स्व-निहित मॉड्यूल में तोड़कर, आप अपने कोडबेस को अधिक प्रभावी ढंग से प्रबंधित और बनाए रख सकते हैं। इससे पूरे एप्लिकेशन को प्रभावित किए बिना अलग-अलग मॉड्यूल को अपडेट करना, रिफैक्टर करना और डीबग करना आसान हो जाता है।

• कोड विभाजन
  मॉड्यूल कोड विभाजन को सक्षम करते हैं, जो आपको जरूरत पड़ने पर केवल आवश्यक कोड लोड करने की अनुमति देता है, प्रारंभिक लोड समय और समग्र प्रदर्शन में सुधार करता है।

• बेहतर परीक्षण
  मॉड्यूलर कोड का परीक्षण करना आसान है क्योंकि आप अलग-अलग मॉड्यूल का परीक्षण अलग-अलग कर सकते हैं। इससे अधिक विश्वसनीय और रखरखाव योग्य परीक्षण होते हैं।

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

निष्कर्ष

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