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

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


سوران خضری 8 دیدگاه JQuery Tuesday, 21st February , 2012 23207 بازدید

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

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


webtarget.ir JQuery

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


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

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



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

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


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


  1. پیام
    23 February 2012

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




  2. سکویا
    17 December 2013

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

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

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




    • سبحان
      6 October 2017

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

      کاربر عزیر، اگر قصد یادگیری این موضوع را دارید، خوب باید اشاره کرد که ساخت چنین مواری بیشتر با جی کوئری انجام میشود. خوب بالطبع وقتی شما بتوانید با جی کوئری آن را بسازید، در نتیجه با جاوا اسکریپت هم میشود و کتابخانه هایی چون جی کوئری باعث راحت تر شدن کار شما خواهند شد. شاید تعجب کنید ، اما حتی میتوان با اچ تی ام ال و سی اس اس نیز ساخت. (در نتیجه پلاگین ها تنها جهت راحت تر شدن طراحی و علاوه بر آن آسان شدن کار شما در تغییرات است. به عنوان نمونه مثلا با تغییر یک نام متغیر ، مثلا فلان افکت عمودی را به حالت افقی تغییر میدهید . در حالی عدم استفاده از کتابخانه ها، کار شما را سخت میکند.
      اما به طور معمول و در اینجا چنین مواردی با همان پلاگین easing جی کوئری که در همین صفحه نیز اشاره شد، ساخته میشود.

      ———————-
      آموزش : ببینید بهترین راهنمایی که میتوانم بکنم :
      شما در HTML به دنبال مطالعه درباره bookmark یا همان پیوند درون صفحه ای باشید. وقتی براحتی یک لینک درون صفحه اید ایجاد نمودید، تنها تفاوت در سرعت انتقال است. در نتیجه براحتی میتوان با سی اس اس سرعت حرکت را نیز مدیریت کرد.(منظور با کلیک بر روی لینک خاصی، اسکرول با سرعت ملایمی به مکان پیوند شده انتقال یابد)

      حال این پلاگین ها، این کارها را برای شما ساده کرده اند.. مانند easing

      ضمنا اگر بخواهم یک قالب تک صفحه ای آماده و کاملا به شکل سایتی که معرفی کرده اید برایتان معرفی کنم ، میتوانید به آدرس زیر بروید و رایگان دانلود کنید. قالب کمی قدیمی است . اما به زمان خودش زیبا است
      https://bootstrapmade.com/knight-free-bootstrap-theme/

      موفق باشید




  3. رها
    23 December 2013

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



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




  5. حجت
    9 May 2014

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



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




  7. مریم
    6 March 2020

    سلام.عالی بود.



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





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

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

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

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

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



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2024 وب‌تارگت

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