7.1 KiB

Raw Blame History

Refaktorování kódu a úkol dokumentace

Cíle učení

Splněním tohoto úkolu si procvičíte základní dovednosti softwarového vývoje, které profesionální vývojáři používají každý den. Naučíte se organizovat kód pro lepší udržovatelnost, snížit duplicitu pomocí abstrakce a dokumentovat svou práci pro budoucí vývojáře (včetně sebe!).

Čistý, dobře zdokumentovaný kód je klíčový pro reálné projekty webového vývoje, kde spolupracuje více vývojářů a kódové základny se časem vyvíjejí.

Přehled úkolu

Soubor app.js vaší bankovní aplikace se výrazně rozrostl díky funkcím přihlášení, registrace a dashboardu. Je čas tento kód refaktorovat pomocí profesionálních vývojářských postupů, aby se zlepšila čitelnost, udržovatelnost a snížila duplicita.

Pokyny

Přeměňte svůj aktuální kód app.js implementací těchto tří základních technik refaktorování:

1. Extrahování konfiguračních konstant

Úkol: Vytvořte konfigurační sekci na začátku souboru s opakovaně použitelnými konstantami.

Pokyny k implementaci:

Extrahujte základní URL serverového API (aktuálně je pevně zakódováno na několika místech)
Vytvořte konstanty pro chybové zprávy, které se objevují v několika funkcích
Zvažte extrahování cest k routám a ID prvků, které se opakovaně používají

Příklad struktury:

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

2. Vytvoření jednotné funkce pro požadavky

Úkol: Vytvořte opakovaně použitelnou funkci sendRequest(), která eliminuje duplicitní kód mezi createAccount() a getAccount().

Požadavky:

Zpracovávejte jak GET, tak POST požadavky
Zahrňte správné zpracování chyb
Podporujte různé URL endpointy
Přijímejte volitelná data těla požadavku

Pokyny k podpisu funkce:

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

3. Přidání profesionální dokumentace kódu

Úkol: Dokumentujte svůj kód jasnými, užitečnými komentáři, které vysvětlují "proč" za vaší logikou.

Standardy dokumentace:

Přidejte dokumentaci funkcí vysvětlující účel, parametry a návratové hodnoty
Zahrňte inline komentáře pro složitou logiku nebo obchodní pravidla
Seskupte související funkce dohromady pomocí záhlaví sekcí
Vysvětlete jakékoli nejasné vzory kódu nebo specifické úpravy pro prohlížeče

Příklad stylu dokumentace:

/**
 * 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...
}

Kritéria úspěchu

Váš refaktorovaný kód by měl demonstrovat tyto profesionální vývojářské postupy:

Vynikající implementace

✅ Konstanty: Všechny magické řetězce a URL jsou extrahovány do jasně pojmenovaných konstant
✅ Princip DRY: Společná logika požadavků je konsolidována do opakovaně použitelné funkce sendRequest()
✅ Dokumentace: Funkce mají jasné JSDoc komentáře vysvětlující účel a parametry
✅ Organizace: Kód je logicky seskupený s záhlavími sekcí a konzistentním formátováním
✅ Zpracování chyb: Zlepšené zpracování chyb pomocí nové funkce požadavků

Přiměřená implementace

✅ Konstanty: Většina opakovaných hodnot je extrahována, s drobnými pevně zakódovanými hodnotami
✅ Faktorizace: Základní funkce sendRequest() vytvořena, ale nemusí zpracovávat všechny okrajové případy
✅ Komentáře: Klíčové funkce jsou zdokumentovány, i když některá vysvětlení by mohla být podrobnější
✅ Čitelnost: Kód je obecně dobře organizovaný, s některými oblastmi pro zlepšení

Potřebuje zlepšení

❌ Konstanty: Mnoho magických řetězců a URL zůstává pevně zakódováno v celém souboru
❌ Duplicita: Významná duplicita kódu zůstává mezi podobnými funkcemi
❌ Dokumentace: Chybějící nebo nedostatečné komentáře, které nevysvětlují účel kódu
❌ Organizace: Kód postrádá jasnou strukturu a logické seskupení

Testování vašeho refaktorovaného kódu

Po refaktorování se ujistěte, že vaše bankovní aplikace stále funguje správně:

Otestujte všechny uživatelské toky: Registrace, přihlášení, zobrazení dashboardu a zpracování chyb
Ověřte API volání: Ověřte, že vaše funkce sendRequest() funguje jak pro vytvoření účtu, tak pro jeho načtení
Zkontrolujte scénáře chyb: Otestujte s neplatnými přihlašovacími údaji a chybami sítě
Projděte výstup konzole: Ujistěte se, že během refaktorování nebyly zavedeny žádné nové chyby

Pokyny k odevzdání

Odevzdejte svůj refaktorovaný soubor app.js s:

Jasnými záhlavími sekcí organizujícími různé funkce
Konzistentním formátováním a odsazením kódu
Kompletní JSDoc dokumentací pro všechny funkce
Stručným komentářem na začátku, který vysvětluje váš přístup k refaktorování

Bonusová výzva: Vytvořte jednoduchý soubor dokumentace kódu (CODE_STRUCTURE.md), který vysvětluje architekturu vaší aplikace a jak spolupracují různé funkce.

Spojení s reálným světem

Tento úkol odráží typ údržby kódu, kterou profesionální vývojáři provádějí pravidelně. V průmyslovém prostředí:

Revize kódu hodnotí čitelnost a udržovatelnost, stejně jako tento úkol
Technický dluh se hromadí, když kód není pravidelně refaktorován a dokumentován
Týmová spolupráce závisí na jasném, dobře zdokumentovaném kódu, kterému mohou noví členové týmu porozumět
Opravy chyb jsou mnohem jednodušší v dobře organizovaných kódových základnách s řádnými abstrakcemi

Dovednosti, které si zde procvičujete - extrahování konstant, eliminace duplicity a psaní jasné dokumentace - jsou základními prvky profesionálního softwarového vývoje.

Prohlášení:
Tento dokument byl přeložen pomocí služby AI pro překlady Co-op Translator. Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.

7.1 KiB Raw Blame History