জাভাস্ক্রিপ্টে মডিউল

এই নিবন্ধটি জাভাস্ক্রিপ্টে মডিউল সম্পর্কে ব্যাখ্যা করে।

YouTube Video

জাভাস্ক্রিপ্টে মডিউল

জাভাস্ক্রিপ্টে মডিউল হলো কোড সুশৃঙ্খলভাবে সংগঠিত করার এবং পুনরায় ব্যবহারযোগ্য উপাদানে ভাগ করার একটি পদ্ধতি। মডিউল ব্যবহারের মাধ্যমে কোডের পাঠযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা বৃদ্ধি পায়, এবং একই কার্যকারিতা অন্যান্য প্রকল্পে পুনঃব্যবহার করা যায়। এখানে আমরা মডিউলের ধারণা থেকে নির্দিষ্ট ব্যবহারের উদাহরণ পর্যন্ত বিভিন্ন মডিউল সিস্টেম ব্যাখ্যা করেছি।

জাভাস্ক্রিপ্ট মডিউলের ধারণা

মূলত জাভাস্ক্রিপ্টে কোনও মডুলার সিস্টেম ছিল না। তবে, অ্যাপ্লিকেশন বড় হয়ে যাওয়ার সাথে সাথে কোডকে ছোট ছোট ইউনিটে ভাগ করে পুনঃব্যবহারের জন্য মডুলারাইজেশন গুরুত্বপূর্ণ হয়ে ওঠে। একটি মডিউল হল নির্দিষ্ট একটি ফাংশনযুক্ত কোডের অংশ যা অন্যান্য কোড থেকে স্বতন্ত্রভাবে পরিচালিত হতে পারে এবং এটি একাধিক ফাইলে ভাগ করা যেতে পারে।

মডিউলের প্রধান ধরন

জাভাস্ক্রিপ্টে বিভিন্ন মডিউল সিস্টেম রয়েছে। সবচেয়ে সাধারণগুলো হলো ES Modules (ESM) এবং CommonJS।

• ES মডিউলগুলি হল একটি মডিউল সিস্টেম যা ECMAScript 2015 (ES6)-এ পরিচিত হয়েছে, যা import এবং export কীওয়ার্ড ব্যবহার করে মডিউল সংজ্ঞায়িত করে। এই সিস্টেমটি ক্লায়েন্ট সাইট (ব্রাউজার) এবং সার্ভার সাইট (Node.js)-এ ব্যাপকভাবে ব্যবহৃত হয়।

• CommonJS একটি মডিউল সিস্টেম যা প্রধানত Node.js-এ ব্যবহৃত হয়। মডিউলগুলি ফাইল আমদানি ও রপ্তানির জন্য require এবং module.exports ব্যবহার করে সংজ্ঞায়িত করা হয়।

ES Modules (ESM)-এর বিশদ বিবরণ

ES Modules হল জাভাস্ক্রিপ্টে মানক মডিউল সিস্টেম যা মডিউলগুলির মধ্যে কার্যকারিতার সহজ বিনিময়কে সক্ষম করে। ব্রাউজার এবং Node.js-এ এই সিস্টেমটি মডিউল সংজ্ঞায়িত এবং আমদানির জন্য ব্যবহৃত হয়।

export এবং import

export হল একটি কীওয়ার্ড যা মডিউল থেকে বহিরাগতভাবে কার্যকারিতা প্রকাশ করার জন্য ব্যবহৃত হয়। import অন্যান্য মডিউলে সংজ্ঞায়িত কার্যকারিতা অন্তর্ভুক্ত করার জন্য ব্যবহৃত হয়।

উদাহরণ: মডিউল রপ্তানি

ES মডিউল-এ মডিউলগুলি নিচের মতো এক্সপোর্ট করা যেতে পারে।

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 মডিউল ফরম্যাটের JavaScript ফাইল নির্দেশ করে। Node.js-এ, ফাইলের এক্সটেনশন দেখে বোঝা যায় সেটি CommonJS নাকি ES মডিউল। তবে, যদি package.json-এ type: "module" নির্দিষ্ট করা থাকে, তাহলে .js এক্সটেনশনযুক্ত ফাইলগুলো ডিফল্টভাবে ES মডিউল হিসেবে বিবেচিত হয়।

