۱۵ نکته و ترفند جی کوئری – بخش دوم
15 نکته و ترفند جی کوئری - بخش دوم : در این مقاله، دو مورد از ترفندهای جی کوئری را بررسی می کنیم. نوشتن سلکتور ساده و آبجکت های جی کوئری.

با سلام . در مقاله قبل، با اولین ترفند جی کوئری برای استفاده بهینه از آن یعنی استفاده از آخرین نسخه جی کوئری آشنا شدیم.در این مقاله، می خواهیم دو مورد دیگر از این ترفندها و نکات را بررسی کنیم. 

۲- ساده نویسی سلکتورهای جی کوئری (Simple Selectors):

سلکتور جی کوئری

از ابتدای پیدایش اینترنت و وب سایت، وقتی می خواستیم المانی را از صفحه وب انتخاب کنیم، باید توسط جاوااسکریپت و بصورت: getElementById() و getElementByClassName() و getElementByTagName() اینکار را انجام می دادیم. اما پس از پیدایش جی کوئری، می توان از سلکتورهای جی کوئری استفاده کرد. تمام مرورگرها نیز از این سلکتورها پشتیبانی می کنند و جای هیچ نگرانی نیست!

 

لطفا سلکتورهای زیر را در نظر بگیرید:

 
$('li[data-selected="true"] a')   // Fancy, but slow
$('li.selected a')  // Better
$('#elem')  // Best

همانطور که مشاهده می کنید، دستور اول، زیباست اما سرعتش کم می باشد. دستور دوم از اولی بهتر است و اما دستور آخر از همه آنها بهتر و سریع تر می باشد. بنابراین اگر سلکتور را با آیدی (ID) تعریف کنیم، سرعت بیشتری نسبت به سایر سلکتورها خواهد داشت. اگر می خواهید المانی را با نام کلاسش انتخاب کنید، باید تگ آن المان را قید نمائید. مانند دستور دوم از مثال فوق (li.selected) در صورتی که سلکتورها را بصورت بهینه بنویسیم، مطمئنا در مرورگرهای قدیمی تر و دستگاه های موبایل، تاثیرش را خواهیم دید و پردازش کدهای جی کوئری، سرعت بیشتری خواهد داشت.

انتخاب (select) المان ها در کدهای جاوااسکریپت و یا جی کوئری، کندترین و زمان بر ترین بخش از اجرای جاوااسکریپت می باشد. پس با نوشتن کدهای بهینه برای انتخاب المان های موردنظرمان، تا حد زیادی می توانیم سرعت اجرای کدهای جاوااسکریپت را افزایش دهیم. یکی دیگر از روش های تسریع اجرای کدهای جی کوئری، ریختن المان انتخاب شده (Selected Element) در یک متغیر می باشد. از این پس، هر جا که نیاز به استفاده مجدد از آن المان باشد، متغیر را استفاده می کنیم و نه سلکتور. به مثال زیر دقت کنید:

 
var buttons = $('#navigation a.button');
// Some prefer prefixing their jQuery variables with $:
var $buttons = $('#navigation a.button');

مورد دیگری که ارزش مطرح شدن دارد، اینست که جی کوئری از سلکتورهای جانبی زیادی پشتیبانی می کند. مانند :visible و :hidden و :animated و… به مثال زیر نگاه کنید:

 
$('a.button:animated');   // Does not use querySelectorAll()
$('a.button').filter(':animated');  // Uses it

نتیجه هر دوی این کدها یکسان می باشد اما سرعت اجرای دومی بیشتر خواهد بود. بنابراین سعی کنید ابتدا المان موردنظر را انتخاب کنید و سپس توسط متد فیلتر (filter) سکتورهای جانبی را روی آن اعمال کنید.

 

۳- آبجکت های جی کوئری بعنوان آرایه (jQuery Objects as Array):

آبجکت جی کوئری

نتیجه اجرای یک سلکتور، یک آبجکت (شی) جی کوئری می باشد. اما خود جی کوئری این آبجکت بازگشتی را به صورت یک آرایه در می آورد که دارای طول (length) و ایندکس (index) می باشد. دستورات زیر را در نظر بگیرید:

 
// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');
// We can loop though the collection:
for(var i=0;i/ A DOM element, not a jQuery object
}
// We can even slice it:
var firstFour = buttons.slice(0,4);

اگر شما بدنبال بهبود کارایی (performance) کدهای جی کوئری وب سایت تان هستید، استفاده از for ساده و while بجای $.each در دستورات جی کوئری، تا حد زیادی باعث سریع تر شدن اجرای کدهای جی کوئری خواهد شد. چک کردن طول آرایه نیز یکی دیگر از روش های بهینه سازی دستورات جی کوئری می باشد.

 
if(buttons){  // This is always true
    // Do something
}
if(buttons.length){ // True only if buttons contains elements
    // Do something
}

در مثال فوق، با بررسی buttons.length در یک if ، چک می کنیم که آیا آرایه (همان آبجکت بازگشتی از نتیجه یک سلکتور) دارای آیتمی می باشد و یا خالی است.

در مقاله بعد، با ترفندها و نکات دیگری از کتابخانه جی کوئری آشنا خواهیم شد…


برچسب‌ها:

آبجکت جی کوئریآموزش جی کوئریترفند جی کوئری


دیدگاهتان را بنویسید

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

چهارده − 2 =