بهترین شیوه‌های jQuery

چرا بهترین شیوه‌ها مهم است؟

کد jQuery می‌تواند هم بسیار تمیز و هم بسیار کند و شلوغ باشد. این درس مجموعه‌ای از قوانین طلایی است که کد شما را سریع‌تر، خواناتر و قابل‌نگهداری‌تر می‌کند.

۱. همیشه از document ready استفاده کنید

// ✅ درست: کد بعد از آماده شدن DOM اجرا می‌شود
$(function() {
    // کدها
});

// ❌ غلط: ممکن است عناصر هنوز ساخته نشده باشند
$("p").hide();

۲. سلکتورها را بهینه کنید

سرعت سلکتورها متفاوت است — از سریع‌تر به کندتر:

// ✅ بهتر: ترکیب id برای محدود کردن جست‌وجو
$("#menu .item")

// ❌ بد: جست‌وجوی کل صفحه
$(".item")

۳. از متغیر برای ذخیره سلکتورهای تکراری استفاده کنید

// ❌ بد: سه بار جست‌وجوی DOM!
$("#message").text("سلام");
$("#message").css("color", "red");
$("#message").fadeIn();

// ✅ خوب: یک بار جست‌وجو + زنجیره‌سازی
var $msg = $("#message");
$msg.text("سلام").css("color", "red").fadeIn();

۴. از on() به‌جای متدهای کوتاه استفاده کنید

// ✅ منعطف‌تر و لازم برای عناصر داینامیک
$("#btn").on("click", handler);

// برای عناصری که بعداً اضافه می‌شوند
$("#list").on("click", "li", handler);  // تفویض رویداد

۵. از CDN استفاده کنید

CDN سرعت بارگذاری را بهبود می‌دهد و احتمال کش شدن فایل را بالا می‌برد (جزئیات در درس نصب).

۶. رویدادها را با تفویض متصل کنید

اگر عناصر داینامیک دارید، رویداد را به والد ثابت وصل کنید:

// ✅ حتی liهای آینده هم کلیک را می‌گیرند
$("#todoList").on("click", ".item", function() { ... });

۷. انیمیشن‌ها را با stop() ایمن کنید

// جلوگیری از انباشته شدن انیمیشن با کلیک‌های سریع
$("#panel").stop().slideToggle();

۸. DOM را دسته‌ای تغییر دهید

// ❌ بد: ۱۰۰ بار دستکاری DOM
$.each(items, function(i, item) {
    $("#list").append("<li>" + item + "</li>");  // هر بار رندر!
});

// ✅ خوب: ساخت رشته و یک بار درج
var html = "";
$.each(items, function(i, item) {
    html += "<li>" + item + "</li>";
});
$("#list").html(html);

۹. امنیت: از text() برای ورودی کاربر استفاده کنید

// ✅ امن: text تگ‌ها را خنثی می‌کند
$("#output").text(userInput);

// ❌ خطرناک: html امکان تزریق کد می‌دهد
$("#output").html(userInput);  // حمله XSS!

۱۰. کد را در تابع بگذارید و آلودگی سراسری نکنید

// ✅ متغیرها داخل تابع محلی می‌مانند
$(function() {
    var count = 0;  // محلی، نه سراسری
    ...
});

چک‌لیست نهایی

• ☑️ کد داخل document ready است
• ☑️ سلکتورها بهینه و کش شده‌اند
• ☑️ از on() و تفویض رویداد استفاده می‌شود
• ☑️ انیمیشن‌ها stop() دارند
• ☑️ ورودی کاربر با text() نمایش داده می‌شود
• ☑️ دستکاری DOM دسته‌ای است