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

۵- ایجاد یک آبجکت خالی جی کوئری (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 (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

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

کد:

$.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>

ادامه پست بعد: ))

 

...ادامه
کد جی کوئری

کد:

$('#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 می تواند خسته کننده باشد.
بهترین راه حل برای مساله فوق، ست کردن مقادیر پیش فرض آژاکس می باشد. بصورت زیر:

کد:

// 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();
*/