Osm pravidel pro vkládání JavaScriptu do šablony

 |  HTML, CSS, JavaScript  |  252 788x
_

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.

Facebook Twitter Google+

Komentáře k článku "Osm pravidel pro vkládání JavaScriptu do šablony"

Gravatar
Milan 10. 5 2010, 12:23
1/10 Pondělí 10. Května 2010, 12:23  |  Chrome, Windows XP

Čo si myslíš o zápise v hlavičke (dole)?
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" />

Gravatar
Mike 10. 5 2010, 12:54
2/10 Pondělí 10. Května 2010, 12:54  |  Opera, Windows Vista

@: 1) ano, 2) ne. Jde o to, že pokud máš web ještě i na lokalu v podadresáři, lomítko ti bude odkazovat do rootu, i když web bude běžet např. na url "http://localhost/blog/". Tudíž si tam vždy raději vytisknu proměnnou $root, kde mám absolutní url projektu.

Tudíž lepší otázka je, zda-li absolutní adresa nebo relativní spolu s elementem <base>. I zde je ale lepší absolutní cesta, protože některé služby, které ti dokážou zobrazit vycuclou stránku (například když postuješ článek na Linkuj) nerozpoznají <base href="">, tudíž si např. nevytáhnou obrázky, které by si jinak vytáhly.

Gravatar
Milan 10. 5 2010, 21:39
3/10 Pondělí 10. Května 2010, 21:39  |  Chrome, Windows Vista

Je to trochu hlúpa otázka , ale nie je načítanie z absolutnej adresy "pomalšie"?
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

Gravatar
Mike 11. 5 2010, 09:01
4/10 Úterý 11. Května 2010, 09:01  |  Opera, Windows Vista

@: Hloupá otázka to určitě není, spousta lidí to řeší :-) Je potřeba si ale uvědomit, že všechny relativní adresy jsou přeloženy výstupním zařízením do své absolutní podoby: ať již problížečem nebo robotem. Takže je to fuk. Platí samozřejmě v rámci jedné domény.

@import je středověký hack pro Internet Explorer, navíc by měl být sám o sobě pomalejší. Navíc nezapomeň na to, že request na 3 malé CSS soubory je pomalejší, než na jeden velký. (U obrázků je to něco jiného). Pokud bych měl rozdělovat styly, rozdělím si je podle sekcí webu: například nákupní proces by měl svoje CSS, načítalo by se jen tam. Rozhodně nedoporučuji dávat zvlášť třeba hacky.

Gravatar
Milan 11. 5 2010, 12:38
5/10 Úterý 11. Května 2010, 12:38  |  Chrome, Windows XP

Nemyslím si, že by @import bol zastaralý a potrebný len pre hackovanie IE.
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">

Gravatar
Mike 11. 5 2010, 13:15
6/10 Úterý 11. Května 2010, 13:15  |  Opera, Windows Vista

@: Teď už řešíme věci, které jsou hodně individuální. S tím @importem si nejsem úplně jistý, ale vím, že jsem o tom někde četl. Sám nemám rád zbytečné rozdělování stylů do více CSS souborů. Pokud už mám 2 úplně jiné styly, budu mít i dva soubory - bude je ale volat až z šablony - když bych chtěl pouze měnit vzhled menu, dám to do jednoho souboru nejlépe hned pod sebe.

Tohle je už ale o zvyku a o názoru každého z nás, co je pro koho pohodlnější :-)

Gravatar
Milan 11. 5 2010, 17:50
7/10 Úterý 11. Května 2010, 17:50  |  Chrome, Windows Vista

Díkes za dobrý pokec.

Gravatar
Honza 15. 6 2010, 14:59
8/10 Úterý 15. Června 2010, 14:59  |  MSIE, Windows XP

Podle mě není ani jeden z odkazů správně. Adresa odkazu by měla směřovat na verzi fungující i bez podpory javascriptu...

<a href="php-funkce.php" onclick="js-funkce(); return false;">odkaz</a>

Přestože mi příjde, že se autor trochu povyšuje, jsou zde i některé zajímavé postřehy. Například s těmi externími scripty v patičce...

Gravatar
Petr Kramar 18. 2 2011, 21:31
9/10 Pátek 18. Února 2011, 21:31  |  Firefox, Linux

Ahoj Miku...,
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 :-)

Gravatar
Mike 19. 2 2011, 15:29
10/10 Sobota 19. Února 2011, 15:29  |  Opera, Windows XP

@: Díky za doplnění, samozřejmě máš pravdu :-)

Přidat komentář







Nevím, kolik to je
Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua