ডিজাইন প্যাটার্ন ব্যবহার করে কিভাবে জাভাস্ক্রিপ্টে পুনর্ব্যবহারযোগ্য কোড তৈরি করবেন

আপনি যদি কখনও পুনusব্যবহারযোগ্য জাভাস্ক্রিপ্ট কোড তৈরি করতে চান বা ডেভেলপারদের একটি দলের সাথে সহযোগিতা করতে চান, তাহলে আপনাকে ভাষাটির বিভিন্ন নকশা নিদর্শন কীভাবে ব্যবহার করতে হবে এবং চিহ্নিত করতে হবে তা জানতে হবে।

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

---

---

নকশা প্যাটার্ন একটি বিস্তৃত বিষয়, কিন্তু মডিউল প্যাটার্ন এবং কারখানা পদ্ধতিটি বুঝতে পারলে আপনি এটিকে ধরতে পারবেন।

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

জাভাস্ক্রিপ্ট মডিউলগুলি 2009 সালে চালু করা হয়েছিল, প্রোগ্রামিং ভাষার ES5 সংস্করণ সহ। মডিউল ব্যবহার করে ডেভেলপাররা এখন কোডের কাস্টম টুকরা তৈরি করতে এবং সেগুলি জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনের অন্যান্য বিভাগে ব্যবহার করতে রপ্তানি করতে সক্ষম হয়েছিল।

মডিউল প্যাটার্নের মূল কাঠামো


(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})();

উপরের উদাহরণে, মডিউল প্যাটার্ন সবসময় একটি অবিলম্বে আহ্বান করা ফাংশন এক্সপ্রেশন (IIFE) এ আবদ্ধ থাকে। এর মানে হল যে একটি মডিউল প্যাটার্ন সংজ্ঞায়িত হওয়ার সাথে সাথে কার্যকর করা হয়। উল্লেখ্য গুরুত্বপূর্ণ বিষয় হল যে মডিউল প্যাটার্ন দুটি স্বতন্ত্র বিভাগ নিয়ে গঠিত।

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

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

---

---

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

একটি সহজ অ্যাপ্লিকেশন যেমন একটি টাস্ক ম্যানেজার বিবেচনা করুন। মডিউল প্যাটার্ন ব্যবহার করে আপনাকে প্রতিটি বিভাগের জন্য কাস্টম মডিউল তৈরি করতে হবে। এই অন্তর্ভুক্ত হতে পারে:

• একটি টাস্ক কন্ট্রোলার
• একটি UI নিয়ামক
• একটি স্টোরেজ কন্ট্রোলার
• একটি অ্যাপ নিয়ামক

সম্পর্কিত: নতুনদের জন্য প্রোগ্রামিং প্রকল্প

---

---

প্রতিটি নতুন টাস্ক তৈরি করতে টাস্ক কন্ট্রোলার ব্যবহার করা হবে। UI নিয়ন্ত্রক UI- সম্পর্কিত ফাংশন নিয়ন্ত্রণ করতে ব্যবহার করা হবে, যেমন একটি বোতামে ক্লিক করার জন্য শোনা বা যা প্রদর্শিত হচ্ছে তা পরিবর্তন করা। স্টোরেজ কন্ট্রোলারটি প্রতিটি নতুন টাস্ক একটি ডাটাবেসে সংরক্ষণ করতে ব্যবহার করা হবে। অ্যাপ্লিকেশন মডিউল অ্যাপ্লিকেশন চালানোর জন্য ব্যবহার করা হবে।

একটি UI নিয়ামক তৈরি করার জন্য মডিউল প্যাটার্ন ব্যবহার করে


const UIController = ( function() {
//the private section of the module
let component = 'Replacement Text';
const changeComponent = function() {
//change all the h1 text to what is in the component variable above
const element = document.querySelector('h1');
element.textContent = component;
}
//the public section of the module
return{
callChangeComponent: function() {
changeComponent();
}
}
})();


উপরের উদাহরণটি স্পষ্টভাবে দুটি বিভাগকে দেখায় যা একটি মডিউল প্যাটার্নে পাওয়া যায় - ব্যক্তিগত এবং সর্বজনীন।

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

ChangeComponent উদাহরণ আহ্বান করার ভুল উপায়


UIController.changeComponent();


ত্রুটি বার্তাটি স্পষ্টভাবে বলে দেবে যে changeComponent () UIController ফাংশনের একটি ফাংশন নয়। এটি মডিউল প্যাটার্নের সৌন্দর্য; প্রাইভেট সেকশনে যে ভেরিয়েবল এবং ফাংশন তৈরি করা হয় তা কখনই সেই ফাংশনের সুযোগের বাইরে সরাসরি অ্যাক্সেস করা যাবে না।

