آموزش جی کوئری – Chaining در جی کوئری

در بخش قبلی انیمیشن ها در jQuery را بررسی کردیم. در این قسمت از سری آموزش جی کوئری, به تکنیک زنجیر کردن متدها یا chaining در جی کوئری می پردازیم.

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

jQuery یک ویژگی قوی دیگر به نام زنجیر کردن متدها یا chaining را ارایه داده است که به ما اجازه می دهد چندین عملیات را روی مجموعه ای از عناصر, داخل یک خط کد تعریف و اجرا کنیم.

این امکان وجود دارد چرا که بیشتر متدهای جی کوئری یک آبجکت jQuery را برگشت (return) می دهند که می توانید برای صدا زدن متد دیگر استفاده کنید.

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});
    });
});  
</script>

$(document).ready(function(){

$("button").click(function(){

$("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});

});

</script>

در مثال بالا از chaining در جی کوئری برای سه متد animate() استفاده کردیم. زمانی که کاربر روی دکمه کلیک کند, عرض <p> را به ۱۰۰٪ گسترش می دهد. همینکه width تغییر کرد, انیمیشن روی font-size شروع می کند و بعد از آن border شروع می شود.

نکته : تکنیک chaining در جی کوئری نه تنها به شما کمک می کند که کدهای jQuery خود را مختصر نگه دارید, بلکه سرعت و عملکرد اسکریپت شما را در هنگام اجرای مرورگر افزایش می دهد چرا که دیگر مرورگر نیاز ندارد چندین بار المان های یکسان را برای انجام کاری مشخص پیدا کند.

همچنین می توانید یک خط کد را به چندین خط بشکنید تا قابلیت خواندن آن بیشتر شود. برای مثال, متدهای پشت سر هم در مثال بالا را بصورت زیر می توانید بنویسید.

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p")
            .animate({width: "100%"})
            .animate({fontSize: "46px"})
            .animate({borderWidth: 30});
    });
});
</script>

$(document).ready(function(){

$("button").click(function(){

$("p")

.animate({width: "100%"})

.animate({fontSize: "46px"})

.animate({borderWidth: 30});

});

</script>

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

در حالی که متدهای getter مقدار درخواستی را برگشت می دهند بنابراین نمی توانید در ادامه آنها متدهایی را صدا بزنید.

یک مثال معمول از این سناریو متد html() است که اگر هیچ پارامتری را پاس ندید, محتوای HTML عنصر انتخابی را به جای یک آبجکت, برگشت می دهد.

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        // This will work
        $("h1").html("Hello World!").addClass("test");
        
        // This will NOT work
        $("p").html().addClass("test");
    });
});
</script>

$(document).ready(function(){

$("button").click(function(){

// This will work

$("h1").html("Hello World!").addClass("test");

// This will NOT work

$("p").html().addClass("test");

});

</script>

امیدوارم در این بخش آموزش جی کوئری, از تکنیک Chaining در جی کوئری نهایت استفاده را برده باشید.

در بخش بعدی با تابع بازگشتی در جی کوئری, آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

لغو پاسخ

reza ۲۱ آبان ۱۳۹۹

سلام
من یه سوال داشتم ببخشید اینجا مطرح می کنم فوری هست.
من یه تابع دارم که با ایجکس یه سری داده رو می گیره. و توی متغییر ذخیره میکنه. این تابع در document.ready اجرا میشه و بعد از اون تابع دیگه ای دارم که میاد بر اساس اون اطلاعات که در متغیر ذخیره شده یک جدول رو میسازه که اسم این تابع رو هم بعد از تابع قبلی در همین document,ready آوردم. اما مشکل اینه که زمانی که تابع دوم اجرا میشه اطلاعات هنوز کامل نیست و undifind میشه. درواقع هنوز کار تابع اول اجرا نشده دومی اجرا میشه و جدول رو بر اساس هیچی می نویسه!
برای حل این مشکل میشه تابع دوم رو در آخر تابع اول فراخونی کنم اما میخوام بدونم راهی هست که زمانی که کار تابع اول تموم شد تابع دوم اجرا بشه؟

پاسخ

حسن شفیعی ۲۱ آبان ۱۳۹۹

سلام.
بهترین کار این هست که تابعی که مقادیر را بازگشت میده بصورت async تعریف کنید یعنی:
async fucntion getData(){}
و بعد به اینصورت داده را داخل متغییر ذخیره کنید
var data = await getData();

همچنین میتونید از متد .then هم استفاده کنید
یا اینکه تا الان داخل success: ایجکس تست کردید؟

این ها راهکارهایی هستند که میتونید پیاده کنید
موفق باشید.

پاسخ