Print this chapterPrint this chapter

Úloha 5 – Interaktivní kategorie produktů s přepínáním obsahu

Úvod do úlohy

Závěrečná část práce s DOM směřuje k tomu, aby studenti nejen rozuměli jednotlivým technikám manipulace s prvky, ale dokázali psát přehledný, efektivní a bezpečný kód. V praxi se často setkáme s projekty, kde je JavaScript neorganizovaný, obsahuje zbytečné opakování, přímé zásahy do stylů a nadbytečné operace nad DOMem. Takový kód bývá pomalý, obtížně udržovatelný a náchylný k chybám.

Cílem této kapitoly je naučit se optimalizovat práci s DOM, minimalizovat přepočty rozložení stránky (reflow) a zachovat jasnou strukturu kódu podle principů oddělení obsahu, stylu a logiky.

Teorie a principy

Minimalizace zásahů do DOM

Každý přístup nebo změna v DOM může způsobit tzv. reflow – přepočet pozic a rozměrů prvků. Pokud provádíme mnoho takových změn po sobě (například v cyklu), může dojít ke zpomalení celé stránky.

Základní zásady:

  • Měňte více prvků najednou pomocí DocumentFragment.

  • Vkládejte do DOM až hotové bloky místo jednotlivých uzlů.

  • Snažte se nepřistupovat zbytečně ke stejnému elementu opakovaně – uložte si ho do proměnné.

  • Místo přímého měnění stylů (element.style.color = "red") používejte CSS třídy a classList.

DRY princip (Don’t Repeat Yourself)

Duplicitní kód bývá hlavním zdrojem chyb.
Pokud se stejná akce provádí na více místech, zabalte ji do funkce a znovu použijte.

Příklad: místo tří identických posluchačů kliknutí můžeme vytvořit jedinou univerzální funkci, kterou voláme s parametrem.

Oddělení logiky, obsahu a stylu

Moderní webové aplikace dodržují zásadu:

  • HTML = struktura a obsah

  • CSS = vzhled

  • JavaScript = chování

Znamená to, že JavaScript by neměl obsahovat přímé definice stylů, ale měl by spíše měnit třídy nebo atributy. To udržuje kód přehledný a usnadňuje spolupráci mezi vývojáři.

Bezpečnost a čitelnost

  • Vyhýbejte se vkládání neověřeného obsahu pomocí innerHTML.

  • Používejte jasné názvy proměnných (např. btnOdeslat místo b1).

  • Přidávejte komentáře u méně zřejmých částí.

  • Kontrolujte, zda prvky existují, než s nimi pracujete.

Praktické příklady kódu

Příklad 1: Neefektivní verze

Příklad 2: Optimalizovaná verze s DocumentFragment

Příklad 3: Oddělení stylu od logiky

Tento přístup je přehlednější a umožňuje později měnit vzhled pouze v CSS bez zásahu do JavaScriptu.

Příklad 4: Použití pomocné funkce (DRY princip)

Typické chyby / záludnosti

  1. Zbytečné přístupy k DOM
    – Při každém volání document.getElementById() prohlížeč znovu prochází strukturu. Uložte si prvek do proměnné.

  2. Nadměrné úpravy stylů v kódu
    – Udržujte stylování v CSS. V JavaScriptu měňte jen třídy.

  3. Vkládání HTML bez kontroly
    – innerHTML je výkonný, ale může být nebezpečný. Používejte textContent, pokud nepotřebujete značky.

  4. Nepřehledná logika bez funkcí
    – Kód rozdělte do menších funkčních celků. Každá funkce by měla mít jasný účel.

  5. Ignorování výkonu při generování většího obsahu
    – Vždy zvažte využití DocumentFragment nebo dočasných proměnných.

Shrnutí

  • Optimalizujte manipulaci s DOM – méně změn, ale promyšleně.

  • Používejte DocumentFragment pro hromadné vkládání prvků.

  • Dodržujte zásady oddělení obsahu, stylu a logiky.

  • Dbejte na čitelnost, opakovanou použitelnost a bezpečnost kódu.

  • Vyhněte se duplicitám a používejte funkce podle DRY principu.

  • Každá změna v DOM by měla být záměrná, promyšlená a efektivní.