উদাহরণ: মডিউল ইম্পোর্ট

ES মডিউল-এ মডিউল নিচের মতো ইম্পোর্ট করা যেতে পারে।

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 মডিউল-এ মডিউলগুলি নিচের মতো এক্সপোর্ট করা যেতে পারে।

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 মডিউল সিনট্যাক্স ব্যবহার করা যায়।
• 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-এ, কমনজেএস ডিফল্ট মডিউল সিস্টেম হিসাবে ব্যবহৃত হয়, তবে ES Modules ও সমর্থিত।

ডাইনামিক ইম্পোর্ট

জাভাস্ক্রিপ্টে, মডিউলগুলি import() ব্যবহার করে ডাইনামিকভাবে ইম্পোর্ট করা যেতে পারে। এই পদ্ধতিটি প্রয়োজন অনুসারে মডিউল লোড করার জন্য অ্যাসিঙ্ক্রোনাস প্রসেসিং ব্যবহার করে।

ডাইনামিক ইম্পোর্ট নিচের মতো করা যায়।

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

ডাইনামিক ইম্পোর্ট হলো অ্যাপ্লিকেশনের পারফরম্যান্স বাড়ানোর একটি উপায়। কারণ আপনি প্রাথমিক লোডে সবকিছু লোড করার পরিবর্তে প্রয়োজন অনুযায়ী মডিউল লোড করতে পারেন, এটি পেজ প্রদর্শনের গতি উন্নত করে।

মডিউলগুলোর সুবিধা

• কোড পুনঃব্যবহারযোগ্যতা

  • মডিউলারাইজড কোড অন্যান্য প্রকল্পেও পুনঃব্যবহার করা যেতে পারে। সাধারণ কার্যকারিতার সাথে মডিউল তৈরি করে এবং সেগুলি একাধিক অ্যাপ্লিকেশনে ব্যবহার করে উন্নয়ন দক্ষতা উল্লেখযোগ্যভাবে বৃদ্ধি পায়।

• রক্ষণাবেক্ষণযোগ্যতা উন্নত হয়েছে

  • কোডকে বিভিন্ন মডিউলে ভাগ করলে নির্দিষ্ট বৈশিষ্ট্য বা অংশ পরিবর্তন করা সহজ হয়। কোডকে ছোট ছোট ইউনিটে পরিচালনা করলে ত্রুটি খুঁজে বের করা এবং ঠিক করা সহজ হয়।

• নেমস্পেস সংঘর্ষ এড়ানো

  • গ্লোবাল স্কোপে অনেক ভেরিয়েবল এবং ফাংশন ঘোষণা করলে নেম সংঘর্ষের সম্ভাবনা থাকে, কিন্তু মডিউলারাইজেশন এটি প্রতিরোধ করে এবং কোডবেসকে পরিচ্ছন্ন রাখতে সহায়তা করে।

• নির্ভরতা ব্যবস্থাপনা

  • মডিউল ব্যবহারের ফলে আপনি কোনো অ্যাপ্লিকেশনের নির্ভরতাগুলি স্পষ্টভাবে পরিচালনা করতে পারেন। কোন মডিউল অন্য মডিউলের উপর নির্ভরশীল তা স্পষ্ট হয়ে যায়, যা কোডের গঠন বোঝা সহজ করে তোলে।

সারসংক্ষেপ

জাভাস্ক্রিপ্টের মডিউল সিস্টেম কোড সংগঠিত করার এবং এটিকে পুনরায় ব্যবহারযোগ্য কম্পোনেন্টে ভাগ করার একটি শক্তিশালী উপায়। ES মডিউল এবং CommonJS-এর মধ্যে পার্থক্য বুঝে এবং প্রকল্প অনুযায়ী সঠিক মডিউল সিস্টেম নির্বাচন করে, আপনি কোডের পাঠযোগ্যতা এবং রক্ষণাবেক্ষণ ক্ষমতা বাড়াতে পারেন। এছাড়াও, ডাইনামিক ইমপোর্ট ব্যবহার করে আপনি অ্যাপ্লিকেশনের কর্মক্ষমতাকে অপ্টিমাইজ করতে পারেন।

আসুন মডিউল সিস্টেম ব্যবহার করে আরও স্কেলেবল এবং দক্ষ জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন তৈরি করি।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video