যদিও ব্যক্তিগত ভেরিয়েবলগুলি সরাসরি অ্যাক্সেস করা যায় না, তবে তারা পরোক্ষভাবে (পাবলিক বিভাগ থেকে) অ্যাক্সেস করতে পারে। উপরের UI নিয়ামক উদাহরণ থেকে একটি গ্রহণযোগ্যতা হল যে মডিউল প্যাটার্নের সর্বজনীন বিভাগ সর্বদা রিটার্ন সম্পত্তি দ্বারা চিহ্নিত করা হয়।

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

ChangeComponent উদাহরণ আহ্বান করার সঠিক উপায়


UIController.callChangeComponent();


কারখানা প্যাটার্ন

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

উপরের আমাদের টাস্ক ম্যানেজারের কাছে ফিরে যাওয়া; যদি আমরা ব্যবহারকারীকে তৈরি করা প্রতিটি কাজের জন্য একটি টাইপ বরাদ্দ করার অনুমতি দিই, তাহলে আমরা ফ্যাক্টরি প্যাটার্ন ব্যবহার করে অ্যাপটির সেই দিকটি (বেশ দক্ষতার সাথে) তৈরি করতে পারতাম

একটি টাস্ক টাইপ উদাহরণ বরাদ্দ করার জন্য ফ্যাক্টরি প্যাটার্ন ব্যবহার করা


//Factory pattern function
const TaskFactory = function(){
this.createTask = function(name, type){
let task;
//check the type the user selected
if(type === 'urgent'){
task = new UrgentTask(name);
}else if(type === 'trivial'){
task = new TrivialTask(name);
}
//set the type selected in the if statement to the one received as a property
task.type = type;
//used to print the task and its type to the console
task.define = function(){
console.log(`${this.name} (${this.type}): ${this.priority}`)
}
return task
}
}

উপরের কোডটি নতুন কাজ তৈরির জন্য ফ্যাক্টরি পদ্ধতি ব্যবহার করে, টাইপ (জরুরী বা তুচ্ছ) পরীক্ষা করে এবং কনসোলে নতুন টাস্ক প্রিন্ট করার আগে উপযুক্ত সম্পত্তি বরাদ্দ করে।

অভ্যন্তরীণ ফাংশন createTask, একসাথে একাধিক কাজের জন্য মঞ্চ নির্ধারণ করে, কিন্তু আমরা কোন নতুন কাজ তৈরি করার চেষ্টা করার আগে কিছু অতিরিক্ত কোড আছে যা আমাদের প্রকল্পের এই বিভাগে অন্তর্ভুক্ত করতে হবে।

উপরের কোডে আমরা একটি নতুন UrgentTask বা একটি নতুন Trivialtask তৈরি করছি যদি কোন নির্দিষ্ট শর্ত পূরণ হয়। যাইহোক, আমাদের প্রকল্পে এই নামগুলির সাথে কোন ফাংশন বা ক্লাস নেই - আমাদের প্রকল্পে নিম্নলিখিত কোডটি প্রবর্তনের মাধ্যমে এই সমস্যাটি সহজেই সমাধান করা যেতে পারে।

জরুরী এবং তুচ্ছ কাজের ধরন তৈরি করুন


//Create the urgent task type
const UrgentTask = function(name){
this.name = name;
this.priority = 'as soon as possible'
}
//create the trivial task type
const TrivialTask = function(name){
this.name = name;
this.priority = 'when you can'
}


উপরের কোডের কারণে, আমরা এখন প্রতিটি নতুন কাজের জন্য UrgentTask বা TrivialTask ​​সম্পত্তি বরাদ্দ করতে সক্ষম। পরবর্তী ধাপ হল এখন একটি নতুন টাস্ক তৈরি করা, কিন্তু তার আগে, প্রতিটি নতুন টাস্ক তৈরি করার জন্য আমাদের একটি ডাটাবেস তৈরি করতে হবে।

প্রদত্ত যে একটি ডাটাবেস তৈরি করা নিজেই একটি সম্পূর্ণ নিবন্ধ, আমরা একটি ডেটা স্ট্রাকচার (একটি অ্যারে) দিয়ে একটি ডাটাবেস প্রতিস্থাপন করব।

একটি অ্যারের উদাহরণ তৈরি করা


//create an array to host the different task
const task = [];


এখন আমরা অবশেষে একটি নতুন কাজ তৈরি করতে পারি।

নতুন কাজের উদাহরণ তৈরি করা


//create two new tasks
const factory = new TaskFactory();
task.push(factory.createTask('Clean the house', 'urgent'));
task.push(factory.createTask('Reach level 30 in Candy Crush', 'trivial'));


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

প্রতিটি কাজ টাস্কফ্যাক্টরির মধ্য দিয়ে যাওয়ার পরে এবং উপযুক্ত ধরণের সম্পত্তি এটিকে বরাদ্দ করা হয়। এরপরে এটি টাস্ক অ্যারেতে ঠেলে দেওয়া হয় যা আমরা আগে তৈরি করেছি।

আমাদের একমাত্র দ্বিধা এখন আমরা কিভাবে জানব যে এই দুটি কাজ তৈরি করা হয়েছে বা আমাদের কারখানার প্যাটার্ন কাজ করেছে? যদি আমরা একটি ডাটাবেস ব্যবহার করতাম তাহলে আমরা কেবল ডাটাবেসটি পরীক্ষা করে দেখতে পারতাম যে দুটি নতুন কাজ তৈরি হয়েছে কিনা।

উপরে একটি টাস্ক টাইপ অ্যাসাইন করার জন্য ফ্যাক্টরি প্যাটার্ন ব্যবহার করে ফিরে যান, টাস্কটি প্রিন্ট করতে ব্যবহৃত কনসোল কমেন্টে সরাসরি তার নিচে, সেখানে একটি ছোট টাস্ক আছে। নিম্নলিখিত ব্যবহার করে কনসোলে অ্যারে পদ্ধতি ।


//print each task to the console
task.forEach(function(task){
task.define();
});


আপনার কনসোলে নিম্নলিখিত আউটপুটটি প্রদর্শিত হওয়া উচিত।


Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can


এখন আপনি আপনার জাভাস্ক্রিপ্ট প্রকল্পগুলিতে ডিজাইন প্যাটার্ন ব্যবহার করতে পারেন

এই পর্যায়ে আপনার জাভাস্ক্রিপ্টে নকশা নিদর্শনগুলি বোঝা উচিত এবং বুঝতে হবে কিভাবে নকশা নিদর্শনগুলি পুনরায় ব্যবহারযোগ্য কোড তৈরি করতে এবং একটি প্রকল্পের সাথে জড়িত সমস্ত ডেভেলপারদের জীবনকে সহজ করতে ব্যবহার করা যেতে পারে।

এখন আপনি জানেন কিভাবে দুটি জনপ্রিয় জাভাস্ক্রিপ্ট নকশা নিদর্শন কাজ করে, আপনি একটি অ্যাপ্লিকেশন বিকাশের জন্য দক্ষতার সাথে তাদের প্রয়োগ করতে সক্ষম হওয়া উচিত।

ইমেজ ক্রেডিট: Alltechbuzz/ পিক্সাবে

কিভাবে উইন্ডোজ 10 আইকন পরিবর্তন করবেন

শেয়ার করুন শেয়ার করুন টুইট ইমেইল কিভাবে জাভাস্ক্রিপ্টে ভেরিয়েবল ঘোষণা করবেন

জাভাস্ক্রিপ্ট দিয়ে শুরু করতে হলে আপনাকে ভেরিয়েবল বুঝতে হবে। জাভাস্ক্রিপ্টে ভেরিয়েবল ঘোষণা করার তিনটি উপায় এখানে দেওয়া হল।

পরবর্তী পড়ুন সম্পর্কিত বিষয়

• প্রোগ্রামিং
• জাভাস্ক্রিপ্ট

লেখক সম্পর্কে কাদিশা কেন(21 নিবন্ধ প্রকাশিত)

Kadeisha Kean একজন ফুল স্ট্যাক সফটওয়্যার ডেভেলপার এবং টেকনিক্যাল/টেকনোলজি রাইটার। কিছু জটিল প্রযুক্তিগত ধারণাকে সরলীকরণ করার তার স্বতন্ত্র ক্ষমতা আছে; যে কোন প্রযুক্তি নবজাতকের দ্বারা সহজেই বোঝা যায় এমন উপাদান তৈরি করা। তিনি লেখালেখি, আকর্ষণীয় সফটওয়্যার বিকাশ এবং বিশ্ব ভ্রমণ (তথ্যচিত্রের মাধ্যমে) সম্পর্কে উত্সাহী।

Kadeisha Kean থেকে আরো

আমাদের নিউজলেটার সদস্যতা

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

সাবস্ক্রাইব করতে এখানে ক্লিক করুন