← Uz sākumu

Maza doma

2004. gada 1. septembrī, 16 komentāri

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

Tu atbildi augstāk redzamajam komentāram. Atcelt

Gravatar Aivis Ābele

2004. gada 1. septembrī, plkst. 09:10

Klau - vai tas gadījumā nav uz to modi - klausies manos vārdos, neskaties manos darbos?

Gravatar laacz

2004. gada 1. septembrī, plkst. 09:18

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.

Gravatar Jāzeps

2004. gada 1. septembrī, plkst. 09:19

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

Gravatar Inku Zelts

2004. gada 1. septembrī, plkst. 10:49

Jā, Jāzep, es arī par to jau kādu laiku kā runāju.

Gravatar ulzha

2004. gada 1. septembrī, plkst. 11:15

Tikko pats spēlējos ar attachEvent, un man liekas, ka jaunais pārraksta veco naher...

Gravatar Mr.Venom

2004. gada 1. septembrī, plkst. 11:15

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

Gravatar ulzha

2004. gada 1. septembrī, plkst. 11:22

Ā nē jā nepārraksta atv... Bet Mr.Venom vajadzētu sarakstīt grāmatu...

Gravatar Lupus

2004. gada 1. septembrī, plkst. 11:56

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

Gravatar ulzha

2004. gada 1. septembrī, plkst. 13:57

Lupus, laikam par iekavām tika vilkts uz zoba.

Gravatar igo

2004. gada 1. septembrī, plkst. 14:15

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.

Gravatar MZM

2004. gada 1. septembrī, plkst. 15:09

igo :: tu aizmirsti par tiem lietotājiem, kam JS drošības apsvērumu dēļ ir atslēgts...

Gravatar r

2004. gada 1. septembrī, plkst. 15:21

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 ;)

Gravatar laacz

2004. gada 1. septembrī, plkst. 16:17

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 :)

Gravatar Neonz

2004. gada 1. septembrī, plkst. 16:47

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.

Gravatar !ob

2004. gada 1. septembrī, plkst. 17:09

Pavisam nesen (29.08) uz flex-mx.com bija saitīte: http://mar.anomy.net/entry/2004/02/09/12.17.47/ Tehnika tā pati, bet paplašināti.

Gravatar Kirils

2004. gada 2. septembrī, plkst. 01:46

10% lietotaaju browseri neparsee javascriptu.

-- w3c statistikas dati