Osm pravidel pro vkládání JavaScriptu do šablony
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.
Komentáře k článku:
Absolutná cesta vrz. relatívna cesta .Nech sa darí.1.
<link rel="stylesheet" href="http://mike.treba.cz/css/style.css" type="text/css" media="screen" />
2.
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
Iné otázky :)
1.
Ako to vidíš so zápisom CSS. Je vhodnejšie narvať všetko do jedneho súboru alebo (pre vlastné potreby - prehladnosť) to môže byť v X samostatných CSS-kach.2.
Je rozdiel medzi importom viacerých štýlov do jedného CSS a priamou definíciou CSS-jek v hlavičke?Sú to somarinky (v kontexte s rýchlosťou načítania a spracovanie JS) ale zaujímalo by ma čo považuješ za najkorektnešie (relatívne najrýchlejšie) pre prehliadače.Ďakujem
Pre mňa je oveľa pohodlnejšie, ak mám viacero CSS súborov,ich naimportovať do jedného CSS.Mrkni si ako mam riešené menu na projekte http://www.noving.sk/.
Mám tam naimportovaný defaultný štýl pre menu a potom konkrétnu šablónu menu.style_menu.css
- @import url('menu_default.css');
- @import url('menu_style_02.css');Nemám pocit, že by to bolo pomalé.
Následne som schopný meniť štýl menu cez jquery zmenou
<ul class="dropdown style01"> na
<ul class="dropdown style02">
v prikladech obvykle pouzivas jQuery (hadam dle tech selektoru), ale pokud clovek takove "pracovniramec" nepouziva jde nastavit udalosti i klasicky :-)var el = document.getElementById("identifier");
el.onclick = function () { alert("Hell-o"); }
el.onmouseover = function .......a vsechny ostatni :-)
Přidat komentář