Tip pro efektivnější kód vašich stránek s jQuery

V minulém článku jsme probrali pár tipů, jak zrychlit stránky využívající jQuery. Dnes přidáme další návod. Jeho cílem bude pročištění HTML kódu stránek a jeho zmenšení pro rychlejší načítání a lepší SEO viditelnost. Podívejme se na následující kód:

<div class="fieldOuter">

<div class="inner">

<div class="field">Toto je pole číslo 1</div>

</div>
<div class="errorBar">

<div class="icon"><img src="icon.png" alt="icon" /></div>
<div class="message"><span>Toto je chybová hláška</span></div>

</div>

</div>

<div class="fieldOuter">

<div class="inner">

<div class="field">Toto je pole číslo 2</div>

</div>
<div class="errorBar">

<div class="icon"><img src="icon.png" alt="icon" /></div>
<div class="message"><span>Toto je chybová hláška</span></div>

</div>

</div>

Tolik ukázka kódu. Teď si představte, že uvedený formulář má mnohem více polí než uvedená dvě pole. Pak se nám zdrojový kód stránky pěkně natáhne. Nebylo by jednodušší napsat pouze toto:

<div class="field">Toto je pole číslo 1</div>
<div class="field">Toto je pole číslo 2</div>
<div class="field">Toto je pole číslo 3</div>
<div class="field">Toto je pole číslo 4</div>
<div class="field">Toto je pole číslo 5</div>

Ono to možné je, jen se musí přidat trošku jQuery kouzla:

$(document).ready(function() {

$('.field').before('<div class="fieldOuter"><div class="inner">'); $('.field').after('</div><div class="errorBar"><div class="icon"><img src="icon.png" alt="icon" /></div><div class="message"><span>Toto je chybová hláška</span></div></div></div>');

});

Uvedený postup nelze paušálně použít ve všech případech. Obecně se hodí tam, kde se v kódu opakují bloky stejného či podobného obsahu. Ty lze pak výrazně redukovat a kód doladit až po načtení dokumentu pomocí jQuery.

6 komentářů

  1. Martin Kopta napsal:

    Nešťastný příklad. Zobrazení chybové hlášky by nemělo být závislé na podpoře JavaScriptu. ;-)

    Jinak dobrý tip.

  2. Martin Kopta napsal:

    Nešťastný příklad. Zobrazení chybové hlášky by nemělo být závislé na podpoře JavaScriptu. ;-)

    Jinak dobrý tip.

  3. Hermit napsal:

    @Martin Kopta:
    – a jak vis Martine, ze se chybova hlaska nedogeneruje na serveru v pripade ze nema clovek JS?

  4. Hermit napsal:

    @Martin Kopta:
    – a jak vis Martine, ze se chybova hlaska nedogeneruje na serveru v pripade ze nema clovek JS?

  5. Karel Pavelka napsal:

    Opravdu nešťastný příklad použití, včetně HTML struktury.

  6. Karel Pavelka napsal:

    Opravdu nešťastný příklad použití, včetně HTML struktury.

NAPIŠTE KOMENTÁŘ