V dnešním článku se budu věnovat JavaScriptu úplně od začátku. Spousta začínajících vývojářů často chybuje v poměrně základních věcech, a tak bych rád uvedl některé z nich na pravou míru. Dodržování těchto pravidel vám pomůže dosáhnout čistého kódu, správné implementace složitých funkcí a naučí vás udržovat si pořádek v šablonách. Kromě tipů na nasazování vlastních či cizích knihoven uvedu i některé rady, jak předejít nepochopitelnému chování, na jehož řešení už bývá většinou pozdě, pokud nastane.

Vyhněte se načítání skriptů z externích domén

Jedinou výjimkou budiž Google Analytics. Teď ale nebudu mluvit o bezpečnosti (stále samozřejmě platí používat skripty pouze z ověřených zdrojů), ale o rychlosti renderování stránky. Může totiž nastat situace - a věřte mi, že nastává dost často, kdy daná doména se zrovna nenačte tak rychle, jak bychom potřebovali nebo má rovnou výpadek. Načítání stránky se zasekne na místě, kde se daný skript volá. Takže ve výsledku vidíme bílou stránku, u které sice lze zobrazit komplet načtený zdrojový kód, ovšem vykreslení se prostě kousne. Obecně také platí, že request na vzdálenou doménu je vždy pomalejší, než na vlastní.

JavaScriptové soubory nevkládejte do hlavičky, nýbrž do patičky

Ano, myslím to vážně. Pokud totiž používáme JavaScript tak, jak bychom měli, funkce a třídy voláme až po načtení celého DOMu. Tudíž nás nic nenutí tyto knihovny načítat hned jako první. Ušetřený čas se pak využije na rychlejší načtení stylů a obrázků, takže uživatel už může web začít zkoumat, než se mu během vteřiny zpřístupní funkce.

Nedávejte do odkazu mřížku, pokud očekáváte zavolání funkce na onclick

Špatně:

<a href="#" onclick="someFunction()">Odkaz</a>

Správně:

<a href="javascript:;" onclick="someFunction()">Odkaz</a>

Při využití mřížky v kombinaci s elementem <base> povede odkaz na úvodní stránku: pak vždy, když náhodou selže nebo se událost na onclick ještě nestihne zapsat nasměrujeme uživatele úplně pryč. Samotný atribut onclick tam samozřejmě také nemá co dělat, ale to bude předmětem hned dalšího bodu.

Omezte události onclick, onmouseover aj. na minimum

Špatně:

<a href="javascript:;" onclick="someFunction()">Odkaz</a>

Správně:

<a href="javascript:;">Odkaz</a>

$('#element a').click(function() {
	someFunction();
});

V ideálním případě veškeré inicializace vložíme do jednoho souboru, kde se všem prvkům přiřadí události. Výsledkem bude slušnější HTML kód a všechny přiřazené události na jednom místě. Důležité právě je mít všechny inicializace u sebe, protože v opačném případě v životě nedohledáme, kde se tyto operace dějí.

Omezte metodu getElementById

Metoda getElementById objektu document se špatně píše, nutí nás k závislosti na ID jednotlivých elementů a navádí nás ke zbytečnému nepořádku v kódu. Pokud máme například input přímo ve formuláři a na klik chceme s formulářem provést operaci, dostaneme se k němu krásně přes referenci na rodiče. Pakliže je mezi inputem a formem ještě fieldset, použijeme parentNode 2x.

Špatně:

document.getElementById('formular').submit();

Správně:

this.parentNode.submit();
$(this).parent().submit(); // jQuery

Nekombinujte frameworky

jQuery a Lightbox spuštěné přes sebe je bohužel poměrně častá věc. Pokud už mám na webu nasazený framework jQuery, hledám patřičná řešení pro něj. Namísto zmiňovaného Lightboxu existuje pěkná galerie Slimbox.

Nepoužívejte hotová řešení, která nejsou dostatečně zapouzdřená

Další častý problém, který se stává začátečníkům a se kterým si neví rady. Dvě JavaScriptové utility se bijí navzájem. Nejspíš proto, že si přepisují proměnné. Pokud nemáme danou knihovnu ve funkci nebo minimálně ve statickém objektu, je lepší se poohlédnout po vhodnějším řešení.

Pro třídy a jejich instance volte jiné názvy

Špatně:

var Form = new Form();

Co se stane: v případě, že proměnná Form bude globální, znemožníme si vytváření dalších instancí třídy: další zavolání new Form(); už nebude referovat na funkci Form(), ale na proměnnou window.Form, tudíž selže.