logi sisse meist KKK
1
2

Puutusin ootamatult kokku lehega, kus oli interaktiivne vorm, mis mõjus reaalajas kasutaja tegevustele. Koodi uurides leidsin üllatuseks, et Javascripti sündmused ei ole koodi kirjutatud, vaid asuvad kusagil failis eraldi. Klassikaline kood :

<html>
  <!-- siin peaks olema muu deklareeriv kraam -->
  <body> 
     <input id="text" onchange="dosomething()">
  </body>
</html>

Kõnesoleva koodi kirjapilt ei sisalda body osas javascripti koodi:

<html>
 <script>
    $('#text').onchange(function(){
        dosomething();
    })
 </script>
 <body>
   <input id="text">
 </body>
</html>

(näide võib sisaldada vigu)

Kuidas sellist koodilähenemist nimetatakse ja millise märksõna järgi ma peaksin selle kohta veebist üldse infot otsima?

küsitud Feb 01 '10 at 00:09

Teet's gravatar image

Teet
792410


Tekkis huvi ja hakkasin guugeldama, märksõnadeks kombinatsioon selectors based, behaviour based, event driven kuni lõpuks komistasin Wikipedia artikli otsa, kus on antud lähenemine nimetatud Unobtrusive JavaScriptiks. Link siis siin, http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

link

vastatud Feb 01 '10 at 06:29

Toomas's gravatar image

Toomas
461

Tänud. See lähenemine võimaldab koodi ja lehe paigutuse eraldi hoida. Võtmeelementidele antakse id-ga tunnused ja nende kood jookseb eraldi. Kood ei ole küll nii haaratav, aga päris kasulik iva on sellisel lähenemisel.

(Feb 01 '10 at 19:41) Teet

See kas kasutada sündmuste lisamist elementidele inline või seada korrektsed kuularid programmiliselt sõltub peamiselt siiski eesmärgist. Kui tegu on ainult mingi disainilise funktsionaalsuse laiendamisega, näiteks on soov vorm ära saata mitte nupule klikkides, vaid näiteks hoopis tavalise lingiga stiilis

<a href="#" onclick="document.getElementById('vorm').submit()">saada vorm</a>

siis on suhteliselt mõttetu hakata selle jaoks looma eraldi skriptiblokki ning laadida sisse mahukas teek (jQuery, Prototype, MooTools vms.), mis võimaldaks cross-browser sündmuse kuulareid seada.

Hoopis teine aga on asi siis, kui tegu pole enam väikese disainilaienduse vaid mahukama veebiaplikatsiooniga. Sellisel juhul pole taoline inline stiil mitte lihtsalt ebasoovitav vaid lausa kriminaalne - eriti arvestades, et tõenäoliselt ei tule needsamad elemendid suure tõenäosusega isegi mitte HTML koodist, vaid need lisatakse lehele niikuinii dünaamiliselt. Kõikvõimalikud sündmustele reageerimised tuleks ära defineerida selleks kontekstiliselt kõige sobivamas kohas.

// Näide kasutab Prototype teeki
var menu = new Element('ul',{className: "menu"}),
    actions = ["tegevus 1", "tegevus 2", "tegevus 3"];

actions.each(function(action){
    menu.insert(new Element('li').update(action));
});

menu.observe("click", function(e){
    var element = Event.element(e);
    if(element.tagName=="LI")
        alert("klikkisid nupule: "+element.innerHTML);
});

document.body.appendChild(menu);

See näide loob uue DOM elemendi UL, mille CSS klassi väärtuseks on "menu" (elemendi stiili seadmiseks). Loodud UL element täidetakse LI elementidega, mille sisuks saavad actions massiivist võetud väärtused. Kogu kupatus lisatakse lehe lõppu käsuga document.body.appendChild(menu). Samuti seatakse hiirekliki kuular, kuid seda mitte inline vaid programmiliselt läbi Prototype Event.observe meetodi.

Tulemuseks on midagi sellist (elementidel klikkimine ei tööta, see on lihtsalt visuaalne demo):

  • tegevus 1
  • tegevus 2
  • tegevus 3

Elemendile klikkides ilmub teade sisuga "klikkisid nupule tegevus x"

Näites on oluline veel see, et kuularit ei lisata mitte igale LI elemendile eraldi, vaid korraga tervele UL blokile. Kliki toimudes UL bloki sees suvalises kohas otsitakse üles konkreetne LI, mille kohal klikk tehti. Kolme elemendi puhul ei olegi väga vahet, kas lisada kuular igale elemendile eraldi, aga 3000 puhul on juba küll. Sellisel viisil lükatakse CPU kulu programmi initsialiseerimise juurest (3 erineva kuulari seadmine) klikkimise juurde (tuleb otsida üles element, millel klikiti).

Kokkuvõtteks - valik, et kumba stiili kasutada, sõltub suuresti siiski ülesandest ja selle mahukusest. Väga lihtsate asjade jaoks mingeid teeke laadida jms. teha ei ole reeglina mõistlik, keerulisemate asjade puhul tasub aga jälgida üsna jäigalt eri tüüpi programmiosade eraldamist - JavaScript ühes kohas, HTML teises ja CSS kolmandas.

link

vastatud Feb 06 '10 at 12:18

Andris's gravatar image

Andris
2553310

edited Feb 06 '10 at 18:44

Rene%20Saarsoo's gravatar image

Rene Saarsoo ♦♦
1.1k101121

ahjaa, üks oluline asi läks meelest ära - sündmuste lisamine programmiliselt läbi addEventListener või attachEvent meetodi (prototype's siis observe), mitte EI ASENDA olemasolevat sündmuse kuularit, vaid LISAVAD tegevusi juurde.

(Feb 06 '10 at 12:46) Andris

Antud näitest on näha, et kasutatakse jQuery't, olgu see võtmesõna ka siis välja toodud. Aga minu meelest sarnaneb selline koodi kirjutamise viis iseennast modifitseerivate programmide kirjutamisele, mida on aegade algusest peetud paha-pahaks. Tagajärgi võisid praegu ise enda peal näha - programm nagu tegi midagi, aga kui koodi vaatasid, siis seal sellist funktsionaalsust polnud. Nii et ühest küljest küll eraldab HTML-i ja Javascripti, aga samas programmi lugemise teeb järgmisele programmeerijale keerulisemaks. Kasuta omal vastutusel!

link

vastatud Feb 04 '10 at 06:40

Tambet%20Matiisen's gravatar image

Tambet Matiisen ♦♦
77791125

Sinu vastus
lülita eelvaade

Jälgi seda küsimust

By Email:

Pärast sisselogimist saad tellida muudatuse teavitusi siit

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *kaldkiri* või __kaldkiri__
  • **paks kiri** või __paks kiri__
  • link:[tekst](http://url.com/ "pealkiri")
  • pilt?![alt tekst](/path/img.jpg "pealkiri")
  • nummerdatud nimekiri: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • põhilised HTML märgendid on samuti toetatud

Pinu tööpakkumised

kõik pakkumised »

Küsimuse sildid:

×18

küsitud: Feb 01 '10 at 00:09

nähtud: 2,540 korda

viimati uuendatud: Feb 06 '10 at 18:44

Litsents: Creative Commons Attribution License | Kontakt: info@pinu.ee