Naprawianie długich funkcji

https://aie24.pl/

Funkcja startNewGame() ma więcej niż jedno zastosowanie. Obecnie resetuje zmienne globalne, resetuje siatkę kółka i krzyżyka, wysyła wiadomość do interfejsu API OpenAI, aby nakazać mu rozpoczęcie nowej gry, i zapisuje odpowiedź serwera na ekranie przed zwróceniem odpowiedzi. Poprosiłem czat Copilot o naprawienie funkcji startNewGame(), aby nie miała zbyt wielu zadań. Rozwiązaniem, z którym się zwrócił, było podzielenie startNewGame() na trzy funkcje, ale jego rozwiązanie odrzuciło najważniejszą część funkcjonalności startNewGame(), czyli rozpoczęcie nowej gry. Następnie zadałem to samo pytanie GPT-4, który dał mi znacznie lepszą sugestię, jak rozdzielić funkcję. Kod wygenerowany przez GPT-4 dla startNewGame() po prostu wywołuje trzy inne funkcje, takie jak ta:

async startNewGame() {

this.resetGameState();

this.clearBoardDisplay();

await this.postNewGameMessage();

}Jeśli jeden model językowy nie daje oczekiwanych rezultatów, wypróbuj inny. Jeśli żaden z nich nie pomaga, być może musisz zmienić polecenie lub podzielić zadanie na mniejsze części.

Redukcja danych globalnych

https://aie24.pl/

Propozycja Copilota dotycząca wyeliminowania danych globalnych polega na hermetyzacji danych i funkcjonalności gry w klasie. Zapewnia nawet niezbędny kod, abym mógł sam zacząć implementować to rozwiązanie, jak pokazano na rysunku .

 Jednak sugestia Copilota nie była do końca słuszna, ponieważ nie uwzględniała faktu, że funkcja startNewGame() musi być funkcją asynchroniczną. Jednak podczas implementacji rozwiązania, zaczęło się od sugerowania poprawnego kodu dla funkcji startNewGame(), jak pokazano na rysunku

Po zobaczeniu początkowego kodu Copilota, nabrałem zbyt dużej pewności siebie i ostatecznie zaufałem i zaakceptowałem każdą z sugestii Copilota, aby sprawdzić, czy poprawnie przepisze program jako klasę. Nie zrobił tego.

Przywróciłem mój ostatni znany działający kod i spróbowałem ponownie, ale tym razem wyłączyłem Copilota i samodzielnie wykonałem konwersję do klasy.

Celowo popełniam tutaj błędy, abyś Ty nie musiał! Dokładnie sprawdzaj każdą sugestię od GenAI i nie akceptuj sugestii w ciemno bez zrozumienia i zatwierdzenia.

Usuwanie magicznej liczby

https://aie24.pl/

Po swojej odpowiedzi dotyczącej nasłuchiwaczy zdarzeń Copilot wygenerował następujące pytanie kontrolne:

Jak mogę przebudować kod, aby usunąć magiczną liczbę?

Zgadzam się z Copilotem, że naprawienie tego problemu byłoby dobrym pomysłem. Aby zobaczyć, jakie rozwiązanie wygeneruje Copilot, kliknąłem sugerowany monit. Odpowiedź Copilota wydaje się rozsądna, jak pokazano na rysunku .

Wdrożyłem rozwiązanie i teraz mogę przejść do następnego problemu.

Prawidłowe ustawienie nasłuchiwaczy zdarzeń

https://aie24.pl/

Proszenie AI o pomoc w poprawnym ustawieniu nasłuchiwaczy zdarzeń stanowi problem, podejrzewam, że jest to ten sam powód, dla którego AI nie oznaczyła tego jako problemu na początku. Problem polega na tym, że ta refaktoryzacja będzie obejmować zmiany w więcej niż jednym pliku. Copilot bierze pod uwagę inne pliki podczas generowania sugestii dla pliku, nad którym obecnie pracujesz, ale może nie sugerować zmian w innych plikach w celu rozwiązania problemu w bieżącym pliku. Wiem, jak podszedłbym do rozwiązania tego problemu, ale chcę zobaczyć, jak Copilot podszedłby do problemu. Mając otwarty index.html w VS Code i plik JavaScript otwarty w innej karcie, wyświetlam Copilot Chat następujący komunikat:

Jak mogę ustawić nasłuchiwacze zdarzeń wewnątrz pliku script.js, a nie wewnątrz kodu HTML?

Część odpowiedzi zawierająca kod, pokazana na rysunku , to dokładnie to, czego potrzebowałem.

Wdrożyłem sugestię. Mój program nadal działa zgodnie z oczekiwaniami, więc sprawdzam swój kod w repozytorium i jestem gotowy, aby przejść do następnego problemu. Tak jak może być korzystne zapytanie innego programisty, jak podszedłby do problemu, na który już masz odpowiedź, tak samo podpowiadanie AI może czasami dać ci inną perspektywę lub zwrócić twoją uwagę na coś nowego.

Generowanie sugestii refaktoryzacji

https://aie24.pl/

Po znalezieniu problemów w kodzie, które wymagają refaktoryzacji, następnym krokiem jest ustalenie, co z nimi zrobić. Oto aktualna lista potencjalnych problemów wykrytych przez Copilot w grze w kółko i krzyżyk:

»»Długa funkcja

»»Magiczne liczby

»»Niespójne nazewnictwo

»»Brak komentarzy

»»Dane globalne

Oprócz tych problemów, innym problemem, z którym chcę się uporać, a który nie został oznaczony przez Copilot, jest to, że nasłuchiwacze zdarzeń są ustawiani za pomocą wbudowanych nasłuchiwaczy zdarzeń w pliku HTML. Chociaż to podejście działa, najlepszą praktyką jest ustawianie nasłuchiwaczy zdarzeń w JavaScript za pomocą funkcji addEventListener(). Kilka z tych problemów się pokrywa. Na przykład problem z magiczną liczbą (gdzie trudność jest ustawiona na 10 na początku kodu) jest powiązany z brakiem komentarzy (komentarz może wskazywać, co mam na myśli mówiąc trudność i 10). Zajmę się jednak każdym problemem niezależnie i zobaczę, jakie sugestie ma Copilot Chat, aby je naprawić.

Bezpieczne refaktoryzowanie

https://aie24.pl/

Refaktoryzacja kodu może potencjalnie powodować nowe problemy. Z tego powodu ważne jest, aby postępować powoli i ostrożnie oraz aby zachować odpowiednie kopie zapasowe w każdym momencie procesu, aby można było cofnąć swoją pracę. Najlepszym sposobem na zachowanie historii wprowadzanych zmian jest użycie systemu kontroli wersji, aby wprowadzać zmiany w kodzie w nowej gałęzi repozytorium i w pełni testować kod po wprowadzeniu zmian i przed scaleniem go z główną gałęzią repozytorium.

Wykrywanie zapachów kodu za pomocą Copilot

https://aie24.pl/

Zazwyczaj zapachy kodu są identyfikowane podczas procesu zwanego przeglądem kodu. W tej sekcji używasz AI do przeprowadzenia szybkiego przeglądu kodu. Często zdarza się, że kod generowany przez AI zawiera złe praktyki kodowania i zapachy kodu. Ponieważ asystenci kodu AI tak naprawdę nie wiedzą, jak kodować, każdy błąd popełniony w ich danych treningowych może pojawić się w odpowiedzi na Twoje monity dotyczące kodowania. Pozytywną stroną jest jednak to, że duże modele językowe mają również informacje o tym, jak poprawnie kodować, nawet jeśli nie zawsze robią to same. Jednym ze sposobów użycia AI do sprawdzania zapachów kodu jest użycie funkcji czatu GitHub Copilot. Wykonaj następujące kroki:

  1. Otwórz kod, który chcesz sprawdzić w VS Code, wraz z wszelkimi powiązanymi plikami (oraz SRS, jeśli taki posiadasz). Użyję gry w kółko i krzyżyk.
  2. Kliknij ikonę czatu w lewym panelu VS Code. Pojawi się okno czatu Copilot.
  3. Wprowadź następujący monit w Copilot Chat:

Czy ten program zawiera jakieś zapachy kodu?

Wymień je i wyjaśnij.

W odpowiedzi na mój monit Copilot zwraca listę trzech podejrzanych kodów, które według niego mogą być obecne w grze w kółko i krzyżyk:

»»Liczba magiczna: Program ustala wartość początkową poziomu trudności za pomocą następującego polecenia:

let difficulty = 10;

Copilot ma rację, mówiąc, że jest to magiczna liczba.

»»Długa funkcja: Copilot sugeruje, że funkcja startNewGame() może być długą funkcją, ponieważ wykonuje kilka czynności. Ponownie, Copilot ma rację.

»»Dane globalne: Na początku programu deklarowanych jest kilka zmiennych globalnych. Program można uczynić bardziej odpornym, deklarując je w funkcji lub klasie.

Pełną początkową reakcję drugiego pilota pokazano na rysunku .

Dodatkowe kategorie zapachów kodu

https://aie24.pl/

Oprócz zapachów kodu, które właśnie opisaliśmy, istnieje wiele innych kategorii zapachów kodu, o których powinieneś wiedzieć, w tym:

»»Dane globalne: Mitem jest, że wszystkie dane globalne są zapachem kodu, ale obecność dużej ilości danych w zakresie globalnym może wskazywać na poważniejszy problem. Zmienne globalne są przyczyną innych zapachów kodu.

»»Liczba magiczna: Liczba magiczna jest zakodowana na stałe w programie i trudna do rozszyfrowania dla kogokolwiek poza twórcą oprogramowania.

»»Niespójna nazwa: Należy stosować konwencje dotyczące nazywania rzeczy takich jak funkcje, klasy i zmienne. Konwencje, których używasz, nie mają tak dużego znaczenia jak spójność.

»»Niekomunikatywna nazwa: Bezsensowne nazwy zmiennych są łatwym do uniknięcia zapachem kodu, jeśli poświęcisz czas na zdefiniowanie zmiennych. Dobrą praktyką jest zawsze nazywanie zmiennych przy użyciu wielu słów. Na przykład nazwa jest śmierdzącą nazwą zmiennej, ale imięNazwa jest o wiele bardziej komunikatywne.

»»Typ osadzony w nazwie: Przykłady nazw zmiennych, które wykazują ten typ zapachu, to amountInt i priceInt. Ta zła praktyka może prowadzić do kodu, który trudno zmienić. Na przykład, jeśli używasz tych nazw zmiennych w aplikacji dla sklepu z kanapkami, co się stanie, gdy właściciel sklepu zdecyduje się zacząć sprzedawać połówki kanapek lub podniesie cenę o 25 centów? Możesz po prostu zaktualizować typ zmiennej, aby umożliwić użycie miejsc dziesiętnych, ale aktualizacja każdej instancji nazwy zmiennej w programie może wymagać zmian w wielu różnych miejscach.

Przeszkody w zmianie

https://aie24.pl/

Przeszkody w zmianie to zapachy, które utrudniają zmianę. Przykłady przeszkodników w zmianie to

»»Zmiana rozbieżna: Ten zapach pojawia się, gdy klasa wymaga wielu zmian w odpowiedzi na zmiany poza nią.

»»Operacja typu shotgun: Ten zapach pojawia się, gdy wiele klas wymaga małych zmian w odpowiedzi na zmianę.

 

Sprzęgacze

https://aie24.pl/

Sprzęgacze to zapachy kodu, które pojawiają się, gdy kod jest zbyt ściśle współzależny. Zbyt ścisłe sprzęganie oprogramowania utrudnia jego zmianę w przyszłości. Przykłady sprzęgaczy obejmują:

»»Niewłaściwa intymność: W tym sprzęgu metoda jest zbyt zależna od szczegółów implementacji innej metody lub klasy.

»»Nieprzyzwoite ujawnienie: Nieprzyzwoite ujawnienie ma miejsce, gdy klasa ujawnia swoje wewnętrzne szczegóły, naruszając zasadę enkapsulacji.

»»Zazdrość o cechy: Metoda, która uzyskuje dostęp do danych innego obiektu w większym stopniu niż do swoich własnych, jest nazywana zazdrością o cechy.

»»Łańcuch wiadomości: Łańcuch wiadomości ma miejsce, gdy jeden obiekt żąda innego obiektu, który żąda innego itd. Łańcuchy wiadomości mogą tworzyć niepotrzebne zależności między obiektami.

»»Pośrednik: Pośrednik to klasa, która istnieje tylko po to, aby delegować pracę do innej klasy. W takim przypadku należy rozważyć wyeliminowanie pośrednika.