Riot.js-এ Custom Directives এবং Utilities আপনাকে HTML মার্কআপে কাস্টম আচরণ যোগ করার এবং কোডের পুনঃব্যবহারযোগ্যতা এবং সাদৃশ্য বৃদ্ধি করার সুযোগ দেয়। Riot.js সরাসরি ডিরেকটিভ এবং ইউটিলিটি ফাংশন সমর্থন করে, যা UI এবং লজিককে আরও শক্তিশালী এবং কাস্টমাইজেবল করতে সহায়তা করে।
এখানে Riot.js-এ Custom Directives এবং Utilities এর ব্যবহার এবং উদাহরণ দেখানো হচ্ছে।
১. Custom Directives: কাস্টম ডিরেকটিভ তৈরি করা
Riot.js ডিরেকটিভগুলির মাধ্যমে আপনি HTML এলিমেন্টে কাস্টম আচরণ যুক্ত করতে পারেন। ডিরেকটিভ সাধারণত each, if, show ইত্যাদির মতো স্ট্যান্ডার্ড নির্দেশাবলী ব্যবহৃত হয়, তবে আপনি নিজস্ব কাস্টম ডিরেকটিভও তৈরি করতে পারেন।
কাস্টম ডিরেকটিভ তৈরি করা
এখানে একটি কাস্টম ডিরেকটিভ তৈরি করা হয়েছে যা একটি DOM এলিমেন্টে ক্লিক করলে তার ব্যাকগ্রাউন্ড রঙ পরিবর্তন করবে।
Step 1: কাস্টম ডিরেকটিভ তৈরি করা
import riot from 'riot';
// কাস্টম ডিরেকটিভ তৈরি
riot.tag('change-bg', 'div', {
onMounted() {
this.root.addEventListener('click', () => {
this.root.style.backgroundColor = 'lightblue';
});
},
template: '<div>Click me to change background color</div>',
});
এখানে, change-bg ডিরেকটিভ একটি div এলিমেন্টে কাস্টম কার্যক্রম যুক্ত করে, যা ক্লিক করলে ব্যাকগ্রাউন্ড রঙ পরিবর্তন করবে।
Step 2: কাস্টম ডিরেকটিভ ব্যবহার
<!-- Index.html -->
<change-bg></change-bg>
এখানে, <change-bg></change-bg> এলিমেন্টটি ব্যবহার করলে, ক্লিক করার পর তার ব্যাকগ্রাউন্ড রঙ পরিবর্তিত হবে।
২. Custom Directives with Attributes: কাস্টম ডিরেকটিভ অ্যাট্রিবিউটের মাধ্যমে
Riot.js কাস্টম ডিরেকটিভের মাধ্যমে আপনি আরও ডাইনামিক এবং রিয়েকটিভ আচরণ সংযুক্ত করতে পারেন, যেমন একটি এলিমেন্টের অ্যাট্রিবিউট পরিবর্তন করা।
উদাহরণ: কাস্টম ডিরেকটিভ যা অ্যাট্রিবিউট পরিবর্তন করবে
import riot from 'riot';
// কাস্টম ডিরেকটিভ তৈরি
riot.tag('bg-color', 'div', {
onMounted() {
const color = this.opts.color || 'lightgreen';
this.root.style.backgroundColor = color;
},
template: '<div>Background color will be set here</div>',
});
এখানে, bg-color ডিরেকটিভে একটি color অপশন যুক্ত করা হয়েছে, যার মাধ্যমে আপনি ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করতে পারবেন।
Step 2: কাস্টম ডিরেকটিভ ব্যবহার
<!-- Index.html -->
<bg-color color="pink"></bg-color>
<bg-color color="lightblue"></bg-color>
এখানে, color অপশন দিয়ে কাস্টম রঙ নির্ধারণ করা হচ্ছে এবং প্রতিটি div এর ব্যাকগ্রাউন্ড রঙ পরিবর্তন হবে।
৩. Utilities: ইউটিলিটি ফাংশন তৈরি করা
Riot.js আপনাকে নিজস্ব Utilities বা সহায়ক ফাংশন তৈরি করার সুযোগ দেয়, যা আপনার অ্যাপ্লিকেশন কোডকে আরও পরিষ্কার এবং পুনঃব্যবহারযোগ্য করতে সাহায্য করে। সাধারণত ইউটিলিটি ফাংশনগুলি কম্পোনেন্টের মধ্যে কিছু সাধারণ কার্যক্রম, যেমন ডেটা ফরম্যাটিং, অ্যারেতে ফিল্টারিং, বা কোডের পুনঃব্যবহারযোগ্য অংশ সম্পাদন করতে ব্যবহৃত হয়।
উদাহরণ: ইউটিলিটি ফাংশন ব্যবহার
ধরা যাক, একটি ইউটিলিটি ফাংশন আছে যা একটি তারিখ ফরম্যাট করবে:
// utils.js
export function formatDate(date) {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(date).toLocaleDateString(undefined, options);
}
এটি একটি সাধারণ তারিখ ফরম্যাটিং ফাংশন যা date ইনপুট হিসেবে নেয় এবং নির্দিষ্ট ফরম্যাটে তারিখ প্রদান করে।
Step 1: ইউটিলিটি ফাংশন ব্যবহার কম্পোনেন্টে
import riot from 'riot';
import { formatDate } from './utils';
// কম্পোনেন্টে ইউটিলিটি ফাংশন ব্যবহার
riot.tag('formatted-date', 'div', {
onMounted() {
this.formattedDate = formatDate('2024-12-25');
},
template: '<div>{formattedDate}</div>',
});
এখানে, formatDate ফাংশন ব্যবহার করে একটি নির্দিষ্ট তারিখ ফরম্যাট করা হয়েছে এবং সেই তারিখটি কম্পোনেন্টের ভিতরে রেন্ডার করা হয়েছে।
Step 2: ইউটিলিটি ফাংশন ব্যবহার করা
<!-- Index.html -->
<formatted-date></formatted-date>
এটি সঠিকভাবে রেন্ডার করবে "December 25, 2024"।
৪. Custom Directives for Data Binding: ডাটা বাইন্ডিংয়ের জন্য কাস্টম ডিরেকটিভ
Riot.js-এর data binding খুবই শক্তিশালী। আপনি ডাটা বাইন্ডিংয়ের মাধ্যমে কাস্টম ডিরেকটিভ তৈরি করতে পারেন যা UI পরিবর্তন করে যখন ডেটা পরিবর্তন হয়।
উদাহরণ: ডাটা বাইন্ডিংয়ের জন্য কাস্টম ডিরেকটিভ
import riot from 'riot';
// কাস্টম ডিরেকটিভ যা ডাটা বাইন্ডিং হ্যান্ডেল করবে
riot.tag('show-text', 'div', {
onMounted() {
this.text = this.opts.text || 'Default Text';
},
template: '<div>{text}</div>',
});
এখানে, show-text ডিরেকটিভটি কাস্টম ডেটা বাইন্ডিং প্রক্রিয়া ব্যবহার করে, যাতে আপনি যেকোনো text প্রপার্টি পাস করলে সেটি প্রদর্শিত হবে।
Step 2: কাস্টম ডিরেকটিভ ব্যবহার
<!-- Index.html -->
<show-text text="Hello, Riot.js!"></show-text>
<show-text text="This is a custom directive"></show-text>
এখানে, text প্রপার্টি দিয়ে আমরা কাস্টম টেক্সট প্রদান করছি, যা UI-তে রেন্ডার হবে।
Riot.js-এ Custom Directives এবং Utilities ব্যবহার করার মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনকে আরও শক্তিশালী, মডুলার এবং পুনঃব্যবহারযোগ্য করতে পারেন। কাস্টম ডিরেকটিভগুলি HTML মার্কআপের মধ্যে কাস্টম আচরণ যোগ করতে সাহায্য করে, যেমন ইভেন্ট হ্যান্ডলিং বা স্টাইল পরিবর্তন, এবং ইউটিলিটি ফাংশনগুলি সাধারণ কার্যক্রমের জন্য পুনঃব্যবহারযোগ্য কোড তৈরি করতে সহায়তা করে। এগুলি আপনার কোডের সাদৃশ্য বৃদ্ধি করে এবং উন্নত ব্যবহারকারীর অভিজ্ঞতা প্রদান করে।
Read more
