آموزش : کد های jQuery خود را سریع تر کنید

[MDP]

به نام خدا
سلام.

این مطلب رو تنظیم کرده بودم که توی وبلاگ خودم بزارم ولی خوب هنوز آماده نشده.اگر هم پخش نشه قدیمی میشه و کاراییش رو ازدست میده.این نکات که حاصل وبگردی و تجارب شخصی خودم هست شامل 50 نکته هست که کم کم همش رو آماده میکنم.این 5 نکته اول این بخش هست.

بین این نکات یک سری نکات حرفه ای وجود داره که اون ها رو دونه دونه بحث میکنم.

/

خوب توی دنیای jQuery یه نقطه ضعف بزرگ وجود داره که توی بحث های تخصصی که میشه بهش گیر میدن.اون هم حجم کتاب خونه اصلی هست.

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

این آموزش به چند نکته ( Tip ) برای بهبود سرعت کد های jQuery اشاره خواهد کرد.


1 - استفاده از window.load
بیشتر آموزش هایی که شما احتمالا دیده اید کد های خود را درون بلوک :

$(document).ready(function() {
        //کد های شما اینجا قرار میگیرد
         });

قرار میگیرد.این امر باعث میشه که زمانی که تا کل فرم لود نشده عملیات های شما انجام بشه.پیشنهاد میشه کد های خودتون رو درون بولک های زیر بزارید تا سریع تر اجرا بشن:

$(window).load(function() {
        //کد های شما اینجا قرار میگیرد
         });

با این کار فشار زیادی رو از روی CPU بر مدارید.چون تمام آبجکت ها دانلود شده و آماده کار هستند.البته استفاده از روش اول هم خیلی جاها کاربرد داره...

2 - استفاده از ID به جای Class

برای انتخاب یک شی خاص از ID استفاده کنید.دلیل این امر اینه که :

1. زمانی که از کلاس ها استفاده کنید امکان داره چند کلاس هم نام وجود داشته باشه و جست و جو بین این شی ها زمان گیر هست.
2. زمانی که از ID استفاده میکنید.مستقیم از document.getElementById استفاده میشه که بالا ترین سرعت دسترسی رو داره.

3 - کش کردن شی.

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

$(document).ready(function() {
            var mydiv = $("div#mydiv");
            mydiv.click(function() {
                 mydiv.html("MDP(ask me for impossibles...)");                
            });
        });

4 - استفاده از نام تگ ها.

بعد از ID سریع ترین دسترسی برای getElementsByTagName() هست.

لازم به ذکر هست که ترکیب مورد 3 و 4 بهترین دسترسی در jQuery هست.یعنی :

$(".mydiv");
            $("#mydiv");
            $("div#mydiv");

از بدترین به بهترین.

5 - استفاده درست از chaining

یکی از جذابیت های jQuery قابلیت chaining هست یعنی شما میتونید کد مثل زیر رو بنوسید :

  $(document).ready(function() {
            var mydiv = $("div#mydiv");
            mydiv.click(function() {
            mydiv.html("MDP(ask me for impossib
les...)").fadeTo(2000, 0.5).append($("<a>click me !</a>").attr("href", "http://www.daneshpour.org/")).css({ "font": "12px 'Comic Sans MS'"});
            });
        });

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

ولی استفاده اشتباه از chaning باعث مشکلات زیادی میشه.


پایان بخش اول.