HomeBlogFrontendjQuery – dobre praktyki pisania kodu

Image for jQuery – dobre praktyki pisania kodu

Frontend

30/03/2017

jQuery – dobre praktyki pisania kodu

Czas czytania:

office

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.

Tagi