Ienāca prātā, ka visā visumā turpmāk arī JavaScript funkcionalitāte ir jānodala no struktūras. Pirmām kārtām, tieši tāpat, kā mēs ar link rel piesaistām CSS, mēs pašā lapas kodā nebakstām JavaScript'u. Tas ir nepieciešams tikai tiem, kuru pārlūki atbalsta šo technoloģiju. Pārējiem tie ir lieki baiteļi.
<script type="text/javascript" src="script.js">
Bez structure un presentation ir vēl arī behavior
Otrām kārtām, bāzt lapas elementiem klāt notikumu apstrādāšanas funkcijas arī nav labi. Tieši tas pats iemesls, kas pirmāmkārtām — lietotājiem, kuriem nav JS atbalsta, šī lieta nav nepieciešama. Kā arī — dokumenta struktūrā notikumu apstrādes metodēm nav vietas. Tas ir t.s. behavior slānis.
Tāpēc, teiksim, lai atvērtu izlēcošo pēkšņlogu (šis, protams, nav oficiāls letiņiskojums ;) popupu), mums ir mazliet jāpaņemās, nodalot šo behavir no struktūras.
Par popupu usability runāsim citreiz, labi? Šoreiz tas ir vienkārši piemērs.
Sākumā mums bija šis:
<a href="/order/1234" onclick="wopen('1234'); return(false);"…
Tagadiņās mēs uzrakstām apmēram ko sekojošu:
<a href="/order/1234" class="popup" …
Mums nu ir glauns un strukturāli vairāk vai mazāk pieņemams kods. Un ko tālāk? Kā likt šim linkam vērties popupā? Sekojošā funkcija paņem visus elementus, kuru klase ir popup un pievieno tiem eventu onclick, kura izpildes gadījienā mums izlec gaumīgs popup logs ;)
Šī funkcija ir nepieciešama tālab, ka Tev var būt vēl
arī citi skripti, kuriem nepieciešams izpildīties, teiksim,
window.onLoad gadījienā. Tāpēc mēs izmantojam šo funkciju,
nevis lai aizvietotu esošu handleri ar savējo, bet gan
lai pievienotu pēc esošā savējo :)
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent('on'+evType, fn);
return r;
} else {
return false;
}
}
Funkcija, kura tiek izsaukta, kad ielādējas dokuments
un visiem a elementiem ar klasi 'popup' piesaista
onClick eventa apstrādes funkciju, kura atver popup
loģeli
function initPopups() {
Dabonam visus elementus 'a'
var elems = document.getElementsByTagName('a');
Braucam cauri dabūto elementu masīvam
for (var i = 0; i < elems.length; i++) {
Ja nu mums elementa klase ir 'popup'
if (elems[i].className == 'popup') {
Te mēs neizmantojam addEvent, jo negribam,
lai linki dara vēl kaut ko citu, kā tikai šo.
elems[i].onclick = function() {
Atveram izlecošo pēkšņlogu
var popup = window.open(this.href,
'popup',
'toolbars=no,scrollbars=no,' +
'width=300,height=200,' +
'resizable=yes');
Nodrošinam, lai pārlūks pēc loga atvēršanas
nedodas tālāk (uz href'ā norādīto adresi).
return(false);
}
}
}
}
Piebiedrojam esošajiem event handleriem
// (ja tādi ir) savējo
addEvent(window, 'load', initPopups);
Tas vairāk vai mazāk ir vēlamais virziens un nebūt ne vēlamā realizācija. 100% nodalīt struktūru, prezentāciju un prezentācijas procesu, diemžēl, nav iespējams. Vienmēr paliks kaut kas, kas visus trīs saistīs kopā.
1 Aivis Ābele @ 09:10 (2004. gada 01. septembris)
Klau — vai tas gadījumā nav uz to modi — klausies manos vārdos, neskaties manos darbos?
2 laacz @ 09:18 (2004. gada 01. septembris)
Aivis: tas ir uz to modi — es tagad sapratu, ka var darīt šitā un šitā ir būs būt labi. Un turpmāk centīšos tā arī darīt. Netaisos visus savus līdz šim taisītos projektus pārtaisīt.
3 Jāzeps @ 09:19 (2004. gada 01. septembris)
Par šo lietu jau pāris mēnešus runā ij Zeldmans, ij Shea, ij Bowman. Bet tas tāpēc, ka content/structure nodalījums ir atrunāts un džeki taču nevar saglabāt savas pozīcijas palikt klusējuši.
3/4 mājaslapu (nu, tā uz aci piemetot) nav HTML DOKUMENTI. HTML+Javascript prezentācijas. Un prezentācijas jau šis viss dalījums ir izstrādātāja darba organizācija. Labas idejas darba organizācijā.
4 Inku Zelts @ 10:49 (2004. gada 01. septembris)
Jā, Jāzep, es arī par to jau kādu laiku kā runāju.
5 ulzha @ 11:15 (2004. gada 01. septembris)
Tikko pats spēlējos ar attachEvent, un man liekas, ka jaunais pārraksta veco naher…
6 Mr.Venom @ 11:15 (2004. gada 01. septembris)
Daži kommenti/ietekumi (just ignore me).
Kāpē return(false); nevis vienkārši false?
onclick'am varētu būt jau kaut kas uzlikts, tāpēc tomēr lietotu addEvent vai vienkāršu onclick += 'function …'.
pie var popup=window.open pārbaudītu vismaz
if (!popup) return true; un ļaujam atvērties parastā veidā, ja browseris nokillojis popupu
klases elementiem varētu pierakstīt arī target = _blank bet ar tiem strict utt… whatever
labāk nevis .className == 'popup' bet ar strpos/instr, jo class="popup active" pēdejā laikā tiek pielietots arvien biežāk.
JavaScript nav tā performancētākā valoda, tāpēc
for (var i = 0; i < elems.length; i++)
vietā labāk izmantot while(–i>–1) …
7 ulzha @ 11:22 (2004. gada 01. septembris)
Ā nē jā nepārraksta atv… Bet Mr.Venom vajadzētu sarakstīt grāmatu…
8 Lupus @ 11:56 (2004. gada 01. septembris)
Venom, return(false) tādēļ ka piesaistot hrefiem onClick f–ju pārlūks sākumā izpilda JS, un tad pēc return vērtības skatās vai turpināt izpildi — šajā gadijumā iet uz norādīto linku ar paša prātiņu, paša logā. Tā, starp citu, ir ar praktiski visiem JS notikumiem. Piemēram taisot formai onSubmit to var pārķert (un izmantot piemēram pārbaudei) — ja viss štokos, ljaujam formu submitot ar return(true).
9 ulzha @ 13:57 (2004. gada 01. septembris)
Lupus, laikam par iekavām tika vilkts uz zoba.
10 igo @ 14:15 (2004. gada 01. septembris)
reāli skatoties uz situāciju (kāds ir browseru sadalījums tirgū) praktiski var teikt, ka nav tādu browseru, kas neatbalsta JS. otrkārt, JS nodrošina extra uber papildus funkcionalitāti, kā rezultātā lapa bez JS suppora nemaz nav lietojama. un lietotājam ir pilnīgi pie kājas, vai tur ir saturs nodalīts no pasniegšanas, vai nav ir pilnīgi pie kājas.
11 MZM @ 15:09 (2004. gada 01. septembris)
igo :: tu aizmirsti par tiem lietotājiem, kam JS drošības apsvērumu dēļ ir atslēgts…
12 r @ 15:21 (2004. gada 01. septembris)
par tiem droshiibas apsveerumiem….. IMHO JS atbalstu var atsleegt, ja lozhnjaa pa kreisiem saitiem, kur patieshaam nevar zinaat ko nu kaads skriptelis sadariis. Lozhnjaajot par zinaamiem, uzticamiem i–resursiem to JS sleegt nost nav nekaadas jeegas, jo taapat ir zinaams, ka nekas ljauns nenotiks — lapas autoru meerlkjis NAV apmekleetaajiem nodariit ko ljaunu. Un, ja veel ir zinaams, ka, lai viss korekti straadaatu (taa kaa autors paredzeejis), vajadziigs JS, tad kaada vella peec to neljaut??!
… un veel.. atsleegt JS ir tas pats, kas nestaigaat gar maajaam/eekaam — nekad nevar zinaat, kad uz galvas uzkritiis kjiekjelis :D
tikai manas domas…. un katra pasha dariishana ;)
13 laacz @ 16:17 (2004. gada 01. septembris)
Re: Mr. Venom
> Kāpē return(false); nevis vienkārši false?
Tāpēc, ka tas, manuprāt, diezgan labi norāda, ka jāatgriež false, nevis skripta veidotājam vai vēlākam lietotājam ir jādomā, ko nozīmē vienkāršs false, kurš stāv atsevišķi :)
> onclick'am varētu būt jau kaut kas uzlikts, tāpēc tomēr lietotu addEvent vai vienkāršu onclick += 'function '.
Protams. Bet es jau minēju, ka nevēlos, lai onclickam ir kaut kas uzlkts. Pie kam, onclick += sintaksi es tieši tāpat neuzskatu par intuitīvi saprotamu…
> pie var popup=window.open pārbaudītu vismaz
if (!popup) return true; un ļaujam atvērties parastā veidā, ja browseris nokillojis popupu
Piekrītu.
> klases elementiem varētu pierakstīt arī target = _blank bet ar tiem strict utt whatever
Kā jau pats minēji, _blank neder, jo, ja lietotājs vēlēsies atvērt kaut ko jaunā logā, tas to arī atvērs. Starp citu, par popupu usability issues es esmu jau izteicies, taču te tas likās varen labs piemērs. Vismaz labāks, nekā onmouseover events ;)
> labāk nevis .className == 'popup' bet ar strpos/instr, jo class="popup active" pēdejā laikā tiek pielietots arvien biežāk.
true, true
> JavaScript nav tā performancētākā valoda, tāpēc for (var i = 0; i < elems.length; i++) vietā labāk izmantot while(i>1)
Performance issues lai jau paliek uz manas sirdsapziņas ;) Notestējot uz lapas ar pāris tūkstošiem linku, nenovērohu, ka Tavs variants ir ātrāks par manu :)
14 Neonz @ 16:47 (2004. gada 01. septembris)
It kā visnotaļ pareizi, bet ir gadījumi, kad šāda pieeja neder. Nu piemēram, mums ir bildēm thumbnaiļi, uz kuriem uzspiežot veras vaļā popups. Lielajām bildēm izmēri atšķiras, tāpēc ir jāregulē popup loga platums, atkarībā no bildes platuma. Un tādā gadienā vien nākas to onlick eventu likt pie katra linka. Bet es vienmēr pielieku arī visprastāko a href linku priekš tiem ļaužiem, kam javascript's ir atslēgts, vai kaut kādu iemeslu dēļ nav pieejams.
15 !ob @ 17:09 (2004. gada 01. septembris)
Pavisam nesen (29.08) uz flex–mx.com bija saitīte:
http://mar.anomy.net/entry/2004/02/09/12…
Tehnika tā pati, bet paplašināti.
16 Kirils @ 01:46 (2004. gada 02. septembris)
10% lietotaaju browseri neparsee javascriptu.
— w3c statistikas dati
17 texas holdem @ 14:46 (2005. gada 06. maijs)
<h1>You are invited to check some relevant pages about<A HREF="http://www.e–holdem.net/texas–holdem.htm… texas holdem </A> texas holdem <A HREF="http://www.e–holdem.net/texas–holdem.htm… <br/>– Tons of interesdting stuff!!! </h1>