سوالی دارید؟

چنانچه سوالی دارید می‌توانید از قسمت پایین پرسیده تا پاسخ آن را بیابید!

درس هشتم : عملکرد صفحه آماده Document Ready Handler

jquery-3

هنگامی که ما از جاوا اسکریپت تفکیکی استفاده می کنیم و رفتار اشیا از ساختارشان جدا می باشد ، می بایست به طریقی از ایجاد اشیا اطمینان حاصل کنیم و سپس به رفتار آنها اجازه  ی اجرا دهیم . در مثالی که برای RadioGroup در دروس قبلی نوشتیم ، تمام تگ <body> می بایست load می شد تا رفتار RadioGroup قابل اعمال باشد .
به طور معمول از onload ، برای نمونه های window استفاده می شود که پس از load شدن کامل صفحه ، دستور ها قابل اجرا می باشند . بنابراین ساختار کلی آن کدی مانند زیر خواهد بود :

window.onload = function () {
	//do stuff here
	};

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

jQuery(document).ready(function() {
	$("div.notLongForThisWorld").hide();
	});

ابتدا صفحه مورد نظر را به تابع jQuery ارسال کرده ایم و سپس هر زمان که آن صفحه آماده شد ( ready() ) تابع ارسال شده به آن اجرا می شود . کد مثال قبل را می توان به شکل ساده تر و مختصری نیز نوشت :

jQuery(function() {
	$("div.notLongForThisWorld").hide();
	});

با ارسال تابع به این شکل ، مرورگر را ملزم می کنیم که پس از load شدن عناصر صفحه ، آن را اجرا کند . مزیت دیگر تکنیک این است که می توانیم چندین مرتبه و برای چندین تابع آن را به این شکل اجرا کنیم و مرور گر آن ها را به همان ترتیبی که ما نوشته ایم ، اجرا می کند .در مقابل ، تکنیک onload تنها اجازه ی اجرای یک تابع را می دهد .
این هم یکی دیگر از کارکرد های دیگر تابع $() می باشد .

ارسال یک نظر

آدرس ایمیل شما منتشر نخواهد شد. گزینه‌های ضروری با علامت مقابل نشانه‌گذاری شده‌اند *

شما می‌توانید از این تگ‌های HTML استفاده نمائید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>