آموزش مقدماتی jQuery – بخش سوم: انتظار برای بارگذاری صفحه و توابع ناشناس

جی کوئری مسلماً یک مهارت ضروری برای توسعه‌دهندگان وب مدرن محسوب می‌شود. در این سلسله آموزش‌های فشرده تلاش داریم تا شما را با روش استفاده از آن در پروژه‌های وب آشنا کنیم. در بخش نخست این نوشته به مبانی مقدماتی این زبان و شیوه استفاده از سلکتورها پرداختیم. در بخش دوم متدهای دست‌کاری DOM را بررسی کردیم.

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

بارگذاری با تأخیر: چرا و چگونه؟

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

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

راه‌حل این است که اسکریپت‌ها را درون چیزی قرار دهید که document ready event یعنی رویداد حاضر بودن سند نامیده می‌شود. این کار باعث می‌شود که کد درون این تابع تا زمانی که DOM به طور کامل بارگذاری نشده است، فعال نشود. استفاده از آن آسان است:

$(document).ready(function(){
//your code to delay goes here
});

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

تابع‌های ناشناس (بی‌نام)

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

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

function doStuffOnPageLoad(){
console.log("doing stuff!");
}
$(document).ready(doStuffOnPageLoad);

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

$(document).ready(function(){
console.log("doing stuff");
});

مزیت‌ها

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

• تعداد صحیح پرانتزهای باز – در این مورد تورفتگی کد کمک می‌کند.
• توجه به پرانتزها و آکولادها
• بسته شدن دستورها با علامت ویرگول-نقطه (اما این مسئله پس از پرانتز بسته ضرورتی ندارد)

استفاده از یک ویرایشگر کد مانند Sublime Text 2 می‌تواند کمک زیادی در این خصوص بکند، زیرا در این ویرایشگر، پرانتزهای باز و بسته‌ی مربوط به هم مشخص می‌شوند و تورفتگی کد به طور خودکار برای شما انجام می‌گیرد. در هر صورت استفاده از یک ویرایشگر کد اختصاصی، امری ضروری است.

سخن پایانی

این راهنما در اینجا به پایان می‌رسد؛ اما شما باید این عادت را در خود ایجاد کنید که دست‌کاری برخی اجزای DOM را درون تابع ناشناس document ready event قرار دهید. در بخش بعدی این راهنما نگاهی خواهیم داشت به رویدادها و این که چطور می‌توانیم از آن‌ها برای ایجاد تعامل‌پذیری در صفحه بهره بگیریم. برای مثال وقتی یک دکمه کلیک می‌شود، جی کوئری چه باید بکند؟ هر گونه نظر یا پیشنهاد خود را می‌توانید در بخش نظرات در ادامه مطرح بفرمایید.

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این نوشته مورد توجه شما قرار گرفته است، پیشنهاد می‌کنیم موارد زیر را نیز ملاحظه کنید:

• آموزش کاربردی برنامه نویسی وب با جی کوئری
• ۱۰ کتابخانه و فریم‌ورک جاوا اسکریپت که باید آنها را بشناسید
• مجموعه آموزش‌های طراحی و برنامه نویسی وب
• آموزش پلاگین های کاربردی جی کوئری (jQuery)
• آموزش کاربردی HTML5 – CSS3 – jQuery در طراحی وب
• مجموعه آموزش های پروژه محور برنامه نویسی
• آموزش طراحی رابط کاربری وبسایت با فریمورک jQuery UI

==