دستورات پشت سر هم (زنجیره ای) در جی کوئری

در جی کوئری، بسیاری از متدها پس از اجرا یک شیء جی کوئری را برمی گردانند. این شیء معمولا همان مجموعه عناصری است که در ابتدا انتخاب شده بود؛ بنابراین می توان بلافاصله متد دیگری را روی خروجی متد قبلی اجرا کرد. این الگو را زنجیره کردن متدها یا method chaining می نامند.

برای نمونه، انتخاب یک عنصر با $("#message") یک مجموعه جی کوئری ایجاد می کند. اگر متدی مانند addClass() همان مجموعه را برگرداند، می توانید متدی دیگر مانند fadeIn() را بعد از آن بنویسید. در این حالت، هر دو دستور روی عنصری اجرا می شوند که در ابتدای زنجیره انتخاب شده است.

فرض کنید می خواهید همه تگ های تگ <div> را که کلاس notLongForThisWorld دارند، با افکت محو شدن پنهان کنید. برای اجرای همین یک کار می توانید از دستور زیر استفاده کنید:

$("div.notLongForThisWorld").fadeOut();

در این مثال، بخش انتخابگر مشخص می کند کدام عناصر هدف قرار بگیرند و متد fadeOut() افکت محو شدن را اجرا می کند. این دستور به تنهایی یک زنجیره کوتاه است؛ برای زنجیره ای شدن چند عملیات، کافی است متد دیگری را به ادامه آن اضافه کنید.

پایه زنجیره این است که متد پیشین، شیء جی کوئری یا مجموعه عناصر را برای متد بعدی در دسترس بگذارد. بسیاری از متدهایی که برای تغییر ظاهر یا وضعیت عناصر به کار می روند، امکان ادامه زنجیره را فراهم می کنند. اما همه متدها چنین رفتاری ندارند؛ بعضی از آن ها به جای مجموعه، مقداری مانند رشته، عدد یا مقدار منطقی برمی گردانند.

برای مثال، پس از addClass() معمولا می توانید متد دیگری را اجرا کنید، چون هدف همچنان همان مجموعه عناصر است. در مقابل، متدی که مقدار یک ویژگی را برای خواندن برمی گرداند ممکن است ادامه زنجیره را به شکل مورد انتظار پشتیبانی نکند. پیش از افزودن متد بعدی، رفتار متد قبلی را در مستندات جی کوئری بررسی کنید.

مثال کاربردی: اگر می خواهید یک پیام را هم برجسته کنید و هم نمایش دهید، انتخابگر را یک بار بنویسید و سپس متدهای سازگار را پشت سر هم اجرا کنید. اگر دستور زنجیره در نقطه ای متوقف شد، احتمال دارد یکی از متدهای میانی به جای شیء جی کوئری، مقدار دیگری بازگردانده باشد.

در زنجیره متدها، دستورها از چپ به راست اجرا می شوند. بنابراین ترتیب آن ها می تواند نتیجه قابل مشاهده را تغییر دهد. اگر ابتدا عنصری را پنهان کنید و بعد بخواهید افکتی را روی آن اجرا کنید، باید مطمئن شوید که این ترتیب با هدف شما سازگار است.

برای مثال، می توانید ابتدا یک کلاس به عنصر اضافه کنید و سپس آن را با افکت نمایش دهید. در این حالت، کلاس پیش از نمایش روی عنصر قرار می گیرد. اگر همان متدها را جابه جا کنید، زمان اعمال کلاس نسبت به افکت عوض می شود و ممکن است نتیجه مورد نظر متفاوت باشد.

در یک صفحه واقعی، تصور کنید کاربر روی دکمه ای کلیک می کند تا پیام راهنما ظاهر شود. ترتیب درست می تواند شامل انتخاب پیام، افزودن کلاس ظاهری و سپس اجرای افکت نمایش باشد. با جدا کردن این مراحل در ذهن و بررسی نتیجه پس از هر متد، پیدا کردن اشکال ساده تر می شود.

یکی از فایده های مهم زنجیره کردن این است که می توانید یک مجموعه عنصر را انتخاب کنید و چند عملیات را روی همان مجموعه انجام دهید. اگر هر بار همان انتخابگر را از ابتدا بنویسید، کد طولانی تر می شود و احتمال اختلاف ناخواسته میان انتخابگرها بالا می رود.

فرض کنید چند عنصر با کلاس notice دارید و می خواهید به آن ها کلاس دیگری اضافه کنید و سپس پنهانشان کنید. زنجیره متدها این رابطه را روشن می کند: هر دو عملیات برای همان عناصری هستند که در ابتدا انتخاب شده اند. این روش به ویژه وقتی انتخابگر طولانی است، از تکرار بی مورد جلوگیری می کند.

مثال کاربردی: هنگام به روزرسانی پیام های فرم، یک بار عناصر هدف را انتخاب کنید و سپس تغییرات لازم را در همان زنجیره اعمال کنید. اگر لازم است همان مجموعه را در چند بخش مستقل به کار ببرید، متغیر جی کوئری می تواند خوانایی را بیشتر کند.

زنجیره کردن باعث کوتاه شدن کد می شود، اما کوتاه بودن همیشه به معنی خوانایی بیشتر نیست. اگر تعداد زیادی متد را بدون فاصله یا توضیح در یک خط قرار دهید، بررسی ترتیب و پیدا کردن خطا دشوار می شود. بهتر است هر متد را در خطی جداگانه بنویسید تا مسیر اجرای کد مشخص باشد.

برای نمونه، قالب چندخطی کمک می کند انتخاب عنصر و هر تغییر بعدی را جداگانه ببینید. این کار به ویژه هنگام همکاری با دیگر برنامه نویسان یا بازبینی کدهای قدیمی مفید است. در زنجیره های کوتاه، نوشتن همه متدها در یک خط هم ممکن است؛ انتخاب قالب باید با پیچیدگی دستور هماهنگ باشد.

مثال کاربردی: اگر روی یک دکمه کلاس اضافه می کنید، متن آن را تغییر می دهید و سپس افکت اجرا می کنید، هر مرحله را در خط جداگانه قرار دهید. در صورت نیاز به اصلاح رفتار، به جای بازخوانی یک خط فشرده، همان عملیاتی را پیدا می کنید که باید تغییر کند.

متدهای زنجیره ای به ترتیب اجرا می شوند، اما نتیجه نهایی به انتخابگر، وضعیت عنصر و رفتار هر متد بستگی دارد. اگر زنجیره کار نمی کند، ابتدا بررسی کنید که انتخابگر واقعا عنصر مورد نظر را پیدا می کند و سپس متدها را یکی یکی آزمایش کنید.

در زمان اشکال زدایی، می توانید زنجیره را موقتا به چند دستور جدا تبدیل کنید یا نتیجه انتخابگر را در ابزار توسعه مرورگر بررسی کنید. با این روش مشخص می شود مشکل از انتخاب عنصر است، از ترتیب متدها یا از متدی که قابلیت ادامه زنجیره ندارد.

مثال کاربردی: اگر عنصر مورد نظر محو نمی شود، ابتدا وجود کلاس آن را در صفحه بررسی کنید. سپس فقط fadeOut() را اجرا کنید و بعد متدهای دیگر را به زنجیره برگردانید. این روش از تغییر هم زمان چند بخش و سردرگمی هنگام یافتن خطا جلوگیری می کند.

در نمونه قبلی، متد fadeOut() عنصرها را محو می کرد. اگر بخواهیم پس از مخفی شدن هر تگ <div>، کلاس removed را نیز به آن اضافه کنیم، می توانیم متد addClass() را به انتهای دستور بیفزاییم:

$("div.notLongForThisWorld").fadeOut().addClass("removed");

در این دستور، جی کوئری ابتدا عنصرهای منطبق با انتخابگر را پیدا می کند و متد fadeOut() را روی آن ها اجرا می کند. سپس خروجی قابل زنجیره متد اول به متد addClass() می رسد و کلاس جدید به همان مجموعه عناصر افزوده می شود.

زنجیره را می توان با متدهای بیشتری ادامه داد، به شرط آنکه هر متد اجازه دهد متد بعدی روی خروجی آن اجرا شود. با این حال، بهتر است تنها عملیاتی را در یک زنجیره قرار دهید که از نظر هدف و ترتیب به هم مرتبط هستند. زنجیره بسیار طولانی، حتی اگر از نظر فنی درست باشد، ممکن است فهم و نگهداری کد را دشوار کند.

اشتباه رایج این است که تصور کنیم هر متدی در جی کوئری خروجی مشابهی دارد. بعضی متدها برای تنظیم مقدار به کار می روند و می توانند زنجیره را ادامه دهند، اما شکل استفاده از یک متد ممکن است نتیجه خواندنی برگرداند. اگر خروجی دیگر مجموعه جی کوئری نباشد، متد بعدی احتمالا روی آن قابل اجرا نیست.

برای جلوگیری از این مشکل، امضای متد و نوع خروجی آن را بررسی کنید. همچنین می توانید زنجیره را مرحله به مرحله بسازید و پس از افزودن هر متد، رفتار آن را در مرورگر آزمایش کنید. این کار از ترکیب متدهایی که هدف یا خروجی متفاوت دارند جلوگیری می کند.

تعداد زیاد متدها در یک زنجیره می تواند خوانایی را کاهش دهد. اگر هر مرحله کاری جداگانه انجام می دهد یا برای فهم آن به توضیح نیاز است، چند خط کردن دستور یا استفاده از متغیر می تواند انتخاب بهتری باشد. هدف، نوشتن کوتاه ترین کد ممکن نیست؛ هدف این است که رفتار کد به آسانی فهمیده شود.

همچنین در زنجیره های طولانی، پیدا کردن مرحله ای که رفتار نادرست دارد دشوارتر می شود. در چنین شرایطی، زنجیره را به بخش های کوچک تر تقسیم کنید و برای بخش هایی که معنای مستقلی دارند، نام مناسب در نظر بگیرید.

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

مثلا ممکن است بخواهید پس از محو شدن عنصر، کلاس مشخصی را اضافه کنید. در این حالت، بررسی کنید که متد بعدی در زمان مورد انتظار اجرا می شود یا لازم است عملیات را به پایان افکت وابسته کنید. این نکته در رابط هایی که چند افکت پشت سر هم دارند، اهمیت بیشتری پیدا می کند.

دستورات زنجیره ای در جی کوئری کمک می کنند چند عملیات مرتبط را روی یک مجموعه از عناصر اجرا کنید، بدون آنکه انتخابگر را برای هر مرحله دوباره بنویسید. این روش می تواند کد را خلاصه تر کند و رابطه میان تغییرات را روشن نگه دارد.

برای استفاده درست، خروجی متدها و ترتیب اجرای آن ها را بشناسید، زنجیره را بیش از اندازه طولانی نکنید و نتیجه را در مرورگر آزمایش کنید. اگر هر مرحله به سادگی قابل تشخیص باشد، زنجیره متدها به ابزار مفیدی برای نوشتن و نگهداری کد جی کوئری تبدیل می شود.