গ্লোবাল নেমস্পেস পল্যুশন
গ্লোবাল নেমস্পেস পল্যুশন করলে নেম колиশন (name collision) হয়। বড় প্রজেক্টে যেখানে আমরা একাধিক জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করি, সেখানে এই নেম колиশন খুব সাধারণ। চলে নেম колиশন কী তা বিস্তারিত আলোচনা করা যাক।
একটি সিনেরিও নিই যেখানে ২টি টিম A1 এবং A2 একই প্রজেক্টে কাজ করছে। তারা নিজেদের আলাদা জাভাস্ক্রিপ্ট ফাইল তৈরি করেছে: TeamA1.js এবং TeamA2.js।
TeamA1.js
TeamA1 একটি student ফাংশন তৈরি করেছে যাতে ২টি প্যারামিটার fname এবং lname (ফার্স্টনেম এবং লাস্টনেম)।
function student(fname, lname) {
this.fname = fname;
this.lname = lname;
this.getFullName = function() {
return this.fname + " " + this.lname;
}
}TeamA2.js
TeamA2 একই নামে student ফাংশন তৈরি করেছে কিন্তু ৩টি প্যারামিটার fname, mname, lname নিয়ে।
function student(fname, mname, lname) {
this.fname = fname;
this.mname = mname;
this.lname = lname;
this.getFullName = function() {
return this.fname + " " + this.mname + " " + this.lname;
}
}HTML ফাইল
উপরের js ফাইলগুলো অপারেট করার জন্য একটি HTML ফাইল তৈরি করুন। js ফাইলগুলো
ট্যাগে রাখুন।<html> <head>
<script type="javascript" src="TeamA1.js"></script>
<script type="javascript" src="TeamA2.js"></script>
</head>
<body>
<div id="resultDiv"></div>
<script>
document.getElementById("resultDiv").innerHTML =
new student("Rajendra", "prasad").getFullName();
</script>
</body> </html>আউটপুট
Rajendra prasad undefined
ব্যাখ্যা
এখানে দুটি student ফাংশন রয়েছে: একটি ২ প্যারামিটারসহ, অন্যটি ৩ প্যারামিটারসহ। আমাদের উদ্দেশ্য ২ প্যারামিটার ওয়ালা ফাংশন ব্যবহার করা, তাই HTML-এ শুধু دوটি প্যারামিটার ("Rajendra", "prasad") পাস করা হয়েছে। কিন্তু আউটপুট আসলো "Rajendra prasad undefined", মানে কোডটি ৩ প্যারামিটার ওয়ালা ফাংশন নেয়া।
কারণ: জাভাস্ক্রিপ্ট ফাংশন ওভারলোডিং সাপোর্ট করে না। এটি একই নামে ফাংশন থাকলে পরবর্তী ফাংশনটি পূর্বের ফাংশনকে ওভাররাইড করে দেয়। উদাহরণে TeamA2.js TeamA1.js-র পরে লোড হয়েছে, তাই TeamA2 ফাংশনটি TeamA1 কে ওভাররাইড করলো, ফলে undefined আউটপুটে আসলো। যদি দুটি js ফাইলের অবস্থান উল্টো হতো, তবে আউটপুট হতো "Rajendra prasad"।
এখানে নেম колиশন হয়েছে। দুটি টিমই একই নামে student ফাংশন বানিয়েছে। তাই গ্লোবাল নেমস্পেসে সবকিছু যোগ করা উচিত নয়। কেউ যদি একই ভেরিয়েবল বা ফাংশন নাম ব্যবহার করে, তবে নেম колиশন হতে পারে।
সমাধান
- নেমস্পেস প্যাটার্ন ব্যবহার করুন (যেমন
var MyApp = {}) - IIFE (Immediately Invoked Function Expression) ব্যবহার করুন
- ES6 মডিউল (
import/export) ব্যবহার করুন
