Prawdopodobnie nie potrzebujesz jQuery

jQuery jest biblioteką JavaScript niemal tak popularną, jak język na którym została zbudowana. A przynajmniej, jeśli wierzyć poniższym statystykom z Google Trends:

Ja jednak pójdę o krok dalej i odważę się powiedzieć, że jQuery przerasta popularnością swojego „żywiciela”. Widać to choćby podczas poszukiwania rozwiązań konkretnego problemu – pytanie odnośnie JavaScript na stronach typu StackOverflow z reguły jest kwitowane odpowiedzią „why not just use jQuery?”. No, to dzisiaj się dowiecie why not. :)

93,7

Na tej częstotliwości w Krakowie znajdziecie moje ulubione radio, ale nie o tym chciałem. :) Tyle kilobajtów waży jQuery w najnowszej wersji 1.11.2. To sporo. Pobranie tej biblioteki to jedno zapytanie więcej (pewnie skorzystasz z Google Hosted Libraries, więc dochodzi jeszcze nawiązanie połączenia z nowym serwerem), jeden plik więcej do pobrania, i  – co najgorsze z tej listy – jeden plik na który przeglądarka musi poczekać z całym renderowaniem strony, bo stron które wczytują skrypty asynchronicznie, o dziwo, wciąż jest jak na lekarstwo.

Write less, wait more?

write less, do more – to hasło reklamowe jQuery. I nie ma co ukrywać – jQuery kochają wszyscy właśnie za wygodę pisania kodu. Oszczędzamy mnóstwo czasu pisząc kod, ale… Czy na pewno przewaga jest tak ogromna?

$(‚…’)

Oprzyjmy to na prostym przykładzie i na warsztat weźmy to, co w jQuery jest najbardziej cenione (bo najczęściej używane). Mowa o łatwej selekcji elementów – $('#wiesz.o.czym.mowie[name="prawda?"]') :)

Tymczasem zaskakująco mało osób wie, że niemal identyczna funkcja znajduje się w „zwykłym” JS. Nazywa się document.querySelectorAll i jako parametr przyjmuje praktycznie dowolne wyrażenie CSS. Za dużo pisania? Ech :)

function q(sel) {
    return document.querySelectorAll(sel);
}

Różnice w wydajności między rozwiązaniem JS i JavaScript? Prawdę mówiąc, do chwili pisania artykułu wiedziałem tylko, że jakieś będą. Teraz wiem dokładnie: sięgają nawet rzędu wielkości.

JS vs jQuery

Pozamiatane. Nie wierzycie? Zobaczcie sami: JavaScript/jQuery performance demo (uwaga, 100 000 elementów na stronie może Ci przyciąć przeglądarkę na chwilkę lub dwie).

Animacje? CSS!

Dalej na liście nadużyć jQuery są takie funkcje jak .hide(), .show(), .fadeIn(), .fadeOut() czy .animate().

Przykłady, w których nie da się zastąpić ich odpowiednio napisanym CSS-em można policzyć na palcach jednej ręki! Tymczasem animacje wykonane z użyciem CSS są o wiele wydajniejsze. Dlatego…

Zamiast obiekt.hide() napisz obiekt.style.display = 'none';.

Zamiast obiekt.show() napisz obiekt.style.display = 'block'; (Niekoniecznie 'block' oczywiście, możesz podać dowolną wartość tego parametru jeśli potrzebujesz. Nawiasem mówiąc, zanim chowając element zmienisz ją na 'none' możesz też ją sprawdzić za pomocą document.defaultView.getComputedStyle(obiekt)['display']).

.fadeIn() i .fadeOut() zastąpimy bez problemu odpowiednio napisanym CSS-em. Wystarczy do danego elementu przypisać atrybut CSS:

transition: opacity 1s ease-in-out;

gdzie pierwszy wyraz to atrybut który ma być animowany, drugi to czas trwania animacji a trzeci to funkcja opisująca animację, a następnie manipulować wartością atrybutu opacity wedle uznania. Podobnie rzecz będzie miała się z .animate().

No to mam w końcu używać tego jQuery?

Odpowiedź jak zawsze brzmi: to zależy.

jQuery jest bez wątpienia potężną biblioteką. Bogactwo możliwości z pewnością wykorzysta ogromny projekt, ale nie Twoja strona domowa!

Wstyd się przyznać, ale kiedyś moja strona domowa wczytywała właśnie omawianą bibliotekę tylko po to, bym raz napisał:

$(document).keydown(function(e) { ... });

zamiast:

document.addEventListener('keydown', function(e) { ... })

No, wstyd.

Wniosek na koniec? Na proste problemy – proste rozwiązania.