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.