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

هنگامی که ما از جاوا اسکریپت تفکیکی استفاده می کنیم و رفتار اشیا از ساختارشان جدا می باشد ، می بایست به طریقی از ایجاد اشیا اطمینان حاصل کنیم و سپس به رفتار آنها اجازه  ی اجرا دهیم . در مثالی که برای 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 تنها اجازه ی اجرای یک تابع را می دهد .
این هم یکی دیگر از کارکرد های دیگر تابع $() می باشد .

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

(434 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

فکر شما چیست؟

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

حاصل جمع اعداد را وارد کنید : *