۱۵ نکته و ترفند جی کوئری – بخش پنجم
15 نکته و ترفند جی کوئری - بخش پنجم : در این مقاله، درباره تابع proxy و تعداد المان های DOM و نوشتن پلاگین جی کوئری صحبت خواهیم کرد.

با سلام. در مقاله قبل با CSS Hooks و easing انیمیشن جی کوئری آشنا شدیم. در این مقاله، تابع ()proxy و المان های DOM را بررسی خواهیم کرد. 

 

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

تابع proxy

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

کد html:

<div id="panel" style="display:none">

    <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);

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

در مقاله بعد، درباره تابع ajax در جی کوئری و استفاده از delay در انیمیشن های جی کوئری و اتریبیوت data در HTML5 و Local Storage در HTML5 صحبت خواهیم نمود.


برچسب‌ها:

المان های DOMپلاگین جی کوئریتابع proxy


2 دیدگاه برای “۱۵ نکته و ترفند جی کوئری – بخش پنجم”

  1. امیر گفت:

    سلام

    راه ساده تری هم وجود داره! در خط دوم اشاره گر this را در متغیری به نام self ذخیره کنیم.    var self = $(this)

    در خط پنجم از متغیر self بجای (this)$ استفاده کنیم!!

    ;()self.fadeOut

    1. Mohtava-Admin گفت:

      بله همینطوره 🙂

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

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

14 + هفت =