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

استفاده بهتر از كتابخانه جی کوئری JQuery برای طراحان و برنامه نویسان وب سایت


۶ دیدگاه JQuery سه شنبه, ۲ام اسفند , ۱۳۹۰ 12732 بازدید

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

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


webtarget.ir JQuery

۸- استفاده صحیح از ویژگی زنجیره‌ای (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');  

۹- انتخابگرهای مختص به خود را بنویسید

همانگونه که می‌دانید جی کوئری انتخابگرهای داخلی برای انتخاب بر اساس 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');  
}); 

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

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

۱۰- چگونه اطلاع دهیم که چه وقت عکس‌ها لود شده‌اند

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

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

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

۱۱- ایجاد یک شیِ جی کوئریِ خالی

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

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

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

۱۲- استفاده از 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 پشتیبانی شده ساخته شده است که شما ‌می‌توانید به صورت رایگان آن را در پروژه‌های خود استفاده کنید.

۱۳- استفاده از توابع سفارشی 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');

۱۴- $.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 در مستندات جی کوئری بخوانید.

۱۵- تعیین سنگینی (Weight) صفحه شما

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

$('*').length;

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

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

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

codylindley.com

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

jQuery-17-Visual-Cheat-Sheet.pdf

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

oscarotero.com


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

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



نویسنده / مترجم : سوران خضری

برنامه نويس وب ، علاقه مند به PHP و jQuery ، گاهي هم اگه مطلب خوب ببينم ترجمه ميكنم


۶ دیدگاه برای این نوشته ثبت شده است


  1. پیام
    ۴ اسفند ۱۳۹۰

    به نکات خیلی خوب و کاربردی اشاره کرده بودید
    ممنون




  2. سکویا
    ۲۶ آذر ۱۳۹۲

    با سلام
    من یک در حال طراحی یک سایت هستم
    خیلی خیلی هم آماتورم و از جاوا و کدهاش سر در نمیارم
    یک سایتی هست به این آدرس
    http://thousandminds.com/

    زمانی که رو لینک های سایدبارش کلیک میکنی بالا یا پایین میره
    خواستم بدونم این سیستم جاوا است و چطور میشه در طراحی از اون استفاده کرد.
    برنامه مورد استفاده microsoft expression web 4

    با سپاس فراوان




  3. رها
    ۲ دی ۱۳۹۲

    سلام
    ممنون از مطالب خوب و عالی
    من یه سوال دارم
    چطور میتونم نام کوئری بکار رفته در یک سایت را پیدا کنم
    بعنوان مثال یک جی کوئری در این وب سایت برای ساختن اسلاید شو بزرگ بالا سمت چپ بکار رفته
    حالا من چطور میتونم نام و ورژن این کوئری رو پیدا کنم ؟
    خواهش میکنم راهنمایی کنید



  4. سلام.
    بسیار عالی مثل همیشه. خسته نباشید و تشکر




  5. حجت
    ۱۹ اردیبهشت ۱۳۹۳

    خوب بود، ممنون




  6. وثیقی دیزاین
    ۲۸ خرداد ۱۳۹۳

    سلام بسیار بسیار ممنون به سایت ما هم سربزنید از موقعی که با وب تارگت اشنا شدم یه پا وب دیزاینرم



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





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 webtarget.ir

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.