Riot.js-এ ইভেন্ট এবং ইভেন্ট হ্যান্ডলিং অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য। Riot.js এর মাধ্যমে আপনি কাস্টম ইভেন্ট তৈরি এবং হ্যান্ডল করতে পারবেন, যা আপনার কম্পোনেন্টের মধ্যে বা বাইরের বিশ্বে ইন্টারঅ্যাকশন তৈরি করতে সাহায্য করে।
Riot.js-এ ইভেন্ট হ্যান্ডলিং এর মূল ধারণা:
- ইভেন্ট বাইন্ডিং: Riot.js এ আপনি ইভেন্টগুলি HTML ট্যাগের সঙ্গে বাইন্ড করতে পারেন। সাধারণত আপনি এই ইভেন্টগুলো ব্যবহার করবেন, যেমন
click,change,input,submitইত্যাদি। - অটোমেটিক ডাটা বাইন্ডিং: Riot.js এর রিয়েকটিভ ডাটা বাইন্ডিং এর মাধ্যমে, আপনি কম্পোনেন্টের স্টেট পরিবর্তন করে UI আপডেট করতে পারেন, যখন কোনও ইভেন্ট ঘটবে।
- ইভেন্ট হ্যান্ডলিং: Riot.js এ আপনি ইভেন্ট হ্যান্ডলার লিখতে পারেন, যা ইভেন্ট ট্রিগার হলে নির্দিষ্ট কাজ করতে পারে। যেমন, একটি বাটন ক্লিক হলে একটি ফাংশন কল করা ইত্যাদি।
Riot.js-এ ইভেন্ট হ্যান্ডলিং এর গঠন:
<!-- MyComponent.riot -->
<my-component>
<button onclick={onClickHandler}>Click Me</button>
<script>
export default {
onClickHandler() {
console.log('Button clicked!');
}
}
</script>
</my-component>
এখানে:
onclick={onClickHandler}— এটি HTML উপাদানেরonclickইভেন্টের সাথে JavaScript ফাংশনonClickHandlerকে বাইন্ড করে।- যখন বাটনটি ক্লিক হবে, তখন
onClickHandlerফাংশনটি কল হবে এবং কনসোলে "Button clicked!" প্রিন্ট হবে।
Riot.js-এ ইভেন্ট হ্যান্ডলিংয়ের উদাহরণ:
নিচে একটি উদাহরণ দেওয়া হলো, যেখানে একটি বাটন ক্লিক করলে কম্পোনেন্টের মেসেজ পরিবর্তিত হয়।
<!-- MessageComponent.riot -->
<message-component>
<h1>{message}</h1>
<button onclick={changeMessage}>Change Message</button>
<script>
export default {
onMounted() {
this.message = 'Hello, Riot.js!';
},
changeMessage() {
this.message = 'Message Changed!';
}
}
</script>
</message-component>
এখানে:
messageহল কম্পোনেন্টের ডেটা, যা প্রথমে "Hello, Riot.js!" থাকবে।- বাটন ক্লিক করলে
changeMessageফাংশনটি কল হবে, এবং এটিmessageএর মান পরিবর্তন করবে "Message Changed!" এ।
Riot.js-এ কাস্টম ইভেন্ট:
Riot.js-এ আপনি কাস্টম ইভেন্টও তৈরি করতে পারেন, যা কম্পোনেন্টের মধ্যে বা বাইরে ইন্টারঅ্যাকশন পরিচালনা করতে ব্যবহৃত হয়। কাস্টম ইভেন্ট তৈরি করার জন্য this.trigger() ব্যবহার করা হয়।
উদাহরণ: কাস্টম ইভেন্টের ব্যবহার
<!-- ParentComponent.riot -->
<parent-component>
<child-component on-greeting={greetHandler}></child-component>
<script>
export default {
greetHandler(e) {
console.log(e.detail.message); // "Hello from Child!"
}
}
</script>
</parent-component>
<!-- ChildComponent.riot -->
<child-component>
<button onclick={sendGreeting}>Send Greeting</button>
<script>
export default {
sendGreeting() {
this.trigger('greeting', { message: 'Hello from Child!' });
}
}
</script>
</child-component>
এখানে:
- ParentComponent: এটি
child-componentএর কাস্টম ইভেন্টgreetingকে হ্যান্ডল করেgreetHandlerফাংশনের মাধ্যমে। - ChildComponent: এখানে একটি বাটন ক্লিক করলে
sendGreetingফাংশনটি কল হবে, যাgreetingনামক কাস্টম ইভেন্ট ট্রিগার করবে এবং এটি একটি ডেটা ({ message: 'Hello from Child!' }) পাঠাবে।
Riot.js-এ ইভেন্ট ডেলিগেশন:
Riot.js-এ ইভেন্ট ডেলিগেশন ব্যবহার করে আপনি একাধিক ইভেন্ট হ্যান্ডল করতে পারেন। এটি একটি সাধারণ কৌশল, যেখানে একটি প্যারেন্ট কম্পোনেন্ট একটি ইভেন্ট শোনে এবং তার অধীনে থাকা শিশু কম্পোনেন্টগুলোর ইভেন্টগুলিকে পরিচালনা করে।
উদাহরণ: ইভেন্ট ডেলিগেশন
<!-- ListComponent.riot -->
<list-component>
<ul>
<li onclick={handleItemClick}>Item 1</li>
<li onclick={handleItemClick}>Item 2</li>
<li onclick={handleItemClick}>Item 3</li>
</ul>
<script>
export default {
handleItemClick(e) {
console.log('Clicked on:', e.target.textContent);
}
}
</script>
</list-component>
এখানে:
handleItemClickফাংশনটি প্রতিটি আইটেমের ক্লিক ইভেন্ট হ্যান্ডল করে এবং ক্লিক হওয়া আইটেমের নাম কনসোলে প্রদর্শন করে।
নির্দিষ্ট ইভেন্ট টাইপের বাইন্ডিং:
Riot.js অন্যান্য ইভেন্ট বাইন্ডিং ফিচারও সাপোর্ট করে, যেমন:
on-click: যখন ক্লিক ইভেন্ট ঘটে।on-input: ইনপুট ফিল্ডে কোনও পরিবর্তন হলে।on-change: পরিবর্তন ঘটে এমন কোনও ফিল্ডে।- ইভেন্ট হ্যান্ডলিং Riot.js-এ খুবই সহজ এবং আপনি ইভেন্ট বাইন্ডিং, কাস্টম ইভেন্ট, এবং ইভেন্ট ডেলিগেশন ব্যবহার করে আপনার কম্পোনেন্টের মধ্যে ইন্টারঅ্যাকশন পরিচালনা করতে পারেন।
- Riot.js-এ ইভেন্ট হ্যান্ডলার এবং কাস্টম ইভেন্ট ট্রিগার করতে
this.trigger()ব্যবহার করতে হবে, এবং ইভেন্ট হ্যান্ডলিং সাধারণত HTML ট্যাগেonclickবাon-[event]এর মাধ্যমে বাইন্ড করা হয়।
Riot.js এ ইভেন্ট পরিচালনা (যেমন click, input, submit ইত্যাদি) খুবই সহজ। Riot.js-এ, আপনি কম্পোনেন্টের HTML অংশে ইভেন্টের সাথে সংযুক্ত onclick, oninput, onsubmit এর মতো ইভেন্ট হ্যান্ডলার ব্যবহার করতে পারেন এবং এগুলিকে কম্পোনেন্টের স্ক্রিপ্ট অংশে ম্যানেজ করতে পারেন।
Riot.js এ ইভেন্ট হ্যান্ডলিং:
Riot.js এ ইভেন্ট হ্যান্ডলিং করার জন্য সাধারণত onclick, oninput, onsubmit ইভেন্টগুলির জন্য ফাংশন ডিফাইন করা হয় এবং সেই ফাংশনটি HTML এর মধ্যে যুক্ত করা হয়।
উদাহরণ 1: Click ইভেন্ট
<!-- ClickEvent.riot -->
<click-event>
<button onclick={handleClick}>Click Me!</button>
<p>{message}</p>
<script>
export default {
onMounted() {
this.message = "Button not clicked yet.";
},
handleClick() {
this.message = "Button clicked!";
}
}
</script>
</click-event>
এখানে, button ট্যাগের onclick ইভেন্ট হ্যান্ডলারের মাধ্যমে handleClick ফাংশন কল করা হয়েছে। যখন ব্যবহারকারী বাটনটি ক্লিক করবে, তখন message পরিবর্তিত হবে এবং UI তে সেই বার্তা দেখানো হবে।
উদাহরণ 2: Input ইভেন্ট (Input Field থেকে ডেটা নেয়া)
<!-- InputEvent.riot -->
<input-event>
<input type="text" oninput={updateMessage} placeholder="Type something">
<p>Input: {inputText}</p>
<script>
export default {
onMounted() {
this.inputText = '';
},
updateMessage(e) {
this.inputText = e.target.value;
}
}
</script>
</input-event>
এখানে, input ট্যাগের oninput ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়েছে, যা ইনপুট ফিল্ডে টাইপ করা টেক্সটটি ধরবে এবং inputText প্রপার্টিতে সেট করবে। এর মাধ্যমে, আপনি ব্যবহারকারীর ইনপুট ফিল্ডের মান দেখতে পাবেন।
উদাহরণ 3: Submit ইভেন্ট (ফর্ম সাবমিট)
<!-- SubmitEvent.riot -->
<submit-event>
<form onsubmit={handleSubmit}>
<input type="text" ref="nameInput" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
<p>Your name: {name}</p>
<script>
export default {
onMounted() {
this.name = '';
},
handleSubmit(e) {
e.preventDefault(); // Form এর ডিফল্ট সাবমিট প্রতিরোধ করা হয়
this.name = this.refs.nameInput.value; // ইনপুট ভ্যালু নেয়া হয়
}
}
</script>
</submit-event>
এখানে, onsubmit ইভেন্ট ব্যবহার করে একটি ফর্ম সাবমিট করার ব্যবস্থা করা হয়েছে। handleSubmit ফাংশনটি সাবমিট হওয়ার সময় চালু হবে এবং e.preventDefault() ব্যবহার করে ফর্মের ডিফল্ট সাবমিট প্রতিরোধ করা হবে, যাতে পেজ রিফ্রেশ না হয়। এছাড়া, this.refs.nameInput.value দিয়ে ইনপুট ফিল্ডের মান নেয়া হবে।
Riot.js এ ইভেন্ট হ্যান্ডলিং এর মূল বৈশিষ্ট্য:
- ইভেন্ট হ্যান্ডলার সংযুক্ত করা: HTML তে সরাসরি
onclick,oninput,onsubmitইভেন্টগুলির জন্য ফাংশন হ্যান্ডলার যোগ করা যায়। e(ইভেন্ট অবজেক্ট): ইভেন্টের সাথেeঅবজেক্ট পাওয়া যায়, যা ইভেন্ট সম্পর্কিত তথ্য ধারণ করে (যেমনe.target.valueইনপুট ফিল্ডের মান পেতে ব্যবহার করা হয়)।thisপ্রপার্টি: কম্পোনেন্টের প্রপার্টি এবং স্টেট পরিবর্তন করার জন্যthisব্যবহার করা হয়, যেমনthis.messageবাthis.inputText।
সারাংশ:
Riot.js এ ইভেন্ট হ্যান্ডলিং খুবই সহজ এবং ডিরেক্ট। ইভেন্টের জন্য ফাংশন তৈরি করা এবং কম্পোনেন্টের HTML অংশে সেই ফাংশনকে যুক্ত করা হয়। Riot.js কম্পোনেন্টে ইভেন্ট হ্যান্ডলিং এমন একটি মেথড যা সোজা, পরিষ্কার, এবং খুবই ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করতে সহায়ক।
Riot.js-এ Custom Event তৈরি এবং ব্যবহার করা খুবই সহজ। Custom events আপনার কম্পোনেন্টের মধ্যে বিভিন্ন ইন্টারঅ্যাকশন পরিচালনা করতে সাহায্য করে এবং অন্যান্য কম্পোনেন্টের মধ্যে যোগাযোগের জন্য ব্যবহৃত হয়। আপনি একটি কম্পোনেন্টের মধ্যে একটি কাস্টম ইভেন্ট ট্রিগার করতে পারেন এবং সেই ইভেন্টটিকে অন্য কম্পোনেন্টে শোনার জন্য (listen) ব্যবহার করতে পারেন।
Custom Event তৈরি করার পদ্ধতি
Riot.js-এ Custom Event তৈরি করার জন্য আপনি riot.observable() বা this.trigger() ব্যবহার করতে পারেন। চলুন, দুটি উপায়েই কাস্টম ইভেন্ট তৈরি করার পদ্ধতি দেখে নেই।
১. this.trigger() ব্যবহার করে Custom Event তৈরি করা
Riot.js এর কম্পোনেন্টের মধ্যে একটি ইভেন্ট তৈরি করতে this.trigger() ব্যবহার করা হয়। আপনি এটি একটি নির্দিষ্ট ইভেন্টের জন্য ট্রিগার করতে পারেন, এবং সেই ইভেন্টটি অন্য কম্পোনেন্টে শোনা (listen) যেতে পারে।
উদাহরণ:
<!-- MyComponent.riot -->
<my-component>
<h1>{opts.title}</h1>
<p>{message}</p>
<button onclick={changeMessage}>Change Message</button>
<script>
export default {
onMounted() {
this.message = 'Hello, World!';
},
changeMessage() {
this.message = 'Message changed!';
// Custom Event Triggering
this.trigger('messageChanged', this.message);
}
}
</script>
</my-component>
এখানে, changeMessage ফাংশনে this.trigger('messageChanged', this.message) ব্যবহার করে একটি কাস্টম ইভেন্ট 'messageChanged' ট্রিগার করা হচ্ছে এবং সেটি message পাঠানো হচ্ছে।
২. অন্য কম্পোনেন্টে Custom Event শোনা (Listen)
এখন, আপনাকে সেই কাস্টম ইভেন্টটি অন্য কম্পোনেন্টে শোনার (listen) জন্য সেটআপ করতে হবে। আপনি riot.mount ব্যবহার করে একটি কম্পোনেন্ট মাউন্ট করলে on মেথডের মাধ্যমে ইভেন্টটি শোনতে পারবেন।
উদাহরণ:
<!-- AnotherComponent.riot -->
<another-component>
<h2>Received Message: {receivedMessage}</h2>
<script>
export default {
onMounted() {
// Shorthand for listening to custom events
this.on('messageChanged', (newMessage) => {
this.receivedMessage = newMessage;
});
}
}
</script>
</another-component>
এখানে, this.on('messageChanged', ...) দিয়ে 'messageChanged' কাস্টম ইভেন্টটি শোনা হচ্ছে এবং যখন ইভেন্টটি ট্রিগার হবে, তখন তা newMessage প্যারামিটার সহ কম্পোনেন্টে পৌঁছাবে।
৩. কাস্টম ইভেন্ট ইন্টারকম কমিউনিকেশন
আপনি যদি একটি কাস্টম ইভেন্ট একটি কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে পাঠাতে চান, তবে এটি riot.mount() এর মাধ্যমে সহজে করতে পারেন। নিচের উদাহরণে, একটি কম্পোনেন্টের মাধ্যমে ইভেন্ট পাঠানো হচ্ছে এবং অন্য কম্পোনেন্টে এটি শোনা হচ্ছে।
উদাহরণ:
<!-- ParentComponent.riot -->
<parent-component>
<my-component title="Riot.js Component"></my-component>
<another-component></another-component>
<script>
export default {
onMounted() {
this.on('messageChanged', (msg) => {
this.message = msg;
});
}
}
</script>
</parent-component>
এখানে, messageChanged ইভেন্টটি প্যারেন্ট কম্পোনেন্টের মাধ্যমে শোনা হচ্ছে এবং msg প্যারামিটারটি this.message-এ সংরক্ষিত হচ্ছে।
৪. Multiple Listeners এবং Custom Event with Options
Riot.js-এ আপনি একাধিক শোনার (listeners) জন্য একই ইভেন্ট ব্যবহার করতে পারেন। এতে আপনি একটি একক ইভেন্টের মাধ্যমে একাধিক কার্যক্রম সম্পাদন করতে পারবেন। এছাড়া, কাস্টম ইভেন্টের সাথে অতিরিক্ত ডেটা বা অপশন পাঠানোও সম্ভব।
উদাহরণ:
<!-- MyComponent.riot -->
<my-component>
<h1>{opts.title}</h1>
<button onclick={sendData}>Send Data</button>
<script>
export default {
sendData() {
// Trigger custom event with additional data
this.trigger('dataSent', { info: 'Some important data', timestamp: new Date() });
}
}
</script>
</my-component>
এখন, অন্য কম্পোনেন্টে এই ইভেন্ট শোনা হচ্ছে এবং অতিরিক্ত ডেটা গ্রহণ করা হচ্ছে:
<!-- AnotherComponent.riot -->
<another-component>
<h2>Received Info: {info}</h2>
<script>
export default {
onMounted() {
this.on('dataSent', (data) => {
this.info = `Received Data: ${data.info} at ${data.timestamp}`;
});
}
}
</script>
</another-component>
এখানে, 'dataSent' কাস্টম ইভেন্টটি অতিরিক্ত ডেটা সহ ট্রিগার হচ্ছে এবং অন্য কম্পোনেন্টে সেই ডেটা শোনা হচ্ছে।
Riot.js-এ কাস্টম ইভেন্টের মাধ্যমে আপনি কম্পোনেন্টের মধ্যে এবং বিভিন্ন কম্পোনেন্টের মধ্যে সহজে যোগাযোগ করতে পারবেন। এটি আপনার অ্যাপ্লিকেশনে শক্তিশালী ইন্টারঅ্যাকশন এবং রিয়েকটিভ ফিচার যুক্ত করে, যা UI-এর অভ্যন্তরীণ এবং বাইরের অংশের মধ্যে কার্যকরী যোগাযোগ স্থাপন করতে সাহায্য করে। this.trigger() এবং this.on() পদ্ধতি ব্যবহার করে আপনি কাস্টম ইভেন্ট ট্রিগার এবং শোনার কাজটি খুব সহজে করতে পারেন।
Riot.js এ Parent-Child Components এর মধ্যে ইভেন্ট আদান-প্রদান খুবই সহজ এবং সরল, কারণ Riot.js ডাটা বাইন্ডিং এবং ইভেন্ট ম্যানেজমেন্টে একটি পরিষ্কার এবং সহজ পদ্ধতি প্রদান করে। Parent এবং Child কম্পোনেন্টের মধ্যে ডাটা এবং ইভেন্ট আদান-প্রদান করার জন্য আপনাকে কিছু নির্দিষ্ট নিয়ম অনুসরণ করতে হবে।
Parent-Child Components এর মধ্যে ইভেন্ট আদান-প্রদান
ধরা যাক, আমরা একটি Parent কম্পোনেন্ট এবং একটি Child কম্পোনেন্ট তৈরি করতে যাচ্ছি। Child কম্পোনেন্টটি Parent কম্পোনেন্টে কিছু ইভেন্ট পাঠাবে এবং Parent কম্পোনেন্টটি সেই ইভেন্টটি গ্রহণ করবে।
১. Parent থেকে Child এ ডাটা পাঠানো (প্রপস ব্যবহার করে)
Parent কম্পোনেন্ট Child কম্পোনেন্টে ডাটা প্রপস হিসেবে পাঠাতে পারে। এই প্রপসগুলি সাধারণত কম্পোনেন্টের রেন্ডারিং সময় ব্যবহার করা হয়।
Example: Parent কম্পোনেন্টে ডাটা পাঠানো Child কম্পোনেন্টে
Parent.riot (Parent কম্পোনেন্ট):
<!-- Parent.riot -->
<parent-component>
<child-component title="Parent's Title" on-click={handleChildClick}></child-component>
<script>
import ChildComponent from './Child.riot';
export default {
handleChildClick(e) {
console.log('Child clicked', e);
}
}
</script>
</parent-component>
এখানে:
<child-component title="Parent's Title" />: Parent কম্পোনেন্টtitleনামের প্রপস Child কম্পোনেন্টে পাঠাচ্ছে।on-click={handleChildClick}: Parent কম্পোনেন্ট Child কম্পোনেন্টেরclickইভেন্টে হ্যান্ডলার সেট করছে।
Child.riot (Child কম্পোনেন্ট):
<!-- Child.riot -->
<child-component>
<h1>{opts.title}</h1>
<button onclick={handleClick}>Click Me</button>
<script>
export default {
handleClick() {
this.emit('click', 'Button was clicked!');
}
}
</script>
</child-component>
এখানে:
opts.titleদিয়ে Parent থেকে প্রাপ্ত ডাটা ব্যবহার করা হচ্ছে।this.emit('click', 'Button was clicked!'): Child কম্পোনেন্ট একটিclickইভেন্ট ইস্যু করছে, যা Parent কম্পোনেন্ট দ্বারা হ্যান্ডল করা হবে।
২. Child থেকে Parent এ ইভেন্ট পাঠানো (Emit ব্যবহার করে)
Child কম্পোনেন্ট থেকে Parent কম্পোনেন্টে ইভেন্ট পাঠানোর জন্য this.emit() ব্যবহার করা হয়। এই ইভেন্টটি Parent কম্পোনেন্টে শোনার জন্য on- প্রিফিক্স দিয়ে হ্যান্ডলার সেট করা হয়।
Parent.riot (Parent কম্পোনেন্ট):
<!-- Parent.riot -->
<parent-component>
<child-component on-click={handleChildClick}></child-component>
<script>
import ChildComponent from './Child.riot';
export default {
handleChildClick(message) {
console.log('Message from child: ', message);
}
}
</script>
</parent-component>
এখানে, on-click={handleChildClick} Parent কম্পোনেন্টে একটি হ্যান্ডলার নির্ধারণ করছে, যা Child কম্পোনেন্টের click ইভেন্ট গ্রহণ করবে।
Child.riot (Child কম্পোনেন্ট):
<!-- Child.riot -->
<child-component>
<button onclick={handleClick}>Click Me</button>
<script>
export default {
handleClick() {
this.emit('click', 'Hello from Child!');
}
}
</script>
</child-component>
এখানে, this.emit('click', 'Hello from Child!') দিয়ে Child কম্পোনেন্ট একটি click ইভেন্ট ইস্যু করছে। Parent কম্পোনেন্টে সেট করা on-click হ্যান্ডলারটি এই ইভেন্ট গ্রহণ করবে এবং একটি মেসেজ কনসোলে লগ করবে।
৩. Multiple Events (একাধিক ইভেন্ট)
Child কম্পোনেন্ট একাধিক ইভেন্ট ইস্যু করতে পারে এবং Parent কম্পোনেন্টে তাদের সঠিকভাবে হ্যান্ডল করতে পারে। এটি সাধারণত ব্যবহার করা হয় যখন একাধিক কার্যকলাপ বা ইভেন্ট নিয়ন্ত্রণ করতে হয়।
Example: Multiple Events
Parent.riot (Parent কম্পোনেন্ট):
<!-- Parent.riot -->
<parent-component>
<child-component on-click={handleChildClick} on-submit={handleChildSubmit}></child-component>
<script>
import ChildComponent from './Child.riot';
export default {
handleChildClick(message) {
console.log('Click Event from Child:', message);
},
handleChildSubmit(data) {
console.log('Submit Event from Child:', data);
}
}
</script>
</parent-component>
Child.riot (Child কম্পোনেন্ট):
<!-- Child.riot -->
<child-component>
<button onclick={handleClick}>Click Me</button>
<form onsubmit={handleSubmit}>
<input type="text" ref={input}/>
<button type="submit">Submit</button>
</form>
<script>
export default {
handleClick() {
this.emit('click', 'Button clicked!');
},
handleSubmit(e) {
e.preventDefault();
const data = this.refs.input.value;
this.emit('submit', data);
}
}
</script>
</child-component>
এখানে:
handleClickবাটন ক্লিক করলেclickইভেন্ট ইস্যু করবে।handleSubmitফর্ম সাবমিট হলেsubmitইভেন্ট ইস্যু করবে, যা Parent কম্পোনেন্টে আলাদা করে হ্যান্ডল করা হচ্ছে।
৪. Parent থেকে Child এ ইভেন্ট পাঠানো (Custom Methods)
Riot.js-এ Parent কম্পোনেন্ট থেকে Child কম্পোনেন্টে কাস্টম মেথড বা ফাংশনও পাঠানো যায়, যাতে Child কম্পোনেন্ট নিজে থেকে সেই মেথড ব্যবহার করতে পারে।
Example: Parent থেকে Child কম্পোনেন্টে মেথড পাঠানো
Parent.riot (Parent কম্পোনেন্ট):
<!-- Parent.riot -->
<parent-component>
<child-component ref={child} on-click={handleChildClick}></child-component>
<script>
import ChildComponent from './Child.riot';
export default {
handleChildClick() {
console.log('Child clicked');
},
onMounted() {
this.child.changeMessage('Message from Parent');
}
}
</script>
</parent-component>
Child.riot (Child কম্পোনেন্ট):
<!-- Child.riot -->
<child-component>
<h1>{message}</h1>
<button onclick={handleClick}>Click Me</button>
<script>
export default {
message: 'Initial Message',
handleClick() {
this.emit('click');
},
changeMessage(newMessage) {
this.message = newMessage;
}
}
</script>
</child-component>
এখানে, Parent কম্পোনেন্ট changeMessage ফাংশনটি Child কম্পোনেন্টে পাঠাচ্ছে এবং এটি Child কম্পোনেন্টের মেসেজ পরিবর্তন করছে।
Riot.js-এ Parent-Child Components এর মধ্যে ইভেন্ট আদান-প্রদান একটি সহজ এবং কার্যকরী প্রক্রিয়া। Parent কম্পোনেন্ট Child কম্পোনেন্টে ডাটা পাঠাতে প্রপস ব্যবহার করে এবং Child কম্পোনেন্ট থেকে Parent কম্পোনেন্টে ইভেন্ট পাঠাতে this.emit() ব্যবহার করে। এই ইভেন্ট আদান-প্রদান পদ্ধতিটি React, Vue বা অন্যান্য কম্পোনেন্ট-ভিত্তিক ফ্রেমওয়ার্কের সাথে তুলনামূলকভাবে সহজ এবং পরিষ্কার।
আপনি যদি আরও কিছু জানতে চান বা একটি নির্দিষ্ট প্রশ্ন থাকে, তাহলে আমাকে জানাতে পারেন!
Riot.js-এ Event Delegation এবং Performance Optimization দুটি গুরুত্বপূর্ণ ধারণা, যেগুলি আপনার অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে এবং জটিল ইভেন্ট পরিচালনার সহজতা বৃদ্ধি করতে সাহায্য করে। চলুন, এই দুটি ধারণা কীভাবে Riot.js-এ কাজ করে তা দেখি।
১. Event Delegation (ইভেন্ট ডেলিগেশন)
ইভেন্ট ডেলিগেশন হল একটি প্যাটার্ন, যেখানে আপনি সরাসরি কোন DOM উপাদানে ইভেন্ট হ্যান্ডলার অ্যাটাচ না করে তার প্যারেন্ট বা একাধিক উপাদানে ইভেন্ট হ্যান্ডলার অ্যাটাচ করেন। এর মাধ্যমে, আপনি ইভেন্টের শুদ্ধতা এবং পারফরম্যান্স উন্নত করতে পারেন, কারণ আপনি কম্পোনেন্ট বা DOM উপাদানগুলোর উপর অতিরিক্ত ইভেন্ট হ্যান্ডলার আরোপ না করে একটি সাধারণ হ্যান্ডলার ব্যবহার করেন।
Riot.js-এ Event Delegation
Riot.js-এ, আপনি event delegation ব্যবহার করতে পারেন যদি আপনি একটি কম্পোনেন্টের ভিতরে অনেক উপাদান বা ডাইনামিক্যালি তৈরি হওয়া উপাদানগুলোর জন্য একযোগভাবে ইভেন্ট হ্যান্ডলিং করতে চান।
Riot.js এ ইভেন্ট ডেলিগেশনের সুবিধা নিতে, আপনি একটি প্যারেন্ট উপাদানে একটি ইভেন্ট হ্যান্ডলার যুক্ত করতে পারেন এবং event.target ব্যবহার করে শিশুসাবধান বিষয়গুলি চেক করতে পারেন। এর মাধ্যমে, কম্পোনেন্টের মধ্যে অনেকগুলি সাব-কম্পোনেন্টের জন্য একটি সাধারণ ইভেন্ট হ্যান্ডলার ব্যবহার করা সম্ভব।
উদাহরণ:
ধরা যাক, আমাদের একটি তালিকা আছে এবং প্রতিটি আইটেমের জন্য একটি ক্লিক ইভেন্ট হ্যান্ডলার দিতে হবে। পরিবর্তে, প্রতিটি আইটেমে আলাদা ইভেন্ট হ্যান্ডলার যোগ করার পরিবর্তে, আমরা একটি সাধারণ প্যারেন্ট উপাদান (যেমন ul) এ ইভেন্ট ডেলিগেশন ব্যবহার করতে পারি।
<!-- ListComponent.riot -->
<list-component>
<ul>
<li onclick={itemClicked}>Item 1</li>
<li onclick={itemClicked}>Item 2</li>
<li onclick={itemClicked}>Item 3</li>
</ul>
<script>
export default {
itemClicked(event) {
console.log(`Clicked item: ${event.target.innerText}`);
}
}
</script>
</list-component>
এখানে, প্রতিটি li-তে আলাদা onclick অ্যাট্রিবিউট দেওয়া হয়েছে। তবে, বড় অ্যাপ্লিকেশনে, আপনি একক প্যারেন্ট উপাদান (ul) এ ডেলিগেটেড ইভেন্ট হ্যান্ডলার ব্যবহার করতে পারেন, যা স্বয়ংক্রিয়ভাবে শিশু উপাদানগুলির উপর কাজ করবে।
<!-- ListComponent.riot (Event Delegation) -->
<list-component>
<ul onclick={itemClicked}>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
export default {
itemClicked(event) {
if (event.target.tagName === 'LI') {
console.log(`Clicked item: ${event.target.innerText}`);
}
}
}
</script>
</list-component>
এখানে, ul উপাদানে একটি সাধারণ onclick হ্যান্ডলার দেওয়া হয়েছে এবং event.target ব্যবহার করে নিশ্চিত করা হয়েছে যে কেবল li-তে ক্লিক করলে কাজ করবে।
২. Performance Optimization (পারফরম্যান্স অপটিমাইজেশন)
Riot.js সাধারণত খুবই দ্রুত, কিন্তু কিছু কৌশল এবং পদ্ধতি রয়েছে যা আপনি আরও পারফরম্যান্স উন্নত করতে ব্যবহার করতে পারেন।
১. কম্পোনেন্ট মাউন্ট এবং আনমাউন্টের সময় হ্যান্ডলিং:
কম্পোনেন্ট মাউন্ট এবং আনমাউন্টের সময় ফাংশনগুলিকে অপটিমাইজ করতে হবে। onMounted() এবং onUnmounted() লাইফসাইকেল মেথডগুলি ব্যবহার করে আপনি কম্পোনেন্টের স্টেট বা DOM অপারেশন নিয়ন্ত্রণ করতে পারেন। অতিরিক্ত DOM আপডেট থেকে বাঁচতে এই মেথডগুলোতে কোড রাখুন।
২. অপ্রয়োজনীয় রেন্ডারিং বন্ধ করুন:
Riot.js তে opts বা state পরিবর্তন হলে কম্পোনেন্ট রেন্ডার হয়, কিন্তু যদি রেন্ডারিং দরকার না থাকে, তবে আপনি রেন্ডারিং প্রতিরোধ করতে পারেন। উদাহরণস্বরূপ, যদি আপনি জানেন যে কোনো নির্দিষ্ট প্যারামিটার বা স্টেট পরিবর্তন না হলে কম্পোনেন্টের পুনরায় রেন্ডার করা প্রয়োজন নয়, তাহলে আপনি সেই পরিবর্তনগুলো প্রতিরোধ করতে পারেন।
৩. ডাটা বাইন্ডিং অপটিমাইজেশন:
Riot.js রিয়েকটিভ ডাটা বাইন্ডিং ব্যবহার করে UI আপডেট করে, তবে যদি আপনি খুব বড় ডাটা সেট নিয়ে কাজ করছেন, তখন কম্পোনেন্টের মধ্যে ডাটা বাইন্ডিংয়ের পরিবর্তনগুলি নিয়ন্ত্রণ করা প্রয়োজন। আপনি নির্দিষ্ট কিছু ডাটা উপাদানদের বাইন্ড করতে পারেন, এবং অপ্রয়োজনীয় বাইন্ডিং কমিয়ে আনার চেষ্টা করুন।
৪. ব্যাচ আপডেট ব্যবহার:
ব্যাচ আপডেট ব্যবহার করে আপনি একাধিক পরিবর্তনকে একসাথে ম্যানেজ করতে পারেন, যা DOM আপডেটের সংখ্যা কমিয়ে আনে। Riot.js-এ, একাধিক setState কলকে একসাথে জমা করে একটি একক রেন্ডার প্রক্রিয়ায় তা প্রক্রিয়া করা সম্ভব।
উদাহরণ:
this.update({
message: "Updated!",
title: "Hello"
});
এখানে, একাধিক স্টেট পরিবর্তন একটি একক রেন্ডারে করা হচ্ছে, যা পারফরম্যান্স অপটিমাইজেশন করতে সাহায্য করবে।
৫. ডিবাগিং এবং অপটিমাইজেশন টুলস ব্যবহার করুন:
Riot.js-এ ডিবাগিং এবং পারফরম্যান্স ট্র্যাকিংয়ের জন্য বিভিন্ন টুল রয়েছে। আপনি গুগল ক্রোমের ডেভেলপার টুলস ব্যবহার করে DOM এবং রেন্ডারিং পারফরম্যান্স বিশ্লেষণ করতে পারেন।
Event Delegation এবং Performance Optimization হল Riot.js অ্যাপ্লিকেশনে পারফরম্যান্স উন্নত করার এবং জটিল ইভেন্ট হ্যান্ডলিং সহজ করার দুটি গুরুত্বপূর্ণ কৌশল। ইভেন্ট ডেলিগেশন ব্যবহার করে আপনি একাধিক উপাদানের জন্য একটি সাধারণ হ্যান্ডলার ব্যবহার করতে পারেন, এবং পারফরম্যান্স অপটিমাইজেশন কৌশলগুলির মাধ্যমে আপনার অ্যাপ্লিকেশন আরও দ্রুত এবং কার্যকরী করতে পারেন।
Read more
