Egyre gyakrabban beszélnek a webfejlesztők a JavaScript és a CSS diszkrét alkalmazásáról és annak kétségtelen előnyeiről. Az érem másik oldaláról viszont nem sokat lehet hallani, vagyis ennek a megközelítésnek a korlátairól, hátrányairól.
Megjegyzés: a diszkrét JS példákban a prototype keretrendszer metódusai vannak használva.
Diszkrét JavaScript
A diszkrét (unobtrusive) JavaScript arról szól, hogy a JavaScriptet válasszuk le a webalkalmazások másik két rétegéről, a css-ről és magáról a html-ről. Ha úgy tetszik egy webalkalmazásra az MVC minta úgy illeszthető, hogy a html kód felel meg a Modelnek, a JavaScript a Controllernek és a CSS a View-nak. A magam részéről inkább a többrétegű MVC minta melett voksolok webalkalmazások esetében, de ez most nem befolyásolja a témánkat. Ez a gyakorlatban azt jelenti, hogy a (x)html kód nem tartalmaz semmiféle JavaScript elemet, magán a js file belinkelésén kívül.
Nem diszkrét példa
Ha szeretnénk, hogy egy linkre kattintáskor a böngésző ne kövesse a linket, hanem mondjuk egy ajax lekérést indítson el, akkor a nem diszkrét html kód így fog kinézni:
<a href="startvideo.html" onClick="startVideo();return false;">Start video</a>
És az ehhez tartozó JS
function startVideo(){ //mindenféle ügyes JS kód ami elindít egy videót }
Diszkrét példa
<a href="startvideo.html">Start video</a>
És az ehhez tartozó JS
function startVideo(e){ //mindenféle ügyes JS kód ami elindít egy videót if(e) Event.stop(e); return false; }
Előnyök
- A html kód tiszta, jól áttekinthető, mindenféle UA számára könnyen olvasható.
- Egyértelműen elkülönül a tartalom (Model) a viselkedéstől (Controller)
- Könnyebbé teszi a hibakeresést és fenntarthatóbb kódot eredményez
- Csökken a html mérete, kisebb a letöltendő adatmennyiség.
Hátrányok
- Egy egy html elem beazonosítása a JavaScript számára nem mindig egyszerű feladat.
- A DOM segítségével próbáljuk beazonosítani az adott linkünket, mint például
document.links[12]
. Ezzel az a bajunk, hogy a html változása (mint például beteszünk az oldalba egy új linket) befolyásolni fogja a JS működését. - Egyedi azonosítót adunk a html elemnek.
<a id="startvideo" href="startvideo.html">Start video</a>
Ezzel meg az a bajom, hogy némileg sérti a diszkréció elvét, mivel a html kódba bekerül egy olyan azonosító aminek semmi de semmi köze a tartalomhoz.
- A DOM segítségével próbáljuk beazonosítani az adott linkünket, mint például
Diszkrét CSS
A diszkrét CSS-ről már jóval ritkábban írkálnak, de a lényege ugyanaz mint a JS esetében, azaz, hogy pucoljunk ki minden olyan elemet a html-ből ami valójában csak arra szolgál, hogy az oldal megjelenítését befolyásolja a CSS-en keresztül. Magyarul az üldözendő elemek a class és az id. Ezeket kellene tiszta css hivatkozásokkal kiváltanunk.
Nem diszkrét példa
A html rész így néz ki:
<ul id="videok"> <li> <a class="menulink" href="startvideo.html">Start video</a> </li> </ul>
És a hozzá tartozó css pedig így:
.menulink{ color: red; backgroun-color: yellow; }
Diszkrét példa
Ha kipucováljuk a CSS-re utaló elemeket a html-ből ezt kapjuk:
<ul> <li> <a href="startvideo.html">Start video</a> </li> </ul>
A CSS-ünk pedig így fog kinézni:
ul > li > a{ color: red; backgroun-color: yellow; }
Előnyök
- A html kód tiszta, jól áttekinthető, mindenféle UA számára könnyen olvasható.
- Egyértelműen elkülönül a tartalom (Model) a kinézettől (View)
- Könnyebbé teszi a hibakeresést és fenntarthatóbb kódot eredményez
- Csökken a html mérete, kisebb a letöltendő adatmennyiség.
Hátrányok
- Egy egy html elem beazonosítása a CSS számára nem mindig egyszerű feladat.
- A DOM segítségével próbáljuk beazonosítani az adott linkünket, mint például
ul > li > a
. Ezzel az a bajunk, hogy például ezzel a módszerrel nem tudjuk megadni, hogy a páros sorszámú li-k ben más színűek legyenek a linkek mint a páratlanokban. - Egyedi azonosítót adunk a html elemnek.
<a id="startvideo" href="startvideo.html">Start video</a>
Ezzel meg az a bajom, hogy némileg sérti a diszkréció elvét, mivel a html kódba bekerül egy olyan azonosító aminek semmi de semmi köze a tartalomhoz.
- A DOM segítségével próbáljuk beazonosítani az adott linkünket, mint például
- Összetetteb és bonyolultabb lesz a CSS kód, azaz nem lesz könnyen átlátható. Egy éles alkalmazás esetén már biztosan kell alkalmaznunk valamilyen CSS értelmezőt / debuggert ha egy elem kinézetét meg kell változtatnunk. Szerencsénkre a Firebug CSS tab-ja pontosan erről szól, és gyerekjátékká teszi az ilyen fealadatokat.
- Növekedhet a css file mérete.
A szépség és a szörnyeteg
Van egymás alatt két ul listánk, és a másodikban szeretnénk beállítani a következőket:
- Az alapértemezett list-style-type: none helyett itt square legyen
- A li-k egymás melett legyenek
- Az első li elem nagybetűs legyen
- A többi li pedig piros
- Ha bármelyik linkre rákattintunk akkor egy alertben jelenjen meg annak a szövege.
A szörnyeteg
Html
<ul> <li>Góranga</li> </ul> <ul id="sorszamok"> <li class="sorszamli"> <a href="1.html" class="elso" onClick="alert(this.textContent);return false;">Első</a> </li> <li class="sorszamli"> <a href="2.html" class="altalanos" onClick="alert(this.textContent);return false;">Második</a> </li> <li class="sorszamli"> <a href="3.html" class="altalanos" onClick="alert(this.textContent);return false;">Harmadik</a> </li> </ul>
CSS
ul{ list-style-type: none; } ul#sorszamok{ list-style-type: square; } .sorszamli{ float:left; margin: 1em; } .elso{ text-decoration: none; font-variant: small-caps; } .altalanos{ color: red; }
JS
A JavaScriptünk beékelődött a html kódba, ezen kívül nincs más JavaScriptünk.
A szépség
Html
<ul> <li>Góranga</li> </ul> <ul id="sorszamok"> <li> <a href="1.html">Első</a> </li> <li> <a href="2.html">Második</a> </li> <li> <a href="3.html">Harmadik</a> </li> </ul>
Kiszereltünk minden class-t, JavaScriptet és egy kivételével minden id-t.
CSS
ul{ list-style-type: none; } ul#sorszamok{ list-style-type: square; } ul#sorszamok li{ float:left; margin: 1em; } ul#sorszamok > li:first-child a{ text-decoration: none; font-variant: small-caps; color: blue; } ul#sorszamok li a{ color: red; }
A Html változásait követve a CSS-ünk annyiban változik, hogy máshogyan hivatkozunk ugyanazokra az elemekre.
JS
function init(){ Event.observe(document, 'click', hey); } function hey(e){ if(e.target.nodeName == 'A'){ alert(e.target.textContent); Event.stop(e); return false; } } Event.observe(window, 'load', init);
JavaScriptünk már jelentősebb változáson ment keresztül. A méretnövekedésen nem kell túlságosan aggódnunk, mivel mind a CSS mind a JS a böngészők jóvoltából cacheelésre kerülnek, így csupán egyszer fognak letöltődni.
A tanulság
Szóval a diszkrét JavaScript és CSS igen hasznos szemléletmód, de nem feltétlenül implementálható teljes mértékben. Köztes megoldásként mondhatjuk azt, hogy ahol muszáj ott alkalmazzunk id-ket, és ezek segítségével valósítsuk meg a JS és CSS azonosításokat. Ha ügyesen összekombináljuk a fent leírtakat szép eredményeket érhetünk el, azaz átlátható és fenntartható kódot mindhárom rétegben.
Amiről most nem esett szó
Amiről most nem esett szó, de erősen kapcsolódik a témához, az az ajax deluxe alkalmazások fejlesztése. Ilyen fejlesztések esetén a diszkréció elvének ritka megsértése időnként megkönnyítheti, vagy meggyorsíthatja a munkánkat. Általános elvként ezeknél is maximálisan törekszem a diszkrécióra és csak jól indokolt esetekben térek el tőle.
Mennyire erős szerver kell az AJAX-hoz? Jól bírja a strapát? Az IWIW véletlenül nem hasonló megoldással él? Sokszor kapok valami
JAX error-t . . .
Forex: Az Ajax pont arról szól (egyrészt), hogy hogyan vegyünk le terhelést a szerverről, hiszen nem kell neki állandóan ugyanazokat az adatokat legyártania, hanem csak annak változó részeleteit.
Az iwiw-t meg ne említsd meg semmilyen szinten. Sok szempontból egy szörny. Ajax szempontból is az.