jQuery – dobre praktyki pisania kodu

jQuery jest najpopularniejszą biblioteką ułatwiającą korzystanie z języka JavaScript. Zaczynając od pierwszego wydania z roku 2006, wiele się zmieniło i powstawało wiele koncepcji organizacji kodu. Przyjrzyjmy się najlepszym praktykom opracowanym przez lata rozwoju biblioteki.

Na wstępie trzeba podkreślić, że artykuł związany jest z dobrymi praktykami poświęconymi bibliotece jQuery, a nie czystym językiem JavaScript.

Wczytywanie jQuery

Dodając bibliotekę jQuery do strony internetowej, warto zastosować CDN (Content Delivery Networks), czyli sieć wielu komputerów. Udostępniają one zawartości (jak biblioteki JS) o wysokiej dostępności całkowicie za darmo. Pobieranie pliku z innego źródła przyśpiesza wczytywanie stron internetowych (mniej zapytań w obrębie domeny), a dodatkowo pobrany wcześniej plik z innej domeny (przy użyciu tego samego adresu CDN) może zostać użyty ponownie z pamięci podręcznej.

Istnieją dziesiątki serwisów CDN, a do najpopularniejszych należą Google i Microsoft.

Link do pliku powinien zawierać przedrostek „//”, czyli PRURL (protocol-relative URL). Jest to metoda do linkowania zarówno po HTTP jak i HTTPS.

Na uwodzę, trzeba mieć też plan B. Co jeśli plik w serwisie CDN będzie niedostępny? Dodatkowa linijka z warunkiem posiadania jQuery dodaje w takim wypadku bibliotekę znajdującą się na naszym hostingu. Cały kod do zamieszczenia jQuery w wersji 3.2.1 w HTML powinien wyglądać następująco:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/lib/jquery-3.2.1.min.js" type="text/javascript"><\/script>')</script>

Jakiej wersji jQuery powinienem użyć?

• Jeśli strona ma być kompatybilna z Internet Explorer 6/7/8 – nie używaj wersji 2.x
• Podczas tworzenia nowych stron – rekomendowane jest użycie ostatniej wersji jQuery

Optymalizacja z użyciem CDN przyspiesza wczytywanie stron internetowych oraz zwiększa odporność na przejściowe zwiększenie natężenia ruchu na obsługiwanej stronie.

Kluczowa koncepcja

• Kod powinien być podzielony na funkcjonalności. Staraj się nie zamieszczać całego kodu w jednym wielkim bloku $(document ).ready() – hermetyzacja.
• Nie powtarzaj się. Połącz podobne funkcjonalności, aby zapobiec powtarzaniu kodu.
• Jednostki funkcjonalności powinny istnień samodzielnie i mieć możliwość komunikowaniem się z innymi jednostkami.

Zmienne

• W pamięci podręcznej przechowuj wszystkie zmienne zawierające obiekty do ponownego użycia. Dodanie przedrostka $ do selektorów DOM wyróżni ich spośród innych zmiennych.
• Do nazewnictwa zmiennych używaj notacji camelCase. Jest to system, w którym kolejne wyrazy pisane są łącznie, rozpoczynając każdy wyraz wielką literą (oprócz pierwszego).

var $header = $("#header"),
    headerTop = $header.offset().top;

Selektory

• Używaj selektora ID jeśli to możliwe. Znacząco zwiększa wydajność.

var $header = $("#header");

• Podczas używania selektorów klas, nie używaj typów elementów. Test wydajności na stronie jsperf.com.

var $products = $("div.products"); // ŹLE
var $products = $(".products");    // DOBRZE

• Użyj funkcji .find() do wskazania elementu w selektorze ID.

// ŹLE
var $productIds = $("#products div.id");

// DOBRZE
var $productIds = $("#products").find("div.id");

• Do zagnieżdżonych zapytań spraw, aby lewa strona zawierała mniej szczegółów od prawej.

// ŹLE
$( "div.data .name" );

// DOBRZE
$( ".data td.name" );

• Jeśli to możliwe unikaj bogatych szczegółów.

// ŹLE
$(".data table.attendees td.gonzalez");

// DOBRZE
$(".data td.gonzalez");

• Nadaj selektorowi kontekst.

// ŹLE
$('.class');

// DOBRZE
$('.class', '#class-container');

• Unikaj używania uniwersalnego selektora.

// ŹLE
$('div.container > *');

// DOBRZE
$('div.container').children();

• Unikaj używania ukrytych, uniwersalnych selektorów. Jeśli nie używasz selektorów, uniwersalny selektor wstawiany jest w jego miejsca (symbol *).

// ŹLE
$('div.someclass :radio');

// DOBRZE
$('div.someclass input:radio');

• Do wyszukania elementu po ID, używaj jedynie jednego selektora ID.

// ŹLE
$('#outer #inner');
$('div#inner');
$('.outer-container #inner');

// DOBRZE
$('#inner');

Manipulacja DOM

• Zawsze odczepiaj istniejące elementy przed manipulacją i złączaj je z powrotem po manipulacji.

var $myList = $("#list-container > ul").detach();
$myList.appendTo("#list-container");

• Używaj łączenia łańcuchów, albo funckji array.join() zamiast .append(). Test wydajności na stronie jsperf.com.

// ŹLE
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("<li>"+i+"</li>");
}

// DOBRZE
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "<li>"+i+"</li>";
}
$myList.html(list);

// NAJLEPIEJ
var array = [];
for(var i = 0; i < 10000; i++){
    array[i] = "<li>"+i+"</li>";
}
$myList.html(array.join(''));

• Ustaw warunki istnienia elementów. Dla pierwszego przykładu zostaną wywołane trzy funkcje zanim kod zwróci nie istnieje element od ID „nosuchthing”.

// ŹLE
$("#nosuchthing").slideUp();

// DOBRZE
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

Zdarzenia

• Używaj jedynie jednej funkcji Document Ready na stronę. Pozwala na łatwiejsze debugowanie kodu.
• Nie używaj anonimowych funkcji w zdarzeniach i przy funkcji Document Ready. Sprawia to dużo problemów z debugowaniem kodu i nie pozwala na ponowne użycie funkcji.

// ŹLE
$("#myLink").on("click", function(){...});

// DOBRZE
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);

• Nie używaj kodu JS w tagach HTML. Sprawia dużo problemów z debugowaniem kodu.

<!-- ŹLE -->
<a id="myLink" href="#" onclick="myEventHandler();">my link</a>

// DOBRZE
$("#myLink").on("click", myEventHandler);

• Jeśli to możliwe, używaj niestandardowych nazw dla zdarzeń.

$("#myLink").on("click.mySpecialClick", myEventHandler);
$("#myLink").unbind("click.mySpecialClick");

• Używaj event delegation (przekazanie zdarzeń), kiedy dołączasz zdarzenie do wielu elementów.

// ŹLE
$("#list a").on("click", myClickHandler);

//DOBRZE
$("#list").on("click", "a", myClickHandler);

Ajax

• Unikaj używania funkcji .getJson() i .get(). Zastąp je używając $.ajax().
• Nie używaj zapytań http na stronie https. Najlepszym sposobem jest brak protokołu w URL.
• Nie używaj parametrów w URL. Wysyłaj je za pomocą obiektu „data”.

// Mniej czytely
$.ajax({
    url: "something.php?param1=test1",
    ....
});

// Bardziej czytelny
$.ajax({
    url: "something.php",
    data: { param1: test1 }
});

• Spróbuj sprecyzować typ danych w obiekcie dataType.
• Używaj „promise interface”.

// SPOSÓB 1
$.ajax({ ... }).then(successHandler, failureHandler);

// SPOSÓB 2
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

• Przykładowy szablon Ajax:

var jqxhr = $.ajax({
    url: url,
    type: "GET",
    cache: true,
    data: {},
    dataType: "json",
    jsonp: "callback",
    statusCode: {
        404: handler404,
        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

Wtyczki

• Używaj wtyczek, które posiadają dobre wsparcie i dokumentacje.
• Sprawdzaj kompatybilność wtyczek z używaną wersją jQuery.

Łańcuchy

• Używaj łańcuchów jako alternatywnego użycia zmiennej i wielokrotnego wywoływania funkcji.

$("#myDiv").addClass("error").show();

• Łańcuch posiadający ponad 3 funkcje, warto go rozdzielić w nowych liniach.

$("#myLink")
    .addClass("bold")
    .on("click", myClickHandler)
    .on("mouseover", myMouseOverHandler)
    .show();

• Bardzo długie łańcuchy warto umieścić w pamięci podręcznej (zmiennej) jako pośredni obiekt.

Różne

• Używaj literałów obiektu jako parametrów.

// ŹLE
$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external");

// DOBRZE
$myLink.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

• Nie używaj jQuery do nadawania stylów.

// ŹLE
$("#mydiv").css({'color':red, 'font-weight':'bold'});

// DOBRZE
$("#mydiv").addClass("error");

• Nie używaj nieaktualnych metod. Ważne jest, aby zwracać uwagę na przestarzałe metody używane w nowych wersjach. Listę przestarzałych metod można znaleźć na stronie api.jquery.com.
• Mieszaj czysty kod JavaScript z jQuery. Dzięki temu zwiększysz wydajność kodu.

// WOLNIEJ
$("#myId");

// SZYBCIEJ
document.getElementById("myId");

Podsumowanie

Dzięki stosowaniu na stronie dobrych praktyk podczas pisania kodu jQuery zwiększamy nie tylko czytelność kodu, ale również wydajność. Użytkownicy, którzy korzystają z mniej wydajnych urządzeń, mogą w znaczący sposób odczuć płynność w przeglądaniu stworzonych przez nas serwisów.