زنجیره سازی (Chaining)
در jQuery می توانی چند کار پشت سرهم روی یک المنت انجام بدهی. به این کار زنجیره سازی در jQuery می گوییم. مثل این است که به یک ربات بگویی «این متن را قرمز کن، بعد مخفی کن، بعد دوباره نشان بده».
زنجیره سازی در jQuery یعنی چه؟
تا اینجا معمولا هر دستور jQuery را در یک خط می نوشتی. مثلا یک بار رنگ را عوض می کردی، بعد در خط بعدی اسلاید می کردی.
اما با زنجیره سازی (Chaining) می توانی چند متد را پشت سرهم روی همان المنت اجرا کنی. این کار هم کد را کوتاه تر می کند، هم مرورگر فقط یک بار المنت را پیدا می کند.
نکته: مرورگر هر بار که $("#p1") می بیند، باید در صفحه دنبالش بگردد. با زنجیره سازی در jQuery فقط یک بار این جستجو انجام می شود.
مثال ساده از زنجیره سازی در jQuery
در منبع، یک مثال داریم که روی پاراگرافی با id برابر p1 کار می کند. رنگ پاراگراف قرمز می شود، بعد بالا اسلاید می شود، و در آخر دوباره پایین می آید.
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
اینجا فقط یک المنت انتخاب می شود؛ بقیه کارها زنجیره ای انجام می شوند. اول css رنگ را قرمز می کند. بعد slideUp آن را در دو ثانیه مخفی می کند. بعد slideDown دوباره در دو ثانیه نشانش می دهد.
هشدار: اگر همین کار را با چند خط جدا انجام دهی، کد شلوغ تر می شود و احتمال اشتباه بالا می رود.
قابل خواندن کردن کد زنجیره سازی
خط بالا کمی طولانی است. اما خبر خوب این است که jQuery روی فاصله و رفتن به خط بعد سخت گیر نیست.
می توانی همان زنجیره سازی در jQuery را با چند خط تمیزتر بنویسی. دقیقا همان کار انجام می شود، فقط خواندنش برای مغز انسان راحت تر است.
$("#p1")
.css("color", "red")
.slideUp(2000)
.slideDown(2000);
این دو قطعه کد کاملا یک کار انجام می دهند. jQuery فاصله های اضافه و رفتن به خط بعد را می اندازد دور و آن را مثل یک خط طولانی اجرا می کند.
نکته: همیشه سعی کن زنجیره هایت را مثل پله ها زیر هم بنویسی تا در پروژه های بزرگ گیج نشوی.
ارتباط زنجیره سازی با دیگر مباحث jQuery
زنجیره سازی در jQuery فقط برای افکت ها نیست. می توانی آن را با متدهای دستکاری DOM و افکت ها ترکیب کنی.
مثلا می توانی بعد از یک افکت، با یک تابع بازگشتی (Callback) پیغام نشان بدهی. یا قبل و بعد از انیمیشن، استایل ها را با انیمیشن (Animate) تغییر بدهی.
ایده کلی این است: یک المنت را بگیر، روی همان المنت چند متد پشت سرهم اجرا کن، و نتیجه را یک جا کنترل کن.
گام های تمرینی برای زنجیره سازی در jQuery
- یک پاراگراف با id برابر p1 در صفحه بساز.
- کدی بنویس که با کلیک روی دکمه، فقط رنگ متن p1 قرمز شود.
- حالا slideUp را بعد از css به همان خط اضافه کن.
- در مرحله بعد، slideDown را هم زنجیره کن تا متن برگردد.
- در پایان، کد را چند خطی بنویس تا خواناتر شود و تفاوت را ببینی.
جمع بندی سریع
- زنجیره سازی در jQuery یعنی اجرای چند متد پشت سرهم روی یک المنت.
- زنجیره ها کد را کوتاه تر می کنند و جستجوی المنت را کم می کنند.
- می توانی زنجیره ها را در چند خط بنویسی تا خواناتر شوند.
- همه افکت ها و بسیاری متدهای دیگر با زنجیره سازی بهتر می شوند.
- یک تمرین ساده روی p1 می تواند مفهوم را کامل در ذهن ات جا بیندازد.