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

यह लेख जावास्क्रिप्ट में मॉड्यूल को समझाता है।

YouTube Video

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

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

जावास्क्रिप्ट मॉड्यूल का सिद्धांत

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

मॉड्यूल के मुख्य प्रकार

जावास्क्रिप्ट में कई मॉड्यूल सिस्टम हैं। सबसे सामान्य मॉड्यूल सिस्टम ES मॉड्यूल (ESM) और CommonJS हैं।

• ES मोड्यूल्स एक मोड्यूल सिस्टम है जिसे ECMAScript 2015 (ES6) में पेश किया गया था, जो import और export कीवर्ड्स का उपयोग करके मोड्यूल्स को परिभाषित करता है। यह सिस्टम क्लाइंट साइड (ब्राउज़र्स) और सर्वर साइड (Node.js) दोनों पर व्यापक रूप से उपयोग किया जाता है।

• CommonJS एक मॉड्यूल सिस्टम है जिसे मुख्य रूप से Node.js में उपयोग किया जाता है। मॉड्यूल को फाइलों को require और module.exports का उपयोग करके आयात और निर्यात करने के लिए परिभाषित किया जाता है।

ES मॉड्यूल (ESM) का विवरण

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

export और import

export एक कीवर्ड है जो मॉड्यूल से फंक्शनैलिटी को बाहर की ओर उजागर करता है। import का उपयोग अन्य मॉड्यूल में परिभाषित फंक्शनैलिटी को शामिल करने के लिए किया जाता है।

उदाहरण: मॉड्यूल निर्यात

ES Modules में मोड्यूल्स को निम्नलिखित तरीके से एक्सपोर्ट किया जा सकता है।

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

इस math.mjs मोड्यूल में, add और subtract फंक्शंस को एक्सपोर्ट किया गया है। इन फ़ंक्शन को अन्य मॉड्यूल से आयात किया जा सकता है।

यहाँ, .mjs एक फाइल एक्सटेंशन है जो स्पष्ट रूप से ES Modules प्रारूप की जावास्क्रिप्ट फाइल को दर्शाता है। Node.js में, फाइल एक्सटेंशन यह निर्धारित करता है कि यह CommonJS है या ES Modules। हालांकि, यदि package.json में type: "module" निर्दिष्ट किया गया है, तो .js एक्सटेंशन वाली फाइलें डिफ़ॉल्ट रूप से ES Modules के रूप में मानी जाती हैं।

उदाहरण: मॉड्यूल आयात

ES Modules में मोड्यूल्स को निम्नलिखित तरीके से इम्पोर्ट किया जा सकता है।

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

इस तरीके से, import का उपयोग करके आप अन्य फ़ाइलों में परिभाषित फ़ंक्शन को आसानी से उपयोग कर सकते हैं।

डिफ़ॉल्ट निर्यात और नामांकित निर्यात

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

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

1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15

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

1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}

1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

केवल एक डिफ़ॉल्ट निर्यात संभव है, लेकिन नामांकित निर्यात एक साथ कई तत्वों को निर्यात कर सकते हैं।

क्लाइंट साइड (ब्राउज़र) पर उपयोग का उदाहरण।

उदाहरण: मॉड्यूल निर्यात

ES Modules में मोड्यूल्स को निम्नलिखित तरीके से एक्सपोर्ट किया जा सकता है।

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

इस utils.js मोड्यूल में, sum और multiply फंक्शंस को एक्सपोर्ट किया गया है।

उदाहरण: मॉड्यूल आयात

क्लाइंट साइड पर मोड्यूल्स को निम्नलिखित तरीके से इम्पोर्ट किया जा सकता है।

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>

• <script> टैग के type एट्रीब्यूट को module पर सेट करके, HTML के भीतर import और export जैसी ES module सिंटैक्स का उपयोग किया जा सकता है।
• import स्टेटमेंट बाहरी utils.js को लोड करता है और परिणाम प्रदर्शित करता है।

कॉमनजेएस के विवरण

कॉमनजेएस एक मॉड्यूल प्रणाली है जो मुख्य रूप से Node.js में उपयोग की जाती है। मॉड्यूल को module.exports और require का उपयोग करके निर्यात और आयात किया जाता है।

require और module.exports

कॉमनजेएस में, module.exports का उपयोग मॉड्यूल को निर्यात करने के लिए किया जाता है। इसके अलावा, require का उपयोग अन्य फ़ाइलों से मॉड्यूल को उपयोग करने के लिए किया जाता है।

उदाहरण: मॉड्यूल निर्यात

CommonJS में मोड्यूल्स को निम्नलिखित तरीके से एक्सपोर्ट किया जा सकता है।

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};

उदाहरण: मॉड्यूल आयात

CommonJS में मोड्यूल्स को निम्नलिखित तरीके से इम्पोर्ट किया जा सकता है।

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

Node.js में, CommonJS को डिफ़ॉल्ट मॉड्यूल प्रणाली के रूप में उपयोग किया जाता है, लेकिन ES मॉड्यूल का भी समर्थन किया जाता है।

गतिशील आयात

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

डायनेमिक इम्पोर्ट्स निम्नलिखित तरीके से किए जा सकते हैं।

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

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

मॉड्यूल्स के लाभ

• कोड का पुन: उपयोग (Code Reusability)

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

• बेहतर रखरखाव (Improved Maintainability)

  • कोड को मॉड्यूल्स में विभाजित करने से विशिष्ट फीचर्स या हिस्सों को संशोधित करना आसान हो जाता है। कोड को छोटे हिस्सों में प्रबंधित करने से बग्स को ढूंढना और ठीक करना आसान हो जाता है।

• नेमस्पेस टकराव से बचाव (Avoiding Namespace Collisions)

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

• निर्भरता प्रबंधन (Dependency Management)

  • मॉड्यूल्स का उपयोग करने से आप किसी एप्लिकेशन की निर्भरताओं को स्पष्ट रूप से प्रबंधित कर सकते हैं। पता लगाना आसान हो जाता है कि कौन सा मॉड्यूल अन्य मॉड्यूल्स पर निर्भर करता है, जिससे कोड की संरचना को समझना सरल हो जाता है।

सारांश

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

आएं मॉड्यूल सिस्टम का उपयोग करके अधिक स्केलेबल और कुशल जावास्क्रिप्ट अनुप्रयोग बनाएं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video