Unobtrusive Javascript

04.11.2008. 21:12:58 sagatavoja Māris Kiseļovs

Noformējumam ir jābūt atdalītam no satura! Lūk tieši tādēļ mums ir iespēja web-lapas HTML failā glabāt tikai strukturizētu saturu, bet CSS un JavaScript pārvietot uz atsevišķiem failiem.

Unobtrusive javascriptIeguvums ir ne tikai “tīrāks” lapas kods, kas atvieglo izstrādi un modificēšanu nākotnē, un ātrdarbību, bet tas ir arī pluss no SEO viedokļa, jo tādi meklētāji kā Google varēs vieglāk indeksēt saturu. Ar CSS viss ir vienkārši un skaidri - glabājam to atsevišķā failā un izvairāmies no “inline” stilu definēšanas (<div style=”…”).

Arī JavaScript var pilnībā atdalīt no lapas satura un ne tikai glabāt to atsevišķos failos, bet arī nelietot tādus event`us kā onclick, onmouseover, onload u.t.t. JavaScript web-lapā ir papildus funkcionalitāte un nedrīkst paļauties uz tā atbalstu lietotāja pārlūkprogrammā, jo tas var būt gan vienkārši atslēgts, gan izfiltrēts, gan netikt atbalstīts mobilajās ierīcēs.

Agrāk mēs to darījām šādi:
<a id="mylink" href="#" title="mylink" onmouseover="something(this);">...</a>

Bet pareiza pieeja šajā gadījumā ir izvairīties no onmouseover event`a (tā pat kā no jebkura cita) un atsevišķā javascript failā piemērot vajadzīgo papildus funkcionalitāti šim elementam:

document.getElementById('mylink').onMouseOver = function() {
// Kods, kurš izpildīsies pēc peles uzbīdīšanas uz saites
};

Šāda pieeja ir arī nesalīdzināmi parocīgāka, ja vēlamies pievienot papildus funkcionalitāti uzreiz vairākiem elementiem. Tad ir nepieciešams atrast visus šos elementus (piemēram, pēc klases nosaukuma) un piešķirt tiem izpildāmo kodu. Piemērs:

HTML:
<img src="img1.jpg" class="popupImg" alt="attēls1" />
<img src="img2.jpg" class="popupImg" alt="attēls2" />
<img src="img3.jpg" class="popupImg" alt="attēls3" />

JavaScript:
// Izpildam tikai pēc lapas ielādes
window.onload = function(){
// Atrodam visus elementus ar klasi "popupImg"
var nodes = getElementsByClass('popupImg');
for(i=0; i<nodes.length; i++) {
nodes[i].onclick = function() {
// Norādam kas notiks pēc onclick event`a:
alert(this.alt);
};
}
}

// Papildus f-ja, kas atgriež masīvu ar visiem vienas klases elementiem
function getElementsByClass( searchClass, domNode, tagName) {
if (domNode == null) domNode = document;
if (tagName == null) tagName = '*';
var el = new Array();
var tags = domNode.getElementsByTagName(tagName);
var tcl = " "+searchClass+" ";
for(i=0,j=0; i<tags.length; i++) {
var test = " " + tags[i].className + " ";
if (test.indexOf(tcl) != -1)
el[j++] = tags[i];
}
return el;
}


Raksts pārpublicēts no
webdev.gold.lv ar autora atļauju.


2 komentāri Komentēšana pieejama visiem.
Krišs (kriss@naivist.net) komentēja 04.11.2008. 23:01:54 (ip:78.84.212.117)
Komentāra reitings: 1

Par raksta ideju - ka nevajadzētu dinamisko kodu iešūt HTML struktūrās - pilnīga taisnība.
Vienīgi tas, ka dinamiskajam variantam ir divas problēmas.
1) Tiek gaidīts window.onload. Pirms tam nekas netiek darīts, tātad - DHTML skaistumi nedarbojas. Līdz ar to, ja, nedod Dievs, tiek gaidīts, kamēr ielādējas kāds banneris vai skaitītājs no kādas Poļu lapas, varam labu laiciņu vēl dinamisko izpildi neredzēt
2) Ja vienkārši dokumenta HEAD daļā ieliekam "script src=mansskripts.js", kur mansskripts.js pirmā rinda ir window.onload=dariitkautko(), tad nav garantijas, ka skripta ielādes (un vienlaicīgi - arī izpildes) brīdī jau būs definēts window objekts. Pašreiz man zināmie pārlūki tā dara, bet solījis neviens nav. Process principā ir asinhrons. Līdz ar to laikam korekti būtu izmantot taimieri, kas ik pēc brīža pārbauda, vai window objekts vispār eksistē un tad tam piesaista onload ķērāju

deni2s komentēja 05.11.2008. 00:59:30
Komentāra reitings: 0

Par iepriekšējo komentāru:
Iekš onload var ielikt pārbaudi, vai window objekts eksistē, un ja eksistē, tad darīt visu pārējo.

Par pašu rakstu - nu tomēr man šķiet pārskatāmāk, ja es HTML lapā redzu, ka onclick eventā palaidīsies kkāda javascript f-ja, nevis mēģināt saprast, kāpēc HTML it kā rāda vienu, bet spiežot uz pogas notiek kādi brīnumi.
Lai gan tas droši vien ir vājš attaisnojums - ar CSS jau arī tak notiek tas pats - HTML dokumentā elements ir kautkur beigās, bet reāli - pašā augšā pozicionēts ar CSS.

Komentāra pievienošana

Ar * atzīmētie lauciņi ir jāaizpilda obligāti.





[ uz rakstu sarakstu ]

Reklāma
Par web.hc.lv

web.hc.lv ir vortāls, kurā tiek aplūkoti mājaslapu veidošanas un mārketinga aspekti, no idejas līdz gandarījumam.

[Valid RSS] Valid XHTML 1.0! Valid CSS!

RSS 2.0 ziņu barotne (news feed)  Twitter

reģistrēties