Refaktoryzacja kodu JS

Question

Chciałbym zrefektoryzowac ten kod, ale nie wiem, od czego zacząć ma ktoś może sugestie co można by w nim poprawic i jakie IDE polecacie do refaktoryzacji aktualnie pisze w Atomie? KOD 

 

Answer 1

• Na pewno wypada wywalić wszystkie zmienne globalne. Najlepiej byłoby zrobić z tego pełnoprawne moduły.
• Funkcje robią za dużo. Np. funkcja splitingWord (nawiasem mówiąc powinna się nazywać splitWord) powinna dostawać słowo jako parametr i nie powinna mieć pojęcia o tym, skąd ono pochodzi. Dodatkowo zapisywanie czegokolwiek do localStorage to już zadanie innej funkcji. Funkcja do dzielenia słowa na części powinna dostać to słowo, podzielić je i zwrócić podzielone – tylko tyle.
• Dodatkowo komentarze są całkowicie niepotrzebne. Jeśli komentarz opisuje, co robi kod, to znaczy, że a) jest zbędny b) kod jest źle napisany, bo nie wiadomo, co robi.
• Ogólnie ta struktura danych jest jakaś dziwna. Mam wrażenie, że gdybyś użył wielowymiarowych tablic, to wówczas nie trzeba byłoby wgl kzombinować z dzieleniem słów.
• randomNumberGenerator ma podejrzanie dużo wcięć. Przemyślałbym jeszcze raz cały algorytm.
• Funkcje powinny się raczej nazywać czasownikowo, czyli splitWord, generateRandomNumber itd. Taka jest ogólnie przyjęta konwencja.
• Sporo zmiennych jest deklarowana przy pomocy let, mimo że ich wartość się nie zmienia w trakcie życia programu.

Comments

Ok dzieki za rady

---

@Comandeer,
zgadzam sie ze wszystkim, tylko te komentarze mnie ciekawia. Sam czesto dodaje linijke komentarza, nawet jak kod jest jasny - lepiej mi sie to czyta, szybciej skanuje i uderzam w interesujaca czesc kodu. Oczywiscie pomijam malunki jak "////////////////////" ale czy proste opisowe komentarze sa rzeczywiscie tak niechciane?

---

@Comandeer,

Zacząłem już refaktoryzacje kodu i ma kilka pytan 

- Jak napisać taki krótki sensowny komentarz, który opisuje działanie funkcji ?

- Czym się różni let od consta (wiem ze let można zmieniać a consta nie) w takim sensie czy uzywanie constów jest bardziej wydajne czy cos innego ?

- Czy var powinno sie uzywac ?

- Jak moge pozbyc sie zmiennych globalnych? Moj kod opiera sie o Eventy i gdybym wlozył tam zmienna zerowała by sie za kazdym razem 

---

czy proste opisowe komentarze sa rzeczywiscie tak niechciane?

Są po prostu niepotrzebne. Po co pisać, że w danym miejscu jest obsługa eventów, skoro wynika to z samego kodu? Zamiast komentarzy lepiej wydzielić po prostu moduł odpowiedzialny za eventy.

Jak napisać taki krótki sensowny komentarz, który opisuje działanie funkcji ?

Pytanie po co Ci ten komentarz? Jeśli po to, by wiedzieć, co robi dany kod, to znaczy, że coś jest nie tak z kodem. Na kod powinno się móc spojrzeć i ogarnąć, co robi – choćby na podstawie opisowych nazw zmiennych i funkcji. Jeśli natomiast umieszczasz komentarz, bo wypada, to nie, nie wypada ;) Chyba że tworzysz dokumentację dla użytkowników.

Czym się różni let od consta (wiem ze let można zmieniać a consta nie) w takim sensie czy uzywanie constów jest bardziej wydajne czy cos innego ?

Tak po prawdzie to praktycznie niczym. Chodzi bardziej o to, że jak określasz coś jako const, to równocześnie dajesz sygnał, że nie masz zamiaru zmieniać przypisania do tej zmiennej.

Czy var powinno sie uzywac ?

Nie widzę powodu, by używać.

 Jak moge pozbyc sie zmiennych globalnych?

Jak mówiłem, wystarczy zrobić z tego moduł. Możesz też poczytać o IIFE.

---

@Comandeer,

- Nie rozumiem jeszcze na tyle JS, aby bez problemu stosować moduły. Wyjaśnisz mi jak można użyć ich w moim kodzie ?

- Oraz jak podzielić funkcje na mniejsze części np.: funkcje setingWord () ?

Nie wiem, od czego zacząć te refaktoryzacje czy mógłbyś pokazać mi na kawałku kodu jak można ja zrobić/zacząć ?

---

@Comandeer,
Rozumiem, czyli ja po prostu mam tak nieczytelny kod i nie mam jeszcze afganskiego widzenia, ze komentarze mi pomagaja, a prosi po prostu jada bez :)

Answer 2

W Visual Studio Code masz refaktoryzację (zaznaczasz potem ctrl + shift + r). Przenieś sobie funkcje do osobnego pliku, tak samo z eventami 'on click' :P