jQuery হলো জাভাস্ক্রিপ্টের একটি লাইব্রেরী। এটি আমাদের JavaScript কোডকে সহজ এবং সংক্ষিপ্ত করে দেয়।
কিন্তু আমরা অনেক সময় কমন কিছু ভুল করে থাকি। যা পারফরম্যান্স নষ্ট করতে পারে। কোডকে অপ্রয়োজনীয়ভাবে জটিল করে তোলে।
তাই আজকে প্র্যাকটিসের অভিজ্ঞতা, গুগল এবং এআই এর হেল্প নিয়ে ৫টি কমন ভুল ও তাদের সমাধান একসাথে সাজিয়েছি। চলুন সেগুলো জেনে নিই।
১. $(document).ready() ব্যবহার না করা
অনেক সময় আমরা সরাসরি jQuery কোড লিখে ফেলি। কিন্তু DOM পুরোপুরি লোড হওয়ার আগেই যদি স্ক্রিপ্ট রান হয়, তাহলে Element সিলেক্টর কাজ করবে না! তাই,
ভুল কোড:
$(“myButton”).click(function() {
alert(“Clicked!”);
});
এতে সমস্যা হলো, যদি myButton লোড হওয়ার আগেই কোড রান হয়, তাহলে এটি কাজ করবে না।
সঠিক সমাধান:
$(document).ready(function() {
$(“myButton”).click(function() {
alert(“Clicked!”);
});
});
এখন কোডটি DOM পুরোপুরি লোড হওয়ার পর কাজ করবে! তাই আর এরর আসবে না।
২. বারবার DOM Element সিলেক্ট করা
jQuery সিলেক্টর $() প্রতিবার DOM স্ক্যান করে, যা পারফরম্যান্স স্লো করে দিতে পারে।
ভুল কোড:
$(“myDiv”).css(“color”, “red”);
$(“myDiv”).css(“font-size”, “20px”);
$(“myDiv”).css(“background”, “yellow”);
প্রতিবার $(“myDiv”) লিখলে DOM স্ক্যান করা হচ্ছে, যা অপ্রয়োজনীয়। এতে পেজের লোডিং টাইম বেড়ে যাবে। যা এসইও এর জন্য খুবই খারাপ।
সঠিক সমাধান:
let myDiv = $(“myDiv”); // একবার সিলেক্ট করা হলো
myDiv.css({
“color”: “red”,
“font-size”: “20px”,
“background”: “yellow”
});
এতে একবার DOM স্ক্যান হয়, পারফরম্যান্স বুস্ট হয়! দারুন না?
৩. .each() ব্যবহার না করে সরাসরি লুপ চালানো
অনেকে .each() ব্যবহার না করে ম্যানুয়ালি লুপ চালানোর চেষ্টা করি। কিন্তু এটি jQuery-এর সুবিধাকে কমিয়ে দেয়। যেই ফাংশনালিটির জন্য ব্যবহার করছি তা পাওয়া যায় না।
ভুল কোড:
let items = $(“.list-item”);
for (let i = 0; i < items.length; i++) {
$(items[i]).css(“color”, “blue”);
}
এখানে items[i] DOM নোড রিটার্ন করে, তাই প্রতিবার $() দিয়ে র্যাপ করতে হচ্ছে।
সঠিক সমাধান:
$(“.list-item”).each(function() {
$(this).css(“color”, “blue”);
});
এতে অপটিমাইজড কোড পাওয়া যাবে! এতে ডিবাগিং করতে ও মেইনটেনেন্স খুব সহজে করতে পারবো।
৪. Inline CSS পরিবর্তন করা (class টুগল না করা)
অনেকে সরাসরি .css() দিয়ে স্টাইল পরিবর্তন করে ফেলি। যা কোডকে ম্যানেজ করা কঠিন করে তোলে।
ভুল কোড:
$(“myButton”).click(function() {
$(“myDiv”).css(“background”, “green”);
});
এটি প্রতিবার নতুন CSS লিখতে বাধ্য করে। কোডকে ক্লিন রাখার জন্য এটি একটি বড় বাঁধা।
সঠিক সমাধান:
$(“myButton”).click(function() {
$(“myDiv”).toggleClass(“active”);
});
এবং CSS ফাইলে লিখবো—
css
.active {
background: green;
}
এতে CSS ও JavaScript আলাদা থাকবে, কোড ক্লিন হবে! কোড ম্যানেজ করা সহজ হবে।
৫. .unbind() ব্যবহার করা (সঠিকভাবে Event Remove না করা)
অনেক ডেভেলপার unbind() ব্যবহার করে ইভেন্ট রিমুভ করেন। এটি প্রপার ও অপটিমাইজড পদ্ধতি নয়।
ভুল কোড:
$(“myButton”).click(function() {
$(“myDiv”).text(“Clicked!”).unbind(“click”);
});
এতে শুধুমাত্র click ইভেন্ট রিমুভ হবে, কিন্তু নতুন ইভেন্ট অ্যাড করা কঠিন হবে।
সঠিক সমাধান:
$(“myButton”).click(function() {
$(“myDiv”).text(“Clicked!”).off(“click”);
});
off() ব্যবহার করলে ইভেন্ট আরও ভালোভাবে ম্যানেজ করা যায়!
সুতরাং,
আমরা jQuery এর ৫টি কমন মিসটেক সমন্ধে জানলাম। সেই সাথে সমাধানও জেনে নিলাম। আশাকরি, এগুলো মেনে চলে ক্লিন কোড লিখতে পারবো। তবুও যদি আরেকবার একনজরে সবগুলো দেখতে চাই তাহলে,
→ document.ready() ব্যবহার করা
→ একবার DOM সিলেক্ট করে ভেরিয়েবলে রাখা
→ .each() ব্যবহার করা
→ CSS পরিবর্তনের জন্য Class টগল করা
→ unbind() এর বদলে off() ব্যবহার করা
আপনি প্র্যাকটিসের সময় কোন কোন মিসটেক করেছেন? চলুন কমেন্টে আলোচনা করি ও একে অপরের কাছ থেকে শিখি।