6.7 KiB

Raw Blame History

Zadatak refaktoriranja koda i dokumentacije

Ciljevi učenja

Izvršavanjem ovog zadatka, vježbat ćete ključne vještine razvoja softvera koje profesionalni programeri koriste svakodnevno. Naučit ćete organizirati kod radi lakšeg održavanja, smanjiti dupliciranje kroz apstrakciju i dokumentirati svoj rad za buduće programere (uključujući i sebe!).

Čist, dobro dokumentiran kod ključan je za stvarne projekte web razvoja gdje surađuje više programera, a kodne baze se s vremenom razvijaju.

Pregled zadatka

Datoteka app.js vaše aplikacije za bankarstvo značajno je narasla s funkcionalnostima prijave, registracije i nadzorne ploče. Vrijeme je da refaktorirate ovaj kod koristeći profesionalne prakse razvoja kako biste poboljšali čitljivost, održivost i smanjili dupliciranje.

Upute

Transformirajte trenutni kod u datoteci app.js primjenom ove tri ključne tehnike refaktoriranja:

1. Izvucite konfiguracijske konstante

Zadatak: Kreirajte sekciju za konfiguraciju na vrhu datoteke s višekratno upotrebljivim konstantama.

Smjernice za implementaciju:

Izvucite osnovni URL API-ja servera (trenutno je hardkodiran na više mjesta)
Kreirajte konstante za poruke o greškama koje se pojavljuju u više funkcija
Razmotrite izvlačenje putanja ruta i ID-ova elemenata koji se često koriste

Primjer strukture:

// Configuration constants
const API_BASE_URL = 'http://localhost:5000/api';
const ROUTES = {
  LOGIN: '/login',
  DASHBOARD: '/dashboard'
};

2. Kreirajte jedinstvenu funkciju za zahtjeve

Zadatak: Izgradite višekratno upotrebljivu funkciju sendRequest() koja eliminira duplicirani kod između createAccount() i getAccount().

Zahtjevi:

Obradite i GET i POST zahtjeve
Uključite odgovarajuće rukovanje greškama
Podržite različite URL krajnje točke
Prihvatite opcionalne podatke tijela zahtjeva

Smjernice za potpis funkcije:

async function sendRequest(endpoint, method = 'GET', data = null) {
  // Your implementation here
}

3. Dodajte profesionalnu dokumentaciju koda

Zadatak: Dokumentirajte svoj kod jasnim, korisnim komentarima koji objašnjavaju "zašto" iza vaše logike.

Standardi dokumentacije:

Dodajte dokumentaciju funkcija koja objašnjava svrhu, parametre i povratne vrijednosti
Uključite inline komentare za složenu logiku ili poslovna pravila
Grupirajte povezane funkcije zajedno s zaglavljima sekcija
Objasnite sve nejasne uzorke koda ili specifične prilagodbe za preglednike

Primjer stila dokumentacije:

/**
 * Authenticates user and redirects to dashboard
 * @param {Event} event - Form submission event
 * @returns {Promise<void>} - Resolves when login process completes
 */
async function login(event) {
  // Prevent default form submission to handle with JavaScript
  event.preventDefault();
  
  // Your implementation...
}

Kriteriji uspjeha

Vaš refaktorirani kod trebao bi pokazati ove profesionalne prakse razvoja:

Izvrsna implementacija

✅ Konstante: Svi "magic strings" i URL-ovi su izvučeni u jasno imenovane konstante
✅ DRY princip: Zajednička logika zahtjeva je konsolidirana u višekratno upotrebljivu funkciju sendRequest()
✅ Dokumentacija: Funkcije imaju jasne JSDoc komentare koji objašnjavaju svrhu i parametre
✅ Organizacija: Kod je logično grupiran s zaglavljima sekcija i dosljednim formatiranjem
✅ Rukovanje greškama: Poboljšano rukovanje greškama pomoću nove funkcije zahtjeva

Dovoljna implementacija

✅ Konstante: Većina ponovljenih vrijednosti je izvučena, s manjim preostalim hardkodiranim vrijednostima
✅ Faktorizacija: Osnovna funkcija sendRequest() je kreirana, ali možda ne obrađuje sve rubne slučajeve
✅ Komentari: Ključne funkcije su dokumentirane, iako neka objašnjenja mogu biti potpunija
✅ Čitljivost: Kod je općenito dobro organiziran s nekim prostorom za poboljšanje

Potrebna poboljšanja

❌ Konstante: Mnogi "magic strings" i URL-ovi ostaju hardkodirani u cijeloj datoteci
❌ Dupliciranje: Značajno dupliciranje koda ostaje između sličnih funkcija
❌ Dokumentacija: Nedostaju ili su neadekvatni komentari koji ne objašnjavaju svrhu koda
❌ Organizacija: Kod nema jasnu strukturu i logičko grupiranje

Testiranje refaktoriranog koda

Nakon refaktoriranja, osigurajte da vaša aplikacija za bankarstvo i dalje ispravno funkcionira:

Testirajte sve korisničke tokove: Registracija, prijava, prikaz nadzorne ploče i rukovanje greškama
Provjerite API pozive: Potvrdite da vaša funkcija sendRequest() radi za kreiranje i dohvaćanje računa
Provjerite scenarije grešaka: Testirajte s nevažećim vjerodajnicama i greškama mreže
Pregledajte izlaz konzole: Osigurajte da nisu uvedene nove greške tijekom refaktoriranja

Smjernice za predaju

Predajte svoju refaktoriranu datoteku app.js s:

Jasnim zaglavljima sekcija koje organiziraju različite funkcionalnosti
Dosljednim formatiranjem i uvlačenjem koda
Potpunom JSDoc dokumentacijom za sve funkcije
Kratkim komentarom na vrhu koji objašnjava vaš pristup refaktoriranju

Bonus izazov: Kreirajte jednostavnu datoteku dokumentacije koda (CODE_STRUCTURE.md) koja objašnjava arhitekturu vaše aplikacije i kako različite funkcije međusobno djeluju.

Povezanost s stvarnim svijetom

Ovaj zadatak odražava vrstu održavanja koda koju profesionalni programeri redovito obavljaju. U industrijskim okruženjima:

Pregledi koda ocjenjuju čitljivost i održivost, kao u ovom zadatku
Tehnički dug se akumulira kada se kod ne refaktorira i dokumentira redovito
Suradnja tima ovisi o jasnom, dobro dokumentiranom kodu koji novi članovi tima mogu razumjeti
Ispravci grešaka su mnogo lakši u dobro organiziranim kodnim bazama s odgovarajućim apstrakcijama

Vještine koje ovdje vježbate - izvlačenje konstanti, eliminacija dupliciranja i pisanje jasne dokumentacije - temeljne su za profesionalni razvoj softvera.

Odricanje od odgovornosti:
Ovaj dokument je preveden pomoću AI usluge za prevođenje Co-op Translator. Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.

6.7 KiB Raw Blame History