به نکات زیر در مورد JQuery توجه کنید!

​

 

۱- از آخرین نسخه جی کوئری (Latest jQuery) استفاده کنید:

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

استفاده از CDN های جی کوئری:
شما می توانید کتابخانه جی کوئری را مستقیما از سرورهای گوگل به وب سایت خود اضافه کنید که CDN های رایگان فراوانی از جاوااسکریپت را برای مدیران وب سایت و برنامه نویسان فراهم می کند. در تصویر زیر کتابخانه های موجود در جاوااسکریپت را مشاهده می کنید:


​

 

آخرین نسخه هایی که از کتابخانه جی کوئری در دسترس می باشد بصورت زیر است:

۳٫x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

۲٫x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

۱٫x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

site:
<a href="http://jquery.com/">jquery.com</a>​

 

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

​

 

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

کد:

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

سلکتور آیدی در jQuery:
همانطور که مشاهده می کنید، دستور اول، زیباست اما سرعتش کم می باشد. دستور دوم از اولی بهتر است و اما دستور آخر از همه آنها بهتر و سریع تر می باشد. بنابراین اگر سلکتور را با آیدی (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 ، چک می کنیم که آیا آرایه (همان آبجکت بازگشتی از نتیجه یک سلکتور) دارای آیتمی می باشد و یا خالی است.

 

۴- Selector Property:
جی کوئری دارای یک property می باشد که به اولین المان در یک سلکتور چند بخشی اشاره دارد. در مثال زیر، selector برابر #container خواهد بود:

کد:

$('#container li:first-child').selector    // #container li:first-child
$('#container li').filter(':first-child').selector    // #container li.filter(:first-child)

اگر چه دو دستور فوق یک نتیجه خواهند داشت و به یک المان اشاره دارند اما همانطور که مشاهده می کنید، سلکتورهای متفاوتی دارند. استفاده از عبارت selector در دستور دوم نامعتبر (invalid) است زیرا selector نمی تواند بعد از متد filter بیاید.