Ovo je težnja razvoju html/js sučelja, odvajanja html od js koda.
Mislim da se temelji na načelu “separation of concerns”.
Upoznao sam prvi put stime u Flexu i kod razvoja RIA sučelja u njemu.
Otkad sam počeo primjenjivati sličan pristup u HTML/JS razvoju stvari su mi postale puno lakše, preglednije i u samoj konačnici imam osjećaj da stvarno mogu kontrolirati sučelje sa JS.
No za razliku od Flexa koji da bi se izradilo sučelje se mora kompajlirati u swf file, kod HTML to nije potrebno.
To otvara moguće propuste jer dizajner može izmjeniti html kod, ime klase, id, pa čak i promjeniti raspored HTML i postojeći JS kod neće raditi kako treba jer CSS selektor engine neće neće moći pronaći postojeće elemente na temelju uvijeta koji postoje u JS kodu.
Taj problem Flex nema jer kod neće biti ispravan i kompajliranje neće proći kako spada, zatim svaki element mora imati jedinstveni ID prema kojim se raspoznaje od drugih.
Toga svega nema u HTML/JS kombinaciji a jedini način kako kvalitetno doskočiti tome jest da se dizajnera upozori da ne petlja “previše” u HTML jer JS neće raditi.
Dali postoje neka rješanja kako doskočiti kvalitetno tome problemu?
Zadnje vrijeme si razmišljam da bi se rješenje za gore navedeni problem moglo osigurati koristeći frameworke i template engine.
Idealno za tako nešto bi bio PRADO framework koji ima svoj template engne, u njemu su HTML elementi kontrole, koje imaju jedinstveni ID.
JS je dobrim dijelom odvojen od HTML i postoje temelji za tako nešto.
Zatim rješenje bi moglo biti koristeći dodatni atribut, koji bi se zvao js_id ali opet pitanje jeli moguče izgraditi sučelje koje bi moglo koristiti samo taj jedan atribut za selektiranje odnosno dali trenutačno postoji dosta jak selektor engine koji bi mogao na takav način funkcionirati, samo na temelju jednog id.
Ponekad se traži div.id, da bi uspjeli doći do željenog elementa i sl.
Napisati dobar JS kod koji ništa ne podrazumijeva. npr. uvijek će provjeriti da li element postoji prije nego ide raditi nešto nad njime. Osim provjere elemenata, ne treba niti štediti na “try/catch” i svaku grešku lijepo ispisivati u log.
Provjeriti JS nekim od automatskih JS testera
Ovakva kombinacija ima veliku šansu otkriti grešku brzo i detaljno i mislim da se može usporediti sa kompajliranjem Flexa. Također je važna i komunikacija između dizajnera i JS kodera, a osobito u produkciji neće škoditi ako html bude pun komentara koji će objašnjavati čemu služi pojedini element.
//jquery
if ($("#mojdiv").length > 0){
// nešto sa #mojdiv
}
else{
alert('Alo majstore! #mojdiv, za razliku od tebe, služi nečem korisnom!');
}