Google Remarketing
TechBlog - wszystkie artykuły

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:

HTML
<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).
JavaScript
var $header = $("#header"),
    headerTop = $header.offset().top;

Selektory

  • Używaj selektora ID jeśli to możliwe. Znacząco zwiększa wydajność.
JavaScript
var $header = $("#header");
  • Podczas używania selektorów klas, nie używaj typów elementów. Test wydajności na stronie jsperf.com.
JavaScript
var $products = $("div.products"); // ŹLE
var $products = $(".products");    // DOBRZE
  • Użyj funkcji .find() do wskazania elementu w selektorze ID.
JavaScript
// Ź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.
JavaScript
// ŹLE
$( "div.data .name" );

// DOBRZE
$( ".data td.name" );
  • Jeśli to możliwe unikaj bogatych szczegółów.
JavaScript
// ŹLE
$(".data table.attendees td.gonzalez");

// DOBRZE
$(".data td.gonzalez");
  • Nadaj selektorowi kontekst.
JavaScript
// ŹLE
$('.class');

// DOBRZE
$('.class', '#class-container');
  • Unikaj używania uniwersalnego selektora.
JavaScript
// Ź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 *).
JavaScript
// ŹLE
$('div.someclass :radio');

// DOBRZE
$('div.someclass input:radio');
  • Do wyszukania elementu po ID, używaj jedynie jednego selektora ID.
JavaScript
// Ź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.
JavaScript
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.
JavaScript
// Ź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".
JavaScript
// Ź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.
JavaScript
// Ź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.
HTML
<!-- ŹLE -->
<a id="myLink" href="#" onclick="myEventHandler();">my link</a>
JavaScript
// DOBRZE
$("#myLink").on("click", myEventHandler);
  • Jeśli to możliwe, używaj niestandardowych nazw dla zdarzeń.
JavaScript
$("#myLink").on("click.mySpecialClick", myEventHandler);
$("#myLink").unbind("click.mySpecialClick");
  • Używaj event delegation (przekazanie zdarzeń), kiedy dołączasz zdarzenie do wielu elementów.
JavaScript
// Ź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".
JavaScript
// 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".
JavaScript
// SPOSÓB 1
$.ajax({ ... }).then(successHandler, failureHandler);

// SPOSÓB 2
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);
  • Przykładowy szablon Ajax:
JavaScript
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.
JavaScript
$("#myDiv").addClass("error").show();
  • Łańcuch posiadający ponad 3 funkcje, warto go rozdzielić w nowych liniach.
JavaScript
$("#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.
JavaScript
// Ź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.
JavaScript
// Ź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.
JavaScript
// 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.

Ciasteczka Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dzięki nim możemy indywidualnie dostosować stronę do twoich potrzeb. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje.