1409
جزئیات وبلاگ
نکته ها و ترفندها برای برنامه نویسان جی کوئری – ۲
در بخش اول این نوشته با عنوان ، نکته‌ها و ترفندها برای برنامه نویسان جی کوئری # ۱ ، ۷ نکته کاربردی را برای استفاده بهتر از کتابخانه جی کوئری ذکر کردیم. در ادامه نکات دیگری برای اینکه بتوانید کدهای جی کوئری خود را بهبود ببخشید آورده می‌شوند
۸- استفاده صحیح از ویژگی زنجیره‌ای (chaining) در جی کوئری
یکی از جالبترین چیزها در مورد جی کوئری توانایی آن در فراخوانی زنجیره‌ای متدهاست. در مثال زیر یک کلاس را از یک عنصر حذف می‌کنیم و به جایش یک کلاس دیگر اضافه می‌کنیم.
|
1
|
$('myDiv').removeClass('off').addClass('on'); |
می‌بینید که این کار را به صورت زنجیره‌ای انجام دادیم.
می‌توان زنجیره جی کوئری را به صورت شکسته و هر تابع را در یک خط جداگانه نوشت. این در یک زنجیره طولانی کد زیباتر و خواناتری را به ما می‌دهد.
|
1
2
3
4
5
|
$('#mypanel') .find('TABLE .firstCol') .removeClass('.firstCol') .css('background' : 'red') .append('<span>This cell is now red</span>'); |
ایجاد عادت استفاده از زنجیره به خودی خود به شما کمک می‌کند از استفاده بیش از حد از انتخابگرها بکاهید. حال فرض کنیم بخواهیم در یک جدول رنگ پس زمینه ستون اول را قرمز کنیم. برای این کار کدی همانند زیر می‌نویسیم.
|
1
|
$('#myTable').find('.firstColumn').css('background','red'); |
اما اگر بخواهیم بعد از آن رنگ پس زمینه ستون آخر را آبی کنیم چکار باید بکنیم؟ ما الان دیگر نمی‌توانیم زنجیره را برای عنصر جدول ادامه دهیم چون الان دیگر مشغول کار بر روی ستون اول هستیم و اگر بخواهیم رنگ پس زمینه ستون آخر را عوض کنیم باید دست به یک انتخاب دیگر برای به دست آوردن عنصر جدول بزنیم. اما با تابع end() می‌توانیم به انتخاب قبلی در زنجیره برگردیم و زنجیره را ادامه دهیم. این کار ما را از یک عمل انتخاب دیگر بی نیاز می‌کند و در نتیجه در اجرای سریع‌تر کد نیز موثر است.
|
1
2
3
4
5
6
|
$('#myTable') .find('.firstColumn') .css('background','red') .end() .find('.lastColumn') .css('background','blue'); |
شما حتی می‌توانید به راحتی تابع جی کوئری خود را بنوسید که قابلیت زنجیره شدن داشته باشد. فقط کافی است تابعی بنویسید که یک عنصر را تغییر دهد و آن را بازگرداند.
|
1
2
3
4
5
|
$.fn.makeRed = function() { return $(this).css('background', 'red'); } $('#myTable').find('.firstColumn').makeRed().append('hello'); |
۹- انتخابگرهای مختص به خود را بنویسید
همانگونه که می‌دانید جی کوئری انتخابگرهای داخلی برای انتخاب بر اساس id بر اساس class، تگ، صفت و چندین انتخابگر دیگر دارد. اما وقتی ما به انتخاب عناصری بر اساس چیز دیگری احتیاج پیدا بکنیم و جی کوئری آن نوع انتخابگر را نداشته باشد باید چکار کنیم؟
یک راه این است که به عناصری که می‌خواهیم یک class اضافه کنیم و انتخاب را بر اساس class انجام دهیم. اما بسط (extend) جی کوئری برای اضافه کردن انتخابگرهای جدید کار چندان مشکلی نیست. برای نشان دادن این کار مثال زیر را می‌آوریم
|
1
2
3
4
5
6
7
8
9
|
$.extend($.expr[':'], { over100pixels: function(a) { return $(a).height() > 100; } }); $('.box:over100pixels').click(function() { alert('The element you clicked is over 100 pixels high'); }); |
بلاک اول کد یک انتخابگر سفارشی را ایجاد می‌کند که عناصری را که ارتفاع آنها بیش از ۱۰۰ پیکسل باشد پیدا می‌کند. بلام دوم فقط از انتخابگر اختصاصی ما استفاده می‌کند تا یک اداره کننده رویداد کلیک (click handler) را به همه آن عناصر اضافه نماید.
وارد جزئیات بیشتر در این باره نمی‌شویم اما شما می‌توانید تصور کنید که این قابلیت چقدر قدرتمند است. با جستجوی عبارت “custom jquery selector” در گوگل می‌توانید مثال‌های زیادی را در این رابطه پیدا کنید.
۱۰- چگونه اطلاع دهیم که چه وقت عکس‌ها لود شده‌اند
این یکی از مشکلاتی است که در هنگام ایجاد گالری عکس‌ها با آن مواجه می‌شویم. آنچه که باید انجام دهید این است که از متد load() بر روی یک عنصر IMG استفاده کنید و یک تابع callback را در آن قرار دهید. مثال زیر ویژگی src یک تگ IMG را تغییر می‌دهد تا یک عکس جدید را لود کند.
|
1
2
3
|
$('#myImage').attr('src', 'image.jpg').load(function() { alert('Image Loaded'); }); |
همین که عکس لود شد alert فراخوانی می‌شود.
۱۱- ایجاد یک شیِ جی کوئریِ خالی
ایجاد یک شی جی کوئری سربار قابل توجهی به همراه دارد. گاهی شما نیاز به ایجاد یک شی خالی دارید و می‌توانید بعداً آن را با متد add() پر کنید.
|
1
2
|
var container = $([]);container.add(another_element); |
این هم پایه‌ی متد quickEach() است که شما می‌توانید به عنوان یک جایگزین سریع‌تر نسبت به متد each() استفاده نمایید.
۱۲- استفاده از Hookهای CSS
API قلاب (Hook)های CSS معرفی شد تا به برنامه نویسان توانایی به دست آوردن (get) و تنظیم کردن (set) مقادیر ویژه CSS را بدهد. با استفاده از آن شما می‌توانید پیاده سازی‌های خاص مرورگر را پنهان کنید و یک واسط (interface) واحد و یکپارچه را برای دستیابی به ویژگی‌های خاص به نمایش بگذارید.
|
1
2
3
4
5
6
7
8
9
10
11
|
$.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 پشتیبانی شده ساخته شده است که شما می‌توانید به صورت رایگان آن را در پروژه‌های خود استفاده کنید.
۱۳- استفاده از توابع سفارشی Easing
احتمالاً نام پلاگین easing را برای جی کوئری شنیده باشید. این پلاگین به شما اجازه افزودن افکت‌ها به انیمیشن‌هایتان را می‌دهد. تنها نقطه ضعفش این است که بازدیدکنندگان شما باید یک فایل جاوا اسکریپت دیگر را نیز لود کنند. خوشبختانه شما به سادگی می‌توانید افکت مورد نیاز خود را از فایل این پلاگین کپی کرده و آن را به شی jQuery.easing اضافه کنید.
|
1
2
3
4
5
6
|
$.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'); |
۱۴- $.proxy()
یکی از اشکالات استفاده از تابع‌های callback در جی کوئری همواره این بوده است که زمانی که آنها به وسیله یک متد جی کوئری اجرا می‌شوند زمینه (context) به یک عنصر متفاوت تنظیم (set) شده است. برای مثال کد HTML زیر را در نظر بگیرید:
|
1
2
3
|
<div id="panel" style="display:none"> <button>Close</button></div> |
و شما سعی می‌کنید کد زیر را اجرا کنید:
|
1
2
3
4
5
6
7
|
$('#panel').fadeIn(function(){ // this points to #panel $('#panel button').click(function(){ // this points to the button $(this).fadeOut(); });}); |
به یک مشکل برمی‌خورید. دکمه ناپدید شده نه پنل. با $.proxy شما می‌توانید کد زیر را بنویسید:
|
1
2
3
4
5
6
7
|
$('#panel').fadeIn(function(){ // Using $.proxy to bind this: $('#panel button').click($.proxy(function(){ // this points to #panel $(this).fadeOut(); },this));}); |
این کد آنچه مورد انتظار شماست انجام می‌دهد. تابع $.proxy دو پارامتر می‌گیرد: تابع اصلی شما و یک زمینه (context) و تابع جدیدی را که همیشه یک زمینه (context) مخصوص دارد برمی‌گرداند. شما می‌توانید بیشتر در مورد $.proxy در مستندات جی کوئری بخوانید.
۱۵- تعیین سنگینی (Weight) صفحه شما
یک حقیقت ساده: محتوای بیشتری که صفحه شما دارد زمان بیشتری طول می‌کشد تا مرورگر شما آن را رندر کند. شما می‌توانید شمارش سریعی از تعداد عناصر DOM صفحه‌تان را با کد زیر انجام دهید:
|
1
|
$('*').length; |
هر چه عدد کوچکتر باشد صفحه سریع‌تر رندر می‌شود. شما می‌توانید صفحه‌تان را با حذف نشانه‌گذاری‌های اضافه و عناصر غیر ضروری بهینه کنید.
در انتها چند لینک کاربردی هم ذکر می‌شود که امیدوارم بتوانند مفید واقع شوند.
در این وب سایت می‌توانید انتخابگرهای مشخص شده را امتحان کنید یا خودتان انتخابگر بنویسید و تاثیر آن را بر عناصر صفحه ببینید
این هم Cheat Sheet مربوط به jQuery 1.7 که می‌تواند هم برای یادگیری و هم برای یادآوری مفید واقع شود.
jQuery-17-Visual-Cheat-Sheet.pdf
در این صفحه هم می‌توانید API جی کوئری را به صورت کامل مشاهده نمایید که به صورت زیبایی دسته بندی شده و هر قسمت با رنگ خاصی از بقیه قسمت‌ها متمایز شده است. با کلیک بر روی هر مورد توضیحات کامل همراه با مثال‌ها نشان داده می‌شوند. در بالای همین صفحه هم می‌توانید نسخه‌ی جی کوئری مورد نظر خود را انتخاب کنید.
نکته ها و ترفندها برای برنامه نویسان جی کوئری – ۲