Unobtrusive Javascript

Māris Kiseļovs, 04.11.2008., 19:12

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.

Ieguvums 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.

uz rakstu sarakstu

ietvīto

pievieno facebookā

2 komentāri Komentēšana pieejama visiem.

Krišs (kriss

naivist.net), 04.11.2008. 21: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, 04.11.2008. 22: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

uz rakstu sarakstu

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.

Reklāma

ienākt reģistrēties