Autor: Łukasz Koszela

Źródło: http://blog.alchemycode.pl

Jestem wielkim zwolennikiem jQuery (może nawet czasami aż do przesady…), ale wykorzystuję go już przeszło 2 lata i wciąż jestem pod wrażeniem możliwości jakie ze sobą niesie.

Oczywiście nie jestem ekspertem w tej dziedzinie, ale przez te ostatnie lata zdążyłem zauważyć kilka bardzo przydatnych faktów, dotyczących tej biblioteki. Faktów, które mogą się naprawdę przydać w tak zwanym codziennym programowaniu :)

1. Ładuj jQuery z Google Code

Jest to sposób, który zacząłem doceniać dopiero niedawno, kiedy zrozumiałem kilka podstawowych faktów. CDN (ang. content delivery network) Googla bardzo szybko ładuje bibliotekę, ale co ważniejsze, istnieje bardzo duże prawdopodobieństwo, że ktoś gdzieś już odwiedził stronę, która ładowała jQuery w ten sam sposób, więc biblioteka jest już zachowana. A jak załadować jQuery z Google Code? Bardzo prosto:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>

2. Połącz wszystkie używane pliki JavaScriptowe i zminimalizuj je

Co prawda nie jest to uwaga szczególnie do jQuery, ale jest to mimo wszystko bardzo ważny punkt. Ogólnie im więcej plików z pojedynczymi skryptami ładujecie dla jednej podstrony tym dłużej będzie się ona ładować. Prawdą jest, że bardzo rzadko można połączyć wszystkie skrypty, by nie doprowadzić do sytuacji, że na konkretnej podstronie wykorzystujemy jedynie ułamek pliku, jednakże z pewnością można wydzielić grupy plików, które z powodzeniem można połączyć.

Druga sprawa, to minimalizowanie wielkości plików. Dobą praktyką wg mnie jest tworzenie 2 wersji plików developerskich i produkcyjnych. W developerskich piszemy piękny kod z odpowiednią ilością wcięć i komentarzy, a w produkcyjnej ograniczmy się do komentarza o autorze i tyle. Wszystkie niepotrzebne znaki usuwamy, a najlepiej korzystamy z gotowego rozwiązania online – mój ulubiony to minifyjavascript

3. Mała rzecz a cieszy

Może to nic wielkiego, ale zawsze kilka znaków mniej, czyli skrót zdarzenia ready – zamiast:

    $(document).ready(function (){
        // jakiś kod
    });

piszemy:

    $(function (){
        // jakiś kod
    });

4. Omijaj domyślne zachowanie zwracając false

Pewnie nieraz zdarzyło się wam, że w momencie, gdy strona była pod linią łamania i znajdował się tam link, do którego podpięliście zdarzenie click wędrowaliście na samą górę strony.

   1. Klikaj!

 $('a').click(function(){
     // obsługa zdarzenia click
 });

Aby temu zapobiec wystarczy zwracać false, w ten sposób unikniemy wykonywania domyślnych zdarzeń.

 $('a').click(function(){
     // obsługa zdarzenia click
     return false;
 });

5. jQuery to nie wszystko

Niejednokrotnie przychodzi taki moment, w którym chcemy wykorzystać nie tylko jQuery, ale również inną bibliotekę, np. Mootools czy Prototype. Problem w tym, że większość bibliotek wykorzystuje ten sam symbol $, który może w prosty sposób prowadzić do konfliktów. Na szczęście możemy wykorzystać funkcję noconflict, dzięki której zwalniany jest znak $ i możliwe staje się zadeklarowanie innego znaku skrótu:

 var $AC = jQuery.noConflict();
 $AC('#pojMain').show();

6. Używaj ID zamiast class

Dzięki jQuery odwoływanie się do elementów DOM z wykorzystaniem klas jest równie łatwe jak z wykorzystaniem id, przez co często nie zwraca się większej uwagi na selektory. Jednakże jest tu pewien haczyk. Zdecydowanie lepiej i wydajniej jest używać selektorów podając ID, ponieważ jQuery wykorzystuje wtedy natywną funkcję JavaScriptową – getElementByID. W niektórych przypadkach różnica może być nawet 100 krotna!

7. Dodaj kontekst do swoich selektorów

Prosta sprawa – jeżeli już musisz pobierać element za pośrednictwem klasy, to spraw by JavaScript nie musiał wędrować po całym DOM-ie, więc zamiast:

   $('.klasa').css ('display','none');

napisz:

   $('.klasa','#kontekst-klasy').css ('display','none');

8. Unikaj manipulacji elementami DOM

Manimulację elementami DOM powinno się ograniczać do absolutnego minimum, ponieważ operacje takie jak: prepend(), append(), after() są czasochłonne. Więc zamiast:

	for (var i=0; i<100; i++) {
                $('#punkty').append('
 punkt '+i+'

');
	}

Można wykorzystać szybszą funkcję .html() i zbudować wcześniej listę elementów do wstawienia:

 var punkty= '';
	for (var i=0; i<100; i++) {
		list += '
 punkt '+i+'

';
	}
	('#punkty').html (punkty);

9. Zależy Ci na czasie?

Jeżeli nie masz jeszcze zainstalowanego FireBuga, to nie wiem jak do tej pory rozwijałeś strony :p FireBug obecnie jest zarówno dla mnie jak i dla innych webdeveloperów jakich znam podstawowym narzędziem w programowaniu aplikacji online.

Poza najczęściej przeze mnie wykorzystywaną komendą konsolową (console.info), która wyrzuca na żądanie wartości zmiennych, wiadomości itp. podczas wykonywania kodu JavaScript, pozostaje funkcja – console.time, która pozwala na mierzenie czasu wykonywania się fragmentu kodu. Samo jej użycie jest naprawdę proste:

    console.time('zly_dom');  

	for (var i=0; i<100; i++) {
                $('#punkty').append('
 punkt '+i+'

');
	} 

    console.timeEnd('zly_dom');

Np. gdybyśmy chcieli sprawdzić czy w pkt 8 napisałem prawdę :)

10. Kto mówił, że ściąganie jest złe?

I tak jeszcze na koniec – używaj jQuery cheat sheets. Jak pokazuje czas, dobrze jest mieć pod ręką wydrukowane na stronie A4 wszystkie funkcje, ich składnie i co robią – tak żeby sobie przypomnieć na szybko co i jak. Chociażby takie: jQuery cheat sheet

A wy jak zwiększacie wydajność waszego jQuery? Zachęcam do pisania w komentarzach :)