আগের পোস্টে jQuery-এর ৫টি কমন মিসটেক সমন্ধে জেনেছি। এখন জানবো jQuery দিয়ে কোড করার Best Practices. জানবো কিভাবে প্রো কোডাররা কোড করে, কিভাবে প্রফেশনাল ছাপ রাখা যায় ইত্যাদি।
আমরা জানি জেকুয়েরী JavaScript কোডকে সহজ এবং সংক্ষিপ্ত করে তোলে। কিন্তু সঠিক নিয়ম না জানলে কোড ধীরগতির ও এলোমেলো হয়ে যেতে পারে! পাগলের মতো এলোমেলো চুল, জামা-কাপড় নিয়ে মানুষের মাঝে যাওয়া যায় না। তো কি ভাবছেন এলোমেলো কোড নিয়ে যাওয়া যাবে?
মোটেও না। তাই আজকে জানবো jQuery-এর বেস্ট প্র্যাকটিসগুলো। যেগুলো ফলো করলে আমাদের কোড হবে ফাস্ট, ক্লিন ও পারফরম্যান্স অপটিমাইজড!
১. $(document).ready() সংক্ষেপে লেখা
সাধারণত আমরা নিচের মতো $(document).ready() লিখে থাকি,
$(document).ready(function() {
console.log("Document is ready!");
});
কিন্তু এটি আরও সংক্ষেপে লেখা যায়,
$(function() {
console.log("Document is ready!");
});
এটি ছোট ও ক্লিন কোডের জন্য বেস্ট!
২. বারবার DOM সিলেক্ট না করা (Performance Boost!)
jQuery এর $() সিলেক্টর DOM স্ক্যান করে, যা বারবার করলে ওয়েবসাইট স্লো হতে পারে।
ভুল কোড: (প্রতিবার DOM স্ক্যান করা হচ্ছে)
$("myDiv").css("color", "red");
$("myDiv").css("font-size", "20px");
$("myDiv").css("background", "yellow");
সঠিক কোড: (একবার DOM সিলেক্ট করে ভেরিয়েবলে রাখা)
let myDiv = $("myDiv");
myDiv.css({
"color": "red",
"font-size": "20px",
"background": "yellow"
});
এতে একবারই DOM স্ক্যান হবে, পারফরম্যান্স বুস্ট হবে! এটি আমরা আগের পোস্টেও দেখেছিলাম। আবার মনে করিয়ে দিলাম আরকি।
৩. CSS পরিবর্তনের জন্য .css() নয়, .addClass() ব্যবহার করতে হবে
অনেকে সরাসরি .css() দিয়ে স্টাইল পরিবর্তন করেন, যা কোড ম্যানেজ করা কঠিন করে তোলে।
ভুল কোড:
$("myButton").click(function() {
$("myDiv").css("background", "green");
});
সঠিক কোড:
$("myButton").click(function() {
$("myDiv").toggleClass("active");
});
এবং CSS ফাইলে লিখবো,
.active {
background: green;
}
এতে CSS ও JavaScript আলাদা থাকবে, কোড ক্লিন হবে! ডিবাগ করাও সহজ হবে।
৪. Event Delegation ব্যবহার করা (ডাইনামিক এলিমেন্টের জন্য দরকারি!)
অনেকে .click() বা .on() ব্যবহার করেন, কিন্তু ডাইনামিকভাবে নতুন এলিমেন্ট তৈরি হলে ইভেন্ট কাজ করে না।
ভুল কোড:
$(".item").click(function() {
alert("Clicked!");
});
যদি .item ডাইনামিকভাবে AJAX দিয়ে লোড হয়, তাহলে এটি কাজ করবে না!
সঠিক কোড: (Event Delegation ব্যবহার করা)
$(document).on("click", ".item", function() {
alert("Clicked!");
});
এখন নতুন যোগ হওয়া .item এলিমেন্টেও ইভেন্ট কাজ করবে! তাই AJAX এর জন্য এখানে ইফেক্ট পড়বে না।
৫. Inline HTML পরিবর্তন না করে .text() বা .html() ব্যবহার করা
অনেকে .innerHTML বা .append() ব্যবহার করে, যা মাঝে মাঝে ঝামেলা তৈরি করে।
ভুল কোড:
$("myDiv").html("<p>New Content</p>");
এটি কিন্তু সিকিউরড না। কারন, কোথাও একটু উল্টাপাল্টা হলে কোড কাজ করবে না। যেহেতু জাভাস্ক্রিপ্টে html কোড করা হয়েছে।
সঠিক কোড:
$("myDiv").text("New Content");
.text() ব্যবহার করলে HTML Injection রিস্ক কমে যায়! এইচটিএমল ইনজেকশন নিয়ে একটি দারুন ঘটনা আছে। কি বলবো? শুনবেন?
আচ্ছা বলবো। তবে এই পোস্টে না। নেক্সট পোস্টে বলবো, গুগল সার্চ করতে করতে কিভাবে গুগলে ইন্টারভিউ এর ডাক পেয়েছিলেন একজন বাংলাদেশী ভাই। এবং ইন্টারভিউ ক্র্যাক করে গুগলে সফটওয়্যার ইঞ্জিনিয়ার হিসেবে জয়েনও করেন কয়েকবছর আগে।
আচ্ছা, তাহলে নেক্সট পোস্টের জন্য অপেক্ষা করুন। আবার মূল প্রসঙ্গে ফিরে যাই।
৬. .each() ব্যবহার করতে হবে লুপের জন্য
jQuery-তে .each() লুপ খুবই দরকারি।
ভুল কোড:
let items = $(".list-item");
for (let i = 0; i < items.length; i++) {
$(items[i]).css("color", "blue");
}
এখানে প্রতিবার $() দিয়ে DOM সিলেক্ট করা হচ্ছে, যা বেশ স্লো প্রসেস।
সঠিক কোড:
$(".list-item").each(function() {
$(this).css("color", "blue");
});
এতে কোড ক্লিন ও পারফরম্যান্স ভালো হবে! অনেক সহজ। তাই না?
৭. jQuery Plugin ব্যবহার করা যায়
jQuery প্লাগিন ব্যবহার করলে আমাদের কাজ দ্রুত ও সহজ হয়ে যাবে। এখন নিশ্চয় প্রশ্ন করবেন যে, কোন প্লাগিনগুলো ব্যবহার করবো? চলুন সেগুলো দেখি।
কিছু দরকারি প্লাগিন:
→ Slick.js – সুন্দর কারোসেল স্লাইডার
→ DataTables.js – টেবিলকে সার্চেবল ও ফিল্টারেবল করা
→ Waypoints.js – স্ক্রল করলে এনিমেশন চালানো
প্লাগিন ব্যবহার করলে সময় বাঁচবে ও কোড ক্লিন থাকবে। যেই কাজের জন্য প্লাগিন আছে সেটার জন্য নতুন করে শত শত লাইন কোড লিখবেন না। সময়ের অপচয় হবে। তবে আমরা এখন শেখার স্টেজে আছি। এখন বিভিন্ন প্লাগিন বানানোর চেষ্টা করতে পারি।
মোটামোটি এগুলো হলো jQuery-এর বেস্ট প্র্যাকটিস। যা আমাদের কোডকে ক্লিন, পারফরম্যান্স অপটিমাইজড ও মেইনটেনেবল করবে!
যদি সংক্ষেপে আরেকবার দেখি,
→ সংক্ষেপে $(document).ready() লেখা
→ একবার DOM সিলেক্ট করে ভেরিয়েবলে রাখা
→ Inline CSS পরিবর্তন না করে .addClass() ব্যবহার করা
→ Event Delegation ব্যবহার করা
→ .text() ও .html() এর পার্থক্য বোঝা
→ .each() ব্যবহার করা
→ jQuery Plugin ব্যবহার করা
আপনার কি আরও কোনো বেস্ট প্র্যাকটিস জানা আছে? প্লীজ, কমেন্টে শেয়ার করুন। আমরাও জানতে ও শিখতে পারবো।