জাভাস্ক্রিপ্টে নেমস্পেস পলিউশন এড়াতে অবজেক্ট ব্যবহার

নেমস্পেস পলিউশন এড়ানো

JavaScript ফাংশন ওভারলোডিং সাপোর্ট করে না। তাই একই নামের দুটি ফাংশন ব্যবহার করলে লোডিং অর্ডার অনুযায়ী একটি ফাংশন অন্যটিকে ওভাররাইড করে দেয়। এর মানে জাভাস্ক্রিপ্টে নেমস্পেস (নেমিং কনভেনশন) নেই। তবে, আমরা অবজেক্ট ব্যবহার করে নেমস্পেস তৈরি করতে পারি যাতে নেম কলিশন এড়ানো যায়।

var Tutorix = Tutorix || {};

উপরোক্ত কোডটি বোঝায় যদি Tutorix অবজেক্টটি ইতিমধ্যে থাকে তবে সেটি ব্যবহার করুন, অন্যথায় নতুন অবজেক্ট তৈরি করুন।

আমরা নেস্টেড নেমস্পেসও তৈরি করতে পারি (নেমস্পেসের ভিতর নেমস্পেস)।

var Tutorix = Tutorix || {}; Tutorix.TeamA1 = Tutorix.TeamA1 || {};

দ্বিতীয় লাইনটি বোঝায় যদি TeamA1 ইতিমধ্যে থাকে তবে সেটি ব্যবহার করুন, অন্যথায় খালি TeamA1 অবজেক্ট তৈরি করুন।

নিচের উদাহরণে HTML ফাইলে শুধু ২ প্যারামিটার পাস করা হলেও আউটপুটে ৩ প্যারামিটার আসছে। এটা হয়েছে নেমস্পেস কলিশন-এর কারণে Team1 এবং Team2 এর মাঝে (দুইটিই একই ফাংশন নাম "student" শেয়ার করছে)।

TeamA1.js

<html> <body> <script>    function student(Fname,Lname){       this.Fname = Fname;       this.Lname = Lname;       This.getFullName = function(){          return this.Fname + " " + this.Lname;       }    } </script> </body> </html>

TeamA2.js

<html> <body> <script>    function student(Fname, Mname, Lname){    this.Fname = Fname;    this.Mname = Mname;    this.Lname = Lname;    This.getFullName = function(){       return this.Fname + " " + this.Mname + " " + this.Lname;    }    } </script> </body> </html>

HTML ফাইল

<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.

যেহেতু TeamA1.js এবং TeamA2.js-র মাঝে নেমস্পেস কলিশন হয়েছে, শুধু ২ প্যারামিটার "Rajendra" এবং "prasad" পাঠিয়ে TeamA1.js এক্সেস করার চেষ্টা করলে, ৩ প্যারামিটার "Rajendra prasad undefined" আউটপুটে এল। কারণ ৩ প্যারামিটার বিশিষ্ট TeamA2.js TeamA1.js-কে ওভাররাইড করে দিয়েছে।

এই ধরনের নেম কলিশন এড়াতে অবজেক্ট দিয়ে নেমস্পেস তৈরি করতে হয়।

TeamA1.js (নেমস্পেস সহ)

নিচের কোডে TeamA1 নেমস্পেস Tutorix অবজেক্ট দিয়ে তৈরি করা হয়েছে।

<html> <body> <script>    var Tutorix = Tutorix || {};    Tutorix.TeamA1 = Tutorix.TeamA1 || {};    Tutorix.TeamA1.student = function (Fname, Lname){       this.Fname = Fname;       this.Lname = Lname;       this.getFullName = function(){          return this.Fname + " " + this.Lname;       }       return this;    } </script> </body> </html>

TeamA2.js (নেমস্পেস সহ)

নিচের কোডে TeamA2 নেমস্পেস Tutorix অবজেক্ট দিয়ে তৈরি করা হয়েছে।

<html> <body> <script>    var Tutorix = Tutorix || {};    Tutorix.TeamA2 = Tutorix.TeamA2 || {};    Tutorix.TeamA2.student = function (Fname, Mname, Lname){       this.Fname = Fname;       this.Mname = Mname;       this.Lname = Lname;       this.getFullName = function(){          return this.Fname + " " + this.Mname + " " + this.Lname;       }       return this;    } </script> </body> </html>

HTML ফাইল

দুইটি js ফাইল (TeamA1.js এবং TeamA2.js) HTML-এ ইনক্লুড করুন।

<html> <head> <script type = "javascript" src = "TeamA1.js"></script> <script type = "javascript" src = "TeamA2.js"></script> </head> <body> <script>    document.write(window.Tutorix.TeamA1.student("Rajendra", "prasad").getFullName());    document.write(window.Tutorix.TeamA2.student("Babu","Rajendra","prasad").getFullName()); </script> </body> </html>

আউটপুট

Rajendra prasad Babu Rajendra prasad

উপরের উদাহরণে, আমরা নেস্টেড নেমস্পেস ব্যবহার করেছি: Tutorix নেমস্পেসের ভিতরে TeamA1 এবং TeamA2 নেস্ট করা হয়েছে নেম কলিশন এড়াতে। নেমস্পেস কলিশন এড়ানো হয়েছে বলে প্রতিটি স্ক্রিপ্টের আলাদা আউটপুট পাওয়া গেছে।