۱۵ نکته و ترفند جی‌کوئری برای برنامه‌نویسان

۱۵ نکته و ترفند جی کوئری برای برنامه نویسان

Powerful jQuery Tips & Tricks

15 نکته و ترفند جی کوئری برای برنامه نویسان

 

در این مقاله، قصد داریم ۱۵ ترفند و نکته کاربردی از جی کوئری (jQuery) را بیان کنیم تا بتوانید بصورت موثرتر از کتابخانه جی کوئری بهره ببرید. در این سری آموزشی، ابتدا نگاهی به ترفندها و نکات درباره کارایی (performance) خواهیم داشت و سپس در بخش های کوتاهی، ویژگی هایی که از کتابخانه جی کوئری (jQuery Library) مبهم تر می  باشند را بررسی خواهیم کرد.

 

نکات نوشتن کدهای 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 بیاید.

 

۵- ایجاد یک آبجکت خالی جی کوئری (Empty jQuery Object):

آبجکت خالی جی کوئری

ایجاد یک شی جی کوئری (jQuery object) سربار (overhead) زیادی را به همراه خواهد داشت. گاهی اوقات شما نیاز دارید یک آبجکت خالی تعریف کنید و بعدا آنرا توسط متد add() پر کنید:

 
var container = $([]);
container.add(another_element);

این قضیه، اساس و بنیان این مطلب است که استفاده از متد each سریع (quickEach) بهتر از each پیش فرض جی کوئری می باشد.

 

۶- انتخاب المان بصورت تصادفی (Select Random Element):

سلکتور تصادفی و رندوم

جی کوئری فیلترهای selection خود را اضافه می کند. مانند هر بخش دیگر از جی کوئری، شما می توانید خودتان این فیلترها را بنویسید. برای انجام اینکار، براحتی یک تابع (function) به عبارت $.expr[‘:’] اضافه کنید. یکی از موارد کاربردی فیلترهای تصادفی، در این وب سایت بیان شده است (تعریف فیلترهای تصادفی برای انتخاب المان های رندوم) شما می توانید کد مختصرتر و ساده تر این سناریو را در بخش زیر ببینید:

 
(function($){
    var random = 0;
    $.expr[':'].random = function(a, i, m, r) {
        if (i == 0) {
            random = Math.floor(Math.random() * r.length);
        }
        return i == random;
    };
})(jQuery);
// This is how you use it:
$('li:random').addClass('glow');


 

۷- استفاده از هوک های CSS (Use CSS Hooks): 

css Hooks

هوک های css (Css Hooks) به این منظور معرفی شده اند تا به برنامه نویسان و توسعه دهندگان، امکان get و set کردن مقادیر خاص css را بدهد. توسط این امکان، شما می توانید تعریف پیش فرض مرورگرها از استایل ها را مانند border-radius تغییر دهید و کاملا شخصی سازی کنید:

 
 $.cssHooks['borderRadius'] = {
        get: function(elem, computed, extra){
            // Depending on the browser, read the value of
            // -moz-border-radius, -webkit-border-radius or border-radius
        },
        set: function(elem, value){
            // Set the appropriate CSS3 property
        }
};
// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

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

 

۸- استفاده از توابع سفارشی easing (Custom Easing Functions):

حتما شما تابحال با پلاگین easing جی کوئری برخورد داشته اید. این پلاگین به شما این امکان را می دهد تا به انیمیشن های موجود، افکت بدهید. برای استفاده از این پلاگین فقط کافیست یک فایل جاوااسکریپت دیگر بنام easing.min.js را به صفحه وب سایت خود اضافه نمائید. علاوه بر دانلود این فایل و استفاده از آن، شما می توانید از CDN این پلاگین نیز استفاده کنید:

https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js

easings animation

پس از افزودن رفرنس این پلاگین به صفحه وب، دستوراتی مانند زیر را در نظر بگیرید:

 
$.easing.easeInOutQuad = function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
};
// To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');

شما همچنین می توانید انواع easing ها را در وب سایت easings.net مشاهده کنید.

 

۹- تابع $.proxy():

یکی از مشکلاتی که در اجرای توابع callback در جی کوئری همیشه وجود دارد اینست که وقتیکه آنها توسط متدی از کتابخانه جی کوئری اجرا می شوند، عملیات موردنظر بر روی المان دیگری اجرا می شود. عنوان مثال، در دستورات زیر، پس از کلیک روی دکمه close  ، بجای اینکه panel ناپدید شود، خود دکمه مخفی می شود:

کد HTML:

<div dir="ltr">
    <div id="panel" style="display:none"></div>
    <button>Close</button>
</div>

<div id="panel">
    <button>Close</button>
</div>

کد jQuery:

 
$('#panel').fadeIn(function(){
    // this points to #panel
    $('#panel button').click(function(){
        // this points to the button
        $(this).fadeOut();
    });
});

توسط $.proxy شما می توانید این مشکل را برطرف سازید:

 
$('#panel').fadeIn(function(){
    // Using $.proxy to bind this:
    $('#panel button').click($.proxy(function(){
        // this points to #panel
        $(this).fadeOut();
    },this));
});

دستورات فوق، آنچه که مدنظر شماست را انجام می دهند. تابع $.proxy() دو آرگومان می گیرد: تابع اصلی و context. برای مطالعه بیشتر در زمینه این تابع به وب سایت jQuery مراجعه کنید.

 

۱۰- وزن صفحه خود را مشخص کنید (Determine the weight of your page):

یک واقعیت ساده: هر چقدر صفحه شما محتوای بیشتری داشته باشد، زمان بیشتری نیز از مرورگر برای نمایش آن صفحه گرفته می شود.

بدست آوردن تعداد المان های DOM صفحه وب:

توسط دستور ساده زیر می توانید تعداد المان های DOM صفحه وب خود را در inspector مرورگر مشاهده کنید:

console.log( $('*').length );

هرچقدر عدد بدست آمده از این دستور کوچکتر باشد، وب سایت شما سریع تر لود خواهد شد. شما می توانید تعداد المان های DOM را با حذف المان ها و div های اضافی و غیرضروری کاهش دهید.

 

۱۱- کد خود را به یک پلاگین جی کوئری تبدیل کنید:

پلاگین جی کوئری

اگر شما زمان قابل توجهی را صرف نوشتن کدهای جی کوئری کرده اید، بهتر است این کدها را به یک پلاگین جی کوئری (jQuery Plugin) تبدیل کنید. با انجام اینکار، استفاده مجدد (reuse) از کدهایی که قبلا نوشته اید، راحت تر خواهد شد. و همچنین وابسته ها (Dependencies) را محدود می کند. تمام آموزش های وب سایت tutorialzine.com بصورت پلاگین های جی کوئری در آمده اند. بنابراین شما براحتی می توانید از آنها در پروژه خود استفاده کنید.

نحوه تعریف پلاگین در جی کوئری:

براحتی و با دستورات نمونه زیر می توانید یک پلاگین در جی کوئری تعریف کنید:

 
(function($){
    $.fn.yourPluginName = function(){
        // Your code goes here
        return this;
    };
})(jQuery);

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

 

۱۲- مقادیر پیش فرض آژاکس را تعریف کنید (Set Global Ajax Defaults):

وقتی از درخواست های آژاکسی (Ajax Requests) در پروژه خود استفاده می کنید، اغلب نیاز دارید که علائم و نشانه هایی برای بیان در حال انجام بودن درخواست نمایش دهید. اینکار می تواند توسط یک انیمیشن بارگذاری (loading gif) انجام شود و یا با نمایش یک پس زمینه تیره. مدیریت این علائم و انیمیشن ها در هر بار فراخوانی $.get و $.set می تواند خسته کننده باشد.

تابع Ajax در جی کوئری

 

بهترین راه حل برای مساله فوق، ست کردن مقادیر پیش فرض آژاکس می باشد. بصورت زیر:

 
// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
    url         : '/ajax/',
    dataType    : 'json'
});
$.ajaxStart(function(){
    showIndicator();
    disableButtons();
});
$.ajaxComplete(function(){
    hideIndicator();
    enableButtons();
});
/*
    // Additional methods you can use:
    $.ajaxStop();
    $.ajaxError();
    $.ajaxSuccess();
    $.ajaxSend();
*/

» مطالعه مقاله "تابع ajax در جی کوئری" توصیه می شود.

 

۱۳- استفاده از Delay() در انیمیشن های جی کوئری:

انیمیشن در جی کوئری

تعریف و استفاده از انیمیشن های جی کوئری بصورت زنجیروار (chained) یکی از قابلیت های کاربردی جی کوئری است. پیشنهاد می شود بین هر انیمیشن، توسط delay() تاخیری ایجاد نمائید. دستورات زیر را در نظر بگیرید:

 
// This is wrong:
$('#elem').animate({width:200},function(){
    setTimeout(function(){
        $('#elem').animate({marginTop:100});
    },۲۰۰۰);
});
// Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

متد انیمیشن یعنی Animation() باعث صرفه جویی در زمان بسیاری از برنامه نویسان و توسعه دهندگان شده است. زیرا تمام پروسه های مرتبط با اجرای انیمیشن را خود این متد برعهده می گیرد و انجام می دهد. مانند set timeout و parse property value و رهگیری پروسه اجرای انیمیشن و… برای مطالعه بیشتر در زمینه انیمیشن در جی کوئری، به این مقاله مراجعه شود.

 

۱۴- استفاده از اتریبیوت data در HTML5:

اتریبیوت data در HTML5

اتریبیوت data در HTML5 ابزاری است برای درج داده (embed data) در صفحات وب. اتریبیوت data برای تبادل داده بین سرور و کلاینت (server side and front-end)

اتریبیوت دیتا در HTML5:

<div id="d1" data-role="page" data-last-value="43" data-hidden="true"

    data-options='{"name":"John"}'>

</div>

و برای استفاده از این اتریبیوت ها باید اسکریپت های زیر را بنویسیم:

 
$("#d1").data("role");          // "page"
$("#d1").data("lastValue");     // 43
$("#d1").data("hidden");        // true;
$("#d1").data("options").name;  // "John";

به منظور کسب دانش بیشتر درباره اتریبیوت data در HTML5 به این وب سایت مراجعه شود.

 

۱۵- استفاده از Local Storage در جی کوئری:

LocalStorage در HTML5

LocalStorage یک API ساده در جی کوئری است که امکان ذخیره و بازیابی اطلاعات در سمت مشتری (client side) را فراهم می کند (مانند session و cookie) این API کاربردی، تقریبا در تمام مرورگرها پشتیبانی می شود. لطفا به دستورات زیر دقت کنید:

 
// Check if "key" exists in the storage
var value = $.jStorage.get("key");
if(!value){
    // if not - load the data from the server
    value = load_data_from_server();
    // and save it
    $.jStorage.set("key",value);
}
// Use value

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

منبع: www.tutorialzine.com


برچسب‌ها:

آموزش جی کوئریتابع Ajaxتابع easingترفند jQueryترفندهای جی کوئریکتابخانه جاوااسکریپتلوکال استوریجنسخه های جی کوئرینکات jQuery

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

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

چهارده + هجده =