✉️ Saņem šito visu e-pastā. Tā vietā, lai palaistu garām kaut ko no tā, ko es rakstu savā blogā, tagad vari pierakstīties un saņemt e-pastā visu, ko es te rakstu. Tas nav bieži.

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

Kā vēlies sevi dēvēt? Šo ieraksti. Epasts. Nav obligāts. Citiem netiks rādīts. Komentārs. Saki visu, kas uz sirds, bet esi klājīgs. Formatēšanai vari izmantot markdown. Saņemt turpmākos šī raksta komentārus norādītajā epastā. Atcerēties vārdu un epastu no tava patreizējā pārlūka.

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?

Aivis Ābele

laacz

Jāzeps

Inku Zelts

ulzha

Mr.Venom

ulzha

Lupus

ulzha

igo

MZM

r

laacz

Neonz

!ob

Kirils