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

نكته‌ها و ترفندها براي برنامه نويسان جی کوئری (بخش دوم)

در بخش اول اين نوشته با عنوان ، نكته‌ها و ترفندها براي برنامه نويسان جی کوئری # 1 ، 7 نكته كاربردي را براي استفاده بهتر از كتابخانه جی کوئری ذكر كرديم. در ادامه نكات ديگري براي اينكه بتوانيد كدهاي جی کوئری خود را بهبود ببخشيد آورده مي‌شوند.

8- استفاده صحيح از ويژگي زنجيره‌اي (chaining) در جی کوئری

يكي از جالبترين چيزها در مورد جی کوئری توانايي آن در فراخواني زنجيره‌اي متدهاست. در مثال زير يك كلاس را از يك عنصر حذف مي‌كنيم و به جايش يك كلاس ديگر اضافه مي‌كنيم.

$('myDiv').removeClass('off').addClass('on');

مي‌بينيد كه اين كار را به صورت زنجيره‌اي انجام داديم.

مي‌توان زنجيره جی کوئری را به صورت شكسته و هر تابع را در يك خط جداگانه نوشت. اين در يك زنجيره طولاني كد زيباتر و خواناتري را به ما مي‌دهد.

$('#mypanel')
    .find('TABLE .firstCol')
    .removeClass('firstCol')
    .css('background', 'red')
    .append('<span>This cell is now red</span>');

ايجاد عادت استفاده از زنجيره به خودي خود به شما كمك مي‌كند از استفاده بيش از حد از انتخابگرها بكاهيد. حال فرض كنيم بخواهيم در يك جدول رنگ پس زمينه ستون اول را قرمز كنيم. براي اين كار كدي همانند زير مي‌نويسيم.

$('#myTable').find('.firstColumn').css('background', 'red');

اما اگر بخواهيم بعد از آن رنگ پس زمينه ستون آخر را آبي كنيم چكار بايد بكنيم؟ ما الان ديگر نمي‌توانيم زنجيره را براي عنصر جدول ادامه دهيم چون الان ديگر مشغول كار بر روي ستون اول هستيم و اگر بخواهيم رنگ پس زمينه ستون آخر را عوض كنيم بايد دست به يك انتخاب ديگر براي به دست آوردن عنصر جدول بزنيم. اما با تابع end() مي‌توانيم به انتخاب قبلي در زنجيره برگرديم و زنجيره را ادامه دهيم. اين كار ما را از يك عمل انتخاب ديگر بي نياز مي‌كند و در نتيجه در اجراي سريع‌تر كد نيز موثر است.

$('#myTable')
    .find('.firstColumn')
    .css('background', 'red')
    .end()
    .find('.lastColumn')
    .css('background', 'blue');

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

$.fn.makeRed = function() {
    return $(this).css('background', 'red');
}
  
$('#myTable').find('.firstColumn').makeRed().append('hello');

9- انتخابگرهاي مختص به خود را بنويسيد

همانگونه كه مي‌دانيد جی کوئری انتخابگرهاي داخلي براي انتخاب بر اساس id بر اساس class، تگ، صفت و چندين انتخابگر ديگر دارد. اما وقتي ما به انتخاب عناصري بر اساس چيز ديگري احتياج پيدا بكنيم و جی کوئری آن نوع انتخابگر را نداشته باشد بايد چكار كنيم؟

يك راه اين است كه به عناصري كه مي‌خواهيم يك class اضافه كنيم و انتخاب را بر اساس class انجام دهيم. اما بسط (extend) جی کوئری براي اضافه كردن انتخابگرهاي جديد كار چندان مشكلي نيست. براي نشان دادن اين كار مثال زير را مي‌آوريم

$.extend($.expr[':'], {
    over100pixels: function(a) {
        return $(a).height() > 100;
    }
});
  
$('.box:over100pixels').click(function() {
    alert('The element you clicked is over 100 pixels high');
});

بلاك اول كد يك انتخابگر سفارشي را ايجاد مي‌كند كه عناصري را كه ارتفاع آنها بيش از 100 پيكسل باشد پيدا مي‌كند. بلام دوم فقط از انتخابگر اختصاصي ما استفاده مي‌كند تا يك اداره كننده رويداد كليك (click handler) را به همه آن عناصر اضافه نمايد.

وارد جزئيات بيشتر در اين باره نمي‌شويم اما شما مي‌توانيد تصور كنيد كه اين قابليت چقدر قدرتمند است. با جستجوي عبارت “custom jquery selector” در گوگل مي‌توانيد مثال‌هاي زيادي را در اين رابطه پيدا كنيد.

10- چگونه اطلاع دهيم كه چه وقت عكس‌ها لود شده‌اند

اين يكي از مشكلاتي است كه در هنگام ايجاد گالري عكس‌ها با آن مواجه مي‌شويم. آنچه كه بايد انجام دهيد اين است كه از متد load() بر روي يك عنصر IMG استفاده كنيد و يك تابع callback را در آن قرار دهيد. مثال زير ويژگي src يك تگ IMG را تغيير مي‌دهد تا يك عكس جديد را لود كند.

$('#myImage')
    .attr('src', 'image.jpg')
    .load(function () {
    alert('Image Loaded');
});

همين كه عكس لود شد alert‌ فراخواني مي‌شود.

11- ايجاد يك شيِ جی کوئریِ خالي

ايجاد يك شي جی کوئری سربار قابل توجهي به همراه دارد. گاهي شما نياز به ايجاد يك شي خالي داريد و مي‌توانيد بعداً آن را با متد add() پر كنيد.

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

اين هم پايه‌ي متد quickEach() است كه شما مي‌توانيد به عنوان يك جايگزين سريع‌تر نسبت به متد each() استفاده نماييد.

12- استفاده از Hookهاي CSS

API قلاب (Hook)هاي CSS معرفي شد تا به برنامه نويسان توانايي به دست آوردن (get) و تنظيم كردن (set) مقادير ويژه CSS را بدهد. با استفاده از آن شما مي‌توانيد پياده سازي‌هاي خاص مرورگر را پنهان كنيد و يك واسط (interface) واحد و يكپارچه را براي دستيابي به ويژگي‌هاي خاص به نمايش بگذاريد.

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

حتي از اين هم بهتر اين است كه قبلاً يك كتابخانه غني از Hookهاي CSS پشتيباني شده ساخته شده است كه شما ‌مي‌توانيد به صورت رايگان آن را در پروژه‌هاي خود استفاده كنيد.

13- استفاده از توابع سفارشي Easing

احتمالاً نام پلاگين easing را براي جی کوئری شنيده باشيد. اين پلاگين به شما اجازه افزودن افكت‌ها به انيميشن‌هايتان را مي‌دهد. تنها نقطه ضعفش اين است كه بازديدكنندگان شما بايد يك فايل جاوا اسكريپت ديگر را نيز لود كنند. خوشبختانه شما به سادگي مي‌توانيد افكت مورد نياز خود را از فايل اين پلاگين كپي كرده و آن را به شي jQuery.easing اضافه كنيد.

$.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');

14- $.proxy()

يكي از اشكالات استفاده از تابع‌هاي callback در جی کوئری همواره اين بوده است كه زماني كه آنها به وسيله يك متد جی کوئری اجرا مي‌شوند زمينه (context) به يك عنصر متفاوت تنظيم (set) شده است. براي مثال كد 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) و تابع جديدي را كه هميشه يك زمينه (context) مخصوص دارد برمي‌گرداند. شما مي‌توانيد بيشتر در مورد $.proxy در مستندات جی کوئری بخوانيد.

15- تعيين سنگيني (Weight) صفحه شما

يك حقيقت ساده: محتواي بيشتري كه صفحه شما دارد زمان بيشتري طول مي‌كشد تا مرورگر شما آن را رندر كند. شما مي‌توانيد شمارش سريعي از تعداد عناصر DOM صفحه‌تان را با كد زير انجام دهيد:

$('*').length;

هر چه عدد كوچكتر باشد صفحه سريع‌تر رندر مي‌شود. شما مي‌توانيد صفحه‌تان را با حذف نشانه‌گذاري‌هاي اضافه و عناصر غير ضروري بهينه كنيد.

در انتها چند لينك كاربردي هم ذكر مي‌شود كه اميدوارم بتوانند مفيد واقع شوند.

در اين وب سایت مي‌توانيد انتخابگرهاي مشخص شده را امتحان كنيد يا خودتان انتخابگر بنويسيد و تاثير آن را بر عناصر صفحه ببينيد

codylindley.com

اين هم Cheat Sheet مربوط به jQuery 1.7 كه مي‌تواند هم براي يادگيري و هم براي يادآوري مفيد واقع شود.

jQuery-17-Visual-Cheat-Sheet.pdf

در اين صفحه هم مي‌توانيد API جی کوئری را به صورت كامل مشاهده نماييد كه به صورت زيبايي دسته بندي شده و هر قسمت با رنگ خاصي از بقيه قسمت‌ها متمايز شده است. با كليك بر روي هر مورد توضيحات كامل همراه با مثال‌ها نشان داده مي‌شوند. در بالاي همين صفحه هم مي‌توانيد نسخه‌ي جی کوئری مورد نظر خود را انتخاب كنيد.

oscarotero.com

منتظر نظرات و پيشنهادات و راهنمايي‌هاي خوب و زيباي شما هستيم.

این مطلب توسط جناب آقای سوران خضری برای وب تارگت آماده شده است