تکنیک زنجیر کردن متدها یا chaining در جی کوئری

با سلام و خسته نباشید خدمت شما علاقه مندان به آموزش های برنامه نویسی در خدمت شما هستم با قسمت جدید آموزش جی کوئری از سری آموزش های وبسایت ilikephp
در جلسه قبل با تابع callback در جی کوئری آشنا شدید. در این آموزش با آخرین مبحث از افکت ها در جی کوئری در خدمت شما هستم. در این آموزش با تکنیکی در جی کوئری آشنا میشوید که به زنجیر کردن متدها برای یک عنصر معروف است.

مفهوم زنجیرکردن یا chaining

در جی کوئری تکنیکی به نام chaining یا زنجیره ای یا زنجیروار وجود دارد که زیاد از این تکنیک استفاده می شود. اما معنی زنجیروار یا زنجیرکردن چیست ؟

زنجیز مجموعه ای از قطعات فلزی انعطاف پذیر و متصل به هم می باشد که برای اتصال به اشیاء و کشیدن آن ها مورد استفاده قرار می گیرد. به شکل زیر دقت کنید.

chaining
Chaining یا زنجیرکردن متدها در جی کوئری

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

  $("p").hide();  $("p").show();  $("p").slideUp();

همانطور که مشخص است ابتدا عنصر p در صفحه توسط متد hide مخفی می شود و سپس همان عنصر p توسط متد show نمایان شده و مجدد توسط متد slideUp به صورت کشویی و به سمت بالا  پنهان می شود.
توسط تکنیک زنجیرکردن می توانید کدهای بالا را به صورت زیر بنویسید:

  $("p").hide().show().slideUp();

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

chaining-in-jquery

مزایای استفاده از تکینک chaining یا زنجیرکردن در جی کوئری

  • سبب کوتاه تر شدن کدها می شود
  • توسعه پذیری و انعطاف پذیری بیشتری دارد
  • سرعت بیشتری نسبت به روش های دیگر دارد

به این نکته نیز توجه داشته باشید که تنها توابع و متدها از این تکنیک استفاده نمی کنند. بلکه رویدادها نیز از تکنیک chaining استفاده می کنند:

  $("p").click(function() {          alert("click!");      }).mouseover(function() {          alert("mouse over!")      }).mouseout(function() {          alert("mouse out!")  });

 

دیدگاهتان را بنویسید