css, fejlesztés, javascript, mvc

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.
  1. 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.
  2. 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.

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.
  1. 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.
  2. 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.
• Ö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.

Ez a bejegyzés rrd billentyűzetéből potyogott ki 2007 október 18. napján 00:37:11-kor. Eddig 1,392 olvasást ért meg. A visszajelzéseket nyomonkövetheted ezzel az RSS feed-el. Véleményt nyilváníthatsz, vagy trackbackolhatsz a saját oldaladon.