JavaScript – Dobre praktyki pisania kodu

Jako początkujący programista możesz nie przykładać do tego tak dużej wagi ale to jak piszesz swój kod naprawdę ma znaczenie. Mówię tutaj o tak często pomijanych szczegółach jak to kiedy stawiasz spacje, jak robisz wcięcia, kiedy dajesz jakie nawiasy itd. Wielu początkujących programistów pomija ten aspekt w swoich pierwszych przygodach związanych z programowaniem a jest to naprawdę ważny temat. Po pierwsze sprawia, że twoje skrypty stają się znacznie bardziej czytelne co za tym idzie powrót do nich po jakimś czasie nie musi być mordęgą. Skrypty będziesz też pewnie pisał nie tylko dla siebie. Jeśli mają na to patrzeć inni programiści to pewnie po stylu pisania kodu ocenią też twoje umiejętności. Warto więc postarać się, żeby wypaść jak najlepiej. Podam Ci zatem kilka zasad i reguł które pomogą CI utrzymać twój kod w czystości i sprawią, że będzie znacznie lepiej wyglądał. Pamiętaj tylko, żeby zawsze w swoich projektach stosować się cały czas do takiej samej konwencji nazewniczej, stylu pisania nawiasów, dawania wcięć itd.

Styl pisania kodu

Kiedy mówimy o stylu pisania kodu mamy najczęściej na myśli:

  • to w jaki sposób nazywamy zmienne i funkcje
  • to kiedy używamy spacji, wcięć i komentarzy
  • praktyki i zasady programowania

Nazewnictwo

Zacznijmy więc może od nazewnictwa zmiennych, funkcji i obiektów. Ja osobiście zawsze stosuje camelCaseJest to praktyka polegająca na rozpoczynaniu konkretnej nazwy z małej litery i jeśli w nazwie występuje więcej niż jeden wyraz to piszemy go zaraz po pierwszym bez żadnego oddzielenia ale za to z wielkiej litery,

Inną dość szeroko stosowaną konwencją jest zastąpienie spacji za pomocą znaku _ . Wtedy wszystko piszemy z małych liter.

Ogólnie można zauważyć, że programiści JS zawsze preferują pierwszy sposób, sam nie wiem dlaczego chociaż pewnie ma na to wpływ fakt, że wiele wbudowanych metod stosuje właśnie taką konwencję nazewniczą. Druga natomiast szeroko stosowana jest wśród programistów PHP, zakładam, że również z tego powodu, oraz w bazach danych.

Istnieje też składnia oparta o myślniki ale ją powinniśmy stosować tylko w HTML i CSS.

Ostatnią konwencją na która możemy się natknąć, przynajmniej z tych popularniejszych, jest PascalCase.

Ta jednak preferowana jest przez programistów C więc jest to bardzo odległy dla nas w tym momencie świat.

Białe znaki

Kolejną ważną kwestią są białe znaki. Pamiętaj, żeby wokół operatorów takich jak chociażby = + – * / zawsze dawać spacje. Znacznie poprawia to czytelność.

Żeby utworzyć wcięcie w kodzie zawsze używaj czterech spacji zamiast tabulatora, ponieważ różne edytory różnie interpretują tabulator i kod może się nam rozjeżdżać.

Przypisywanie

Kiedy wykonujesz prostą operację przypisania, powinna ona wyglądać mniej więcej tak jak poniżej.

Zwyczajna zakończona średnikiem linijka, Jeśli natomiast mamy bardziej skomplikowaną sytuację jeśli chodzi o przypisanie to pierwszą linijkę kończymy { a w kolejnych przypisujemy po jednej wartości na linię. Znak } po którym następuje średnik osadzamy w linijce zaraz po przypisaniu ostatniej wartości w obiekcie.

Funkcje

Pętle

Instrukcje warunkowe

Długość linii

Staraj się nie tworzyć linijek kodu dłuższych niż 80 znaków. Ułatwia to czytanie kodu. Jeśli widzisz, że jesteś już w okolicach tej wartości, oczywiście będziesz to robił na wyczucie – nikt nie wymaga od Ciebie sprawdzania ile konkretnie masz znaków w każdej linijce, po prostu złam tę linię. Najlepsze miejsce do tego jest zaraz po operatorze albo kropce.

Ładowanie skryptów

Skrypty tak jak już wspominałem zawsze powinny znajdować się w oddzielnych plikach .js . W celu załadowania ich do dokumentu HTML musimy skorzystać ze script. Nie podajemy jednak atrybutu type.

Rozszerzenia plików

Pliki HTML zawsze zapisuj pod .html a nie .htm, pliki CSS pod .css a JS pod .js.

Nazewnictwo plików

Większość serwerów jest czuła jeśli chodzi o wielkość znaków także pamiętaj, żeby również tutaj trzymać się ściśle określonej konwencji w celu uniknięcia 404. Ja osobiście również i w tym przypadku używam camelCase co znacznie ułatwia mi sprawę bo pisząc już sam kod nie muszę zastanawiać się “A ten plik nazwałem, z małej czy z dużej? Jaką wielkość miała litera drugiego wyrazu w nazwie?”, wpisuję nazwę pliku automatycznie z przyzwyczajenia.

Dobre praktyki

Zakres i definiowanie zmiennych

Zawsze kiedy tylko jest to możliwe powinniśmy unikać stosowania globalnych zmiennych. Powinny one być na tyle lokalne na ile się da w celu uniknięcia konfliktów nazewniczych z innymi skryptami stosowanymi na stronie co mogłoby zaburzyć działanie nie tylko naszego skryptu. Wszystkie te lokalne zmienne powinniśmy natomiast deklarować na samej górze lokalnego zakresu. Pozwoli to na czyściejszy kod, szybkie spojrzenie na wykorzystywane lokalne zmienne i chociażby uniknięcie nadpisania.

Dobrą praktyką jest również natychmiastowa definicja a więc przypisanie wartości tym zmiennym kiedy je deklarujemy. Pamiętaj również żeby przy definiowaniu liczb, ciągów znaków czy wartości logicznych używać literałów odpowiednich obiektów a nie ich konstruktorów.

Używaj ===

Operator === w przeciwieństwie do == porównuje typ i wartość dwóch zmiennych które porównujemy. Ten drugi natomiast stosuje konwersje i dopasowuje sobie dla własnej wygody typy. Więc jeśli chcesz mieć dokładne, bezwzględne porównanie stosuj operator ===.

Wartości domyślne

Pamiętaj, żeby zawsze definiować wartości domyślne parametrów funkcji, gdyż w przeciwnym wypadku przyjmą one wartość undefined.

Używaj default

Kiedy stosujesz składnię switch pamiętaj, żeby oprócz pożądanych przez Ciebie case’ów zdefiniować również blok default na końcu switch. Pozwoli to na ewentualną obsługę nieprzewidzianych przez Ciebie wartości i może uchronić skrypt przed wyrzuceniem błędu.

Unikaj stosowania eval()

Funkcja eval() pozwala na wykonywanie kodu podanego jej jako argument w formie zwykłego tekstu. Nie jest to konieczne w znacznej większości przypadków więc i stosowanie tej funkcji nie jest zalecane głównie ze względów bezpieczeństwa.

Wydajność

Kiedy tworzysz duży projekt jest to z pewnością kwestia do której przyłożysz wagę. Dzięki temu napisany przez Ciebie kod będzie działał szybciej i mniej obciążał maszynę na której jest wykonywany co z pewnością przełoży się na zadowolenie z używania go.

Ograniczaj się w pętlach

Pętle to z pewnością jedne z najczęściej stosowanych struktur jeśli chodzi o tworzenie oprogramowania, dobrze by więc było aby działały jak najszybciej zwłaszcza, że najczęściej wykonują się całkiem sporą ilość razy. Żeby osiągnąć taki efekt dobrze się zastanów jaki kod powinien być w pętli a jaki można wyrzucić na zewnątrz bo wtedy możesz zaoszczędzić wykonanie go nawet setki razy co z pewnością przełoży się na wydajność. Najprostszą optymalizacją pętli jest wyciągnięcie definicji jej indeksu i maksymalnej jego wartości przed pętle.

Zredukowanie odwoływania się do DOM

Odwoływanie się do DOM jest niezwykle wolną i zasobożerną operacją w przeciwieństwie do innych wykonywanych w JS. Jeśli wiesz, że będziesz odwoływał się do konkretnego elementu DOM wielokrotnie lepiej odwołaj się raz, zapisz go do zmiennej lokalnej i dalej pracuj już na niej.

Unikaj niepotrzebnych zmiennych

Nie twórz nowych zmiennych jeśli tak naprawdę nie masz zamiaru trzymać w nich przez dłuższy czas kodu. Często kod taki jak ten:

na taki jak ten:

Praca domowa

Przejrzyj swoje dotychczasowe prace domowe i wprowadź do nich poprawki optymalizacyjne opisane w tym artykule.