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

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

দিনের মেকইউজের ভিডিও

একটি মডিউল হল একটি স্বতন্ত্র ফাইল যা নির্দিষ্ট কার্যকারিতা বাস্তবায়ন এবং পুনঃব্যবহারযোগ্যতা এবং সংগঠনকে উন্নীত করতে কোড এনক্যাপসুলেট করে।

---

---

এখানে আপনি মডিউল প্যাটার্ন, বেশিরভাগ Node.js অ্যাপ্লিকেশনে ব্যবহৃত CommonJS মডিউল সিস্টেম এবং ES6 মডিউল সিস্টেম সহ জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনগুলিতে ব্যবহৃত মডিউল সিস্টেমগুলিকে কভার করবেন।

মডিউল প্যাটার্ন

নেটিভ জাভাস্ক্রিপ্ট মডিউলগুলির প্রবর্তনের আগে, মডিউল ডিজাইন প্যাটার্নটি একটি মডিউল সিস্টেম হিসাবে একটি ফাইলে স্কোপ ভেরিয়েবল এবং ফাংশনগুলি ব্যবহার করা হত।

এটি অবিলম্বে আমন্ত্রিত ফাংশন এক্সপ্রেশন ব্যবহার করে প্রয়োগ করা হয়েছিল, যা জনপ্রিয়ভাবে IIFEs নামে পরিচিত। একটি আইআইএফই একটি অ-পুনঃব্যবহারযোগ্য ফাংশন যা তৈরি হওয়ার সাথে সাথে চলে।

এখানে একটি আইআইএফই এর মৌলিক কাঠামো রয়েছে:

(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})(); 

উপরের কোড ব্লকটি তিনটি ভিন্ন প্রেক্ষাপটে ব্যবহৃত IIFE-কে বর্ণনা করে।

---

---

IIFE গুলি ব্যবহার করা হয়েছিল কারণ একটি ফাংশনের ভিতরে ঘোষিত ভেরিয়েবলগুলিকে ফাংশনের জন্য স্কোপ করা হয়, সেগুলিকে শুধুমাত্র ফাংশনের ভিতরে অ্যাক্সেসযোগ্য করে তোলে এবং কারণ ফাংশনগুলি আপনাকে ডেটা ফেরত দিতে দেয় (সেগুলিকে সর্বজনীনভাবে অ্যাক্সেসযোগ্য করে তোলে)।

উদাহরণ স্বরূপ:

---

---

const foo = (function () { 
  const sayName = (name) => { 
    console.log(`Hey, my name is ${name}`); 
  }; 
  //Exposing the variables 
  return { 
    callSayName: (name) => sayName(name), 
  }; 
})(); 
//Accessing exposed methods 
foo.callSayName("Bar"); 

উপরের কোড ব্লকটি নেটিভ জাভাস্ক্রিপ্ট মডিউল প্রবর্তনের আগে কীভাবে মডিউল তৈরি করা হয়েছিল তার একটি উদাহরণ।

উপরের কোড ব্লকে একটি IIFE রয়েছে। IIFE-তে একটি ফাংশন রয়েছে যা এটি ফেরত দিয়ে অ্যাক্সেসযোগ্য করে তোলে। IIFE-তে ঘোষিত সমস্ত ভেরিয়েবল বিশ্বব্যাপী সুযোগ থেকে সুরক্ষিত। সুতরাং, পদ্ধতি ( sayName ) শুধুমাত্র পাবলিক ফাংশনের মাধ্যমে অ্যাক্সেসযোগ্য, callSayName .

কিভাবে একটি ইউটিউব ভিডিও থেকে একটি গান খুঁজে পেতে

লক্ষ্য করুন যে IIFE একটি ভেরিয়েবলে সংরক্ষিত হয়েছে, foo . এর কারণ হল, মেমরিতে তার অবস্থান নির্দেশ করে ভেরিয়েবল ছাড়া, স্ক্রিপ্ট রান করার পরে ভেরিয়েবলগুলি অ্যাক্সেসযোগ্য হবে না। এই প্যাটার্ন কারণে সম্ভব জাভাস্ক্রিপ্ট বন্ধ .

কমনজেএস মডিউল সিস্টেম

CommonJS মডিউল সিস্টেম হল একটি মডিউল ফরম্যাট যা CommonJS গ্রুপ দ্বারা সংজ্ঞায়িত করা হয়েছে জাভাস্ক্রিপ্ট স্কোপের সমস্যা সমাধানের জন্য প্রতিটি মডিউল তার নামস্থানে কার্যকর করার মাধ্যমে।

CommonJS মডিউল সিস্টেমটি মডিউলগুলিকে জোর করে কাজ করে যাতে তারা অন্য মডিউলগুলিতে প্রকাশ করতে চায় এমন ভেরিয়েবলগুলিকে স্পষ্টভাবে রপ্তানি করে৷

এই মডিউল সিস্টেমের জন্য তৈরি করা হয়েছিল সার্ভার-সাইড জাভাস্ক্রিপ্ট (Node.js) এবং, যেমন, ব্রাউজারে ডিফল্টরূপে সমর্থিত নয়।

আপনার প্রকল্পে CommonJS মডিউলগুলি বাস্তবায়ন করতে, আপনাকে প্রথমে আপনার অ্যাপ্লিকেশনে NPM চালু করতে হবে:

npm init -y 

CommonJS মডিউল সিস্টেম অনুসরণ করে রপ্তানি করা ভেরিয়েবলগুলি এভাবে আমদানি করা যেতে পারে:

//randomModule.js 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/path-to-module"); 

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

আপনি নামযুক্ত রপ্তানি বা ডিফল্ট রপ্তানি ব্যবহার করে কমনজেএস মডিউল সিস্টেম অনুসরণ করে একটি ভেরিয়েবল রপ্তানি করতে পারেন।

নাম রপ্তানি

নামকৃত রপ্তানি হল রপ্তানি যা তাদের নির্ধারিত নাম দ্বারা চিহ্নিত করা হয়েছে। নামযুক্ত রপ্তানি ডিফল্ট রপ্তানির বিপরীতে মডিউল প্রতি একাধিক রপ্তানির অনুমতি দেয়।

উদাহরণ স্বরূপ:

//main.js 
exports.myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
exports.anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 

উপরের কোড ব্লকে, আপনি দুটি নামযুক্ত ফাংশন রপ্তানি করছেন ( myExport এবং অন্য রপ্তানি ) তাদের সংযুক্ত করে রপ্তানি বস্তু

একইভাবে, আপনি যেমন ফাংশন রপ্তানি করতে পারেন:

const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 
module.exports = { 
  myExport, 
  anotherExport, 
}; 

উপরের কোড ব্লকে, আপনি সেট করুন রপ্তানি নামযুক্ত ফাংশন অবজেক্ট. আপনি শুধুমাত্র বরাদ্দ করতে পারেন রপ্তানি এর মাধ্যমে একটি নতুন বস্তুর প্রতি আপত্তি মডিউল বস্তু

আপনি যদি এইভাবে এটি করার চেষ্টা করেন তবে আপনার কোডটি একটি ত্রুটি নিক্ষেপ করবে:

//wrong way 
exports = { 
  myExport, 
  anotherExport, 
}; 

দুটি উপায়ে আপনি নামের রপ্তানি আমদানি করতে পারেন:

1. একটি একক বস্তু হিসাবে সমস্ত রপ্তানি আমদানি করুন এবং ব্যবহার করে আলাদাভাবে অ্যাক্সেস করুন৷ বিন্দু স্বরলিপি .

উদাহরণ স্বরূপ:

//otherModule.js 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

2. থেকে রপ্তানি ডি-কাঠামো রপ্তানি বস্তু

উদাহরণ স্বরূপ:

//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport(); 

আমদানী করার সকল পদ্ধতিতে একটা জিনিস কমন, যে নাম দিয়ে রপ্তানি করা হয়েছিল সেই নাম ব্যবহার করেই সেগুলিকে আমদানি করতে হবে।

ডিফল্ট রপ্তানি

একটি ডিফল্ট রপ্তানি হল একটি রপ্তানি যা আপনার পছন্দের যেকোনো নাম দ্বারা চিহ্নিত করা হয়। আপনার প্রতি মডিউলে শুধুমাত্র একটি ডিফল্ট এক্সপোর্ট থাকতে পারে।

উদাহরণ স্বরূপ:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = Foo; 

উপরের কোড ব্লকে, আপনি একটি ক্লাস রপ্তানি করছেন ( ফু ) পুনরায় বরাদ্দ করে রপ্তানি এটা আপত্তি.

ডিফল্ট রপ্তানি আমদানি করা নামধারী রপ্তানি আমদানির অনুরূপ, আপনি সেগুলি আমদানি করতে আপনার পছন্দের যেকোনো নাম ব্যবহার করতে পারেন।

উদাহরণ স্বরূপ:

//otherModule.js 
const Bar = require("./main"); 
const object = new Bar(); 
object.bar(); 

উপরের কোড ব্লকে, ডিফল্ট এক্সপোর্টের নাম দেওয়া হয়েছিল বার , যদিও আপনি আপনার পছন্দের যেকোনো নাম ব্যবহার করতে পারেন।

গুগল হোমের সাথে কাজ করবে

ES6 মডিউল সিস্টেম

ECMAScript হারমনি মডিউল সিস্টেম, যা ES6 মডিউল নামে পরিচিত, অফিসিয়াল জাভাস্ক্রিপ্ট মডিউল সিস্টেম।

ES6 মডিউলগুলি ব্রাউজার এবং সার্ভার দ্বারা সমর্থিত, যদিও সেগুলি ব্যবহার করার আগে আপনার কিছুটা কনফিগারেশন প্রয়োজন৷

ব্রাউজারে, আপনাকে নির্দিষ্ট করতে হবে প্রকার হিসাবে মডিউল স্ক্রিপ্ট আমদানি ট্যাগে।

তাই ভালো:

//index.html 
<script src="./app.js" type="module"></script> 

Node.js এ, আপনাকে সেট করতে হবে প্রকার প্রতি মডিউল আপনার মধ্যে package.json ফাইল

তাই ভালো:

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

আপনি ES6 মডিউল সিস্টেম ব্যবহার করে ভেরিয়েবল রপ্তানি করতে পারেন নাম রপ্তানি বা ডিফল্ট রপ্তানি ব্যবহার করে।

নাম রপ্তানি

CommonJS মডিউলের নামকৃত আমদানির মতোই, তাদের নির্ধারিত নাম দ্বারা চিহ্নিত করা হয় এবং প্রতি মডিউলে একাধিক রপ্তানির অনুমতি দেয়।

উদাহরণ স্বরূপ:

//main.js 
export const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
export const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 

ES6 মডিউল সিস্টেমে, নামযুক্ত রপ্তানি রপ্তানি করা হয় ভেরিয়েবলের সাথে প্রিফিক্স করে রপ্তানি কীওয়ার্ড

নামযুক্ত রপ্তানিগুলি কমনজেএস-এর মতো একইভাবে ES6-তে অন্য মডিউলে আমদানি করা যেতে পারে:

• থেকে প্রয়োজনীয় রপ্তানি ডি-স্ট্রাকচারিং রপ্তানি বস্তু
• একক বস্তু হিসাবে সমস্ত রপ্তানি আমদানি করা এবং ডট নোটেশন ব্যবহার করে আলাদাভাবে অ্যাক্সেস করা।

এখানে ডি-স্ট্রাকচারিংয়ের একটি উদাহরণ রয়েছে:

//otherModule.js 
import { myExport, anotherExport } from "./main.js"; 
myExport() 
anotherExport() 

এখানে সম্পূর্ণ বস্তু আমদানি করার একটি উদাহরণ:

import * as foo from './main.js' 
foo.myExport() 
foo.anotherExport() 

উপরের কোড ব্লকে, তারকাচিহ্ন ( * ) মানে 'সব'। দ্য হিসাবে কীওয়ার্ড বরাদ্দ করে রপ্তানি যে স্ট্রিংটি এটি অনুসরণ করে তাতে আপত্তি, এই ক্ষেত্রে, foo .

ডিফল্ট রপ্তানি

CommonJS-এ ডিফল্ট রপ্তানির মতো, সেগুলি আপনার পছন্দের যে কোনও নামে চিহ্নিত করা হয় এবং আপনি প্রতি মডিউলে শুধুমাত্র একটি ডিফল্ট রপ্তানি করতে পারেন।

উদাহরণ স্বরূপ:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo; 

ডিফল্ট রপ্তানি যোগ করে তৈরি করা হয় ডিফল্ট এর পরে কীওয়ার্ড রপ্তানি কীওয়ার্ড, রপ্তানির নাম অনুসরণ করে।

ডিফল্ট রপ্তানি আমদানি করা নামধারী রপ্তানি আমদানির অনুরূপ, আপনি সেগুলি আমদানি করতে আপনার পছন্দের যেকোনো নাম ব্যবহার করতে পারেন।

উদাহরণ স্বরূপ:

//otherModule.js 
import Bar from "./main.js"; 

মিশ্র রপ্তানি

ES6 মডিউল স্ট্যান্ডার্ড আপনাকে CommonJS এর ​​বিপরীতে একটি মডিউলে ডিফল্ট রপ্তানি এবং নাম রপ্তানি উভয়ই করতে দেয়।

উদাহরণ স্বরূপ:

//main.js 
export const myExport = function () { 
  console.log("This is another example of a named export"); 
}; 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo; 

মডিউলের গুরুত্ব

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