انعطاف‌پذیر‌‌ باش ‌تا‌‌ محبوب‌تر شوی‌

هفته پیش درباره ابزار‌هایی که jQuery در اختیار طراحان وب قرار می‌دهد صحبت کردیم و در مورد مشکلاتی که در هنگام بارگذاری یک صفحه و استفاده همزمان از کد‌های جاوااسکریپت وجود داشت، توضیحاتی ارائه کردیم. به این نکته اشاره کردیم که بازدید کنندگان یک صفحه روی وب، در روش استفاده از window.onload تغییراتی مورد نظر را با کمی‌وقفه مشاهده می‌کنند؛ به عبارتی بین زمان بارگذاری صفحه و زمان انجام شدن تغییرات مورد نظر که توسط جاوا اسکریپت اعمال می‌شود، یک فاصله زمانی وجود خواهد داشت.
کد خبر: ۱۷۶۳۱۲

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

به عنوان مثال کدی که در مثال‌های پیشین و بخش‌های قبلی برای نمایش "راه راه" سطر‌های یک جدول استفاده می‌کردیم با استفاده از روش جدیدی که اکنون به آن اشاره کردیم به این نحو خواهد بود:
 }(document).ready(function()$
("table tr:nth-child(even)").$
addClass("even");
;({
در ابتدا تابع  ()$ که در بخش‌های قبل آن را معرفی کردیم، صفحه مورد نظر را تحت کنترل خود قرار می‌دهد و با استفاده از تابعready()  که کارش این است که صفحه را برای انجام عملیات مورد نیاز حاضر کند، کنترل کلی زمان بارگذاری صفحه را در دست می‌گیریم و سپس عمل تخصیص یک کلاس جدید به سطرهای یک در میان جدول مورد نظر را با استفاده از تابعی دیگر (که خودمان آن را ایجاد می‌کنیم) انجام می‌دهیم.

از این پس این روش را "ترکیب استاندارد" می‌نامیم و اگر بخواهیم این دستور را کوتاه تر کنیم می‌توانیم به این نحو به همان هدف قبلی برسیم:
}(function()$
("table tr:nth-child(even)").$
addClass("even");
;({
با مقایسه دو دستوری که ارائه شد می‌توانید به سادگی به انعطاف پذیری jQuery  پی ببرید، در این دستور با پاس دادن تابعی که خودمان آن را ایجاد کرده‌ایم به تابع اصلی ()$ در واقع این نکته را به مرورگر منتقل می‌کنیم که تا بارگذاری کامل عناصر DOM  صبر کند و سپس با کمک این عناصر کد‌های نوشته شده را اجرا کند. در این جا ذکر این نکته بسیار مهم است که مرورگر فقط منتظر بارگذاری عناصرDOM  می‌شود و دیگر در انتظار بارگذاری تصاویر و دیگر منابع موجود در صفحه نمی‌ماند.

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

نکته دیگری که باید در اینجا به آن اشاره کرد این است که در این بخش شما روشی دیگر را برای استفاده از تابع اصلی($())jQuery  که در بخش‌های قبلی آن را معرفی کردیم، فرا گرفتید و در بخش‌های بعدی نیز با روش‌های دیگر استفاده از این تابع آشنا خواهید شد.

پویا سلیمی‌

newsQrCode
ارسال نظرات در انتظار بررسی: ۰ انتشار یافته: ۰

نیازمندی ها