Dogodkovno vodeno programiranje: popoln vodnik s primeri

Informatec Digital » programiranje » Dogodkovno vodeno programiranje: popoln vodnik s primeri

Dogodkovno usmerjeno programiranje je razvojni slog, pri katerem se aplikacija odziva na svojo okolico in ne na tog seznam korakov. Namesto zaporednega izvajanja od točke A do točke B programska oprema čaka na dogodke in se odzove, ko nekdo klikne, ko prispejo podatki ali ko se stanje sistema spremeni.

Če prihajate iz bolj zaporednega programerskega ozadja, vam ta pristop odpira svet možnosti za bogate vmesnike, storitve z visoko obremenitvijo in sisteme, ki obdelujejo delovne procese v živo. Ponujam celovit pregled konceptov, arhitekture, tipov dogodkov, praktične kode (JavaScript, Node.js in Python/tkinter) in najboljših praks, ki vam bodo pomagale, da ga boste z lahkoto obvladali.

Kaj je dogodkovno usmerjeno programiranje?

V tej paradigmi se logika aktivira, ko se zgodi nekaj pomembnega: interakcija uporabnika, omrežna sporočila, senzorji, časovniki ali kateri koli signal, ki ga definira programer. To "nekaj" se imenuje dogodek in sproži enega ali več obdelovalcev , ki vsebujejo odziv, ki ga želite izvesti.

Ključno je, da se dogodki lahko dogajajo asinhrono, celo vzporedno. Program ostaja na preži z uporabo zanke dogodkov, ki zbira, postavlja v vrsto in distribuira dogodke svojim prejemnikom , s čimer ohranja odzivnost aplikacije in njeno nemoteno delovanje.

Bistveni koncepti: dogodki, oddajniki, sprejemniki in zanka

Dogodek je manifestacija, da se je nekaj zgodilo: klik, dvojni klik, pritisk tipke, konec prenosa, prihod omrežnega paketa, odprtje okna itd. Običajno vsebuje podatke (koristni tovor) in kontekst, ki opisuje, kaj se je zgodilo , kar omogoča sprejemanje odločitev v obdelovalcu.

Komponente, ki generirajo dogodke, se imenujejo oddajniki; tiste, ki se nanje odzivajo, pa sprejemniki ali poslušalci. Povezava med njimi se vzpostavi z mehanizmi naročnine (poslušalci) ali vezavami , ki označujejo, katera funkcija naj se izvede za posamezno vrsto dogodka.

Srce sistema je zanka dogodkov. Ta zanka zbira čakajoče dogodke, jih razvršča in dostavlja ustreznim obdelovalcem. Zahvaljujoč temu vzorcu se lahko aplikacija odzove na več dražljajev, ne da bi pri tem blokirala vmesnik ali zapravljala vire.

V vizualnih in mobilnih okoljih boste razlikovali tudi med dogodki, ki jih sproži uporabnik (klik, vlečenje, tapkanje, nagibanje naprave), in samodejnimi dogodki (odpiranje zaslona, ​​sprožitev časovnika, spreminjanje fokusa). Ločevanje teh dveh skupin vam pomaga oblikovati predvidljive poteke interakcije.

Kako deluje življenjski cikel dogodka

Dinamiko lahko povzamemo v treh medsebojno povezanih korakih. Najprej se dogodek generira (oseba, sistem, omrežje ali strojna oprema) ; ta dogodek vstopi v skupni kanal (čakalno vrsto), medtem ko zanka dogodkov spremlja dogajanje.

Drugič, pride do poslušanja. Sprejemniki, naročeni na to specifično vrsto dogodka, ga zaznajo (na primer poslušalec »klika« ali obdelovalec »podatkov« na vtičnici) in so pripravljeni na ukrepanje.

Končno sledi obdelava. Krmilnik obdela objekt dogodka, preveri njegove lastnosti (tip, cilj, vrednosti) in se odloči, kaj storiti : posodobiti uporabniški vmesnik, preveriti, razširiti, preklicati ali oddati nove kaskadne dogodke.

Najpogostejše vrste dogodkov

V praksi boste naleteli na znane družine. Razumevanje njihovih posebnosti vam bo prihranilo veliko glavobolov pri njihovem izpopolnjevanju in izvajanju.

• Miška ali kazalec: klik, dblclick, mousedown, mouseup, mouseover, mouseout, mousepremove, kontekstni meni.
• Tipkovnica: pritisk tipke navzdol, pritisk tipke navzgor, pritisk tipke (za znakovne tipke).
• Okno in dokument: nalaganje, napaka (pri nalaganju virov), spreminjanje velikosti, pomikanje, skrivanje/prikazovanje strani.
• obrazci: vnos, sprememba, oddaja, fokusiranje/izostritev.
• Kolo/pomikanje: kolo s podatki za horizontalno in vertikalno drsenje.

Poleg imena dogodka objekt dogodka ponuja dodatne podrobnosti. Za kazalce boste našli clientX/pageX in clientY/pageY; za tipkovnice boste preverili tipko, kodo ali modifikatorje (shiftKey, altKey, ctrlKey) ; za podatke o kolescu boste našli deltaX, deltaY in deltaMode za določitev enote.

Poslušanje in upravljanje dogodkov v praksi

Na spletu obstajata dva tipična pristopa. Eden je definiranje obdelovalcev v samem HTML-ju (atributi, kot je onclick) , kar je uporabno za prototipe ali preproste primere:

<!-- myClickHandler es la función JS que manejará el evento -->
<button onclick='myClickHandler()'>Púlsame</button>
<script>
  function myClickHandler(){
    alert('Hola');
  }
</script>

Druga, čistejša in bolj prilagodljiva možnost je registracija poslušalcev iz JavaScripta. `addEventListener` vam omogoča naročnino med izvajanjem in ločitev pogleda od logike.

const btn = document.querySelector('button');
const onClick = (e) => {
  console.log('Destino:', e.target);
};
btn.addEventListener('click', onClick);
// Más tarde, si ya no lo necesitas:
// btn.removeEventListener('click', onClick);

Vsak upravljalnik prejme objekt dogodka. Tam boste našli metode e.type, e.target, e.cancelable in ključne metode, kot sta e.preventDefault() ali e.stopPropagation(), za preklic privzetega vedenja ali zaustavitev mehurčka.

Tipičen primer je zajem vrednosti vnosa brez osvežitve strani: preberite e.target.value znotraj rutine za spremembo ali vnos in besedilo bo objavljeno.

Primeri kode v Node.js in Pythonu

Node.js implementira zmogljiv vzorec objavljanja/naročanja z razredom EventEmitter. To vam omogoča, da definirate lastne poslovne dogodke in se nanje odzovete.

// Node.js (JavaScript)
const EventEmitter = require('events');
class MiBusEventos extends EventEmitter {}
const bus = new MiBusEventos();

bus.on('saludo', (nombre) => {
  console.log(`¡Hola, ${nombre}!`);
});

// Emitimos el evento con un dato asociado
bus.emit('saludo', 'mundo');

V Pythonu, če delate z namiznimi vmesniki, tkinter olajša povezovanje gradnikov z dogodki. Gumb, okvir ali okno je mogoče povezati z dejanji miške in tipkovnice.

# Python + tkinter
from tkinter import *

def on_key(event):
    print('Tecla:', repr(event.char))

def on_click(event):
    marco.focus_set()
    print('Click en:', event.x, event.y)

root = Tk()
marco = Frame(root, width=120, height=120)
marco.bind('<Key>', on_key)
marco.bind('<Button-1>', on_click)
marco.pack()
root.mainloop()

Če imate raje osnovni primer izdajatelja po meri v Pythonu (brez grafičnega uporabniškega vmesnika), lahko simulirate naročnino in obveščanje z uporabo seznamov funkcij :

class Emisor:
    def __init__(self):
        self._subs = {}
    def on(self, evento, fn):
        self._subs.setdefault(evento, []).append(fn)
    def emit(self, evento, *args, **kwargs):
        for fn in self._subs.get(evento, []):
            fn(*args, **kwargs)

emisor = Emisor()
emisor.on('saludo', lambda: print('¡Hola, mundo!'))
emisor.emit('saludo')

Lastnosti in metode v vizualnih okoljih (MIT App Inventor in podobno)

Orodja za razvoj, ki temeljijo na blokih, kot je MIT App Inventor, so odličen primer paradigme, ki jo vodijo dogodki. Vsaka komponenta (gumb, nalepka, slika) ima lastnosti, dogodke in metode , ki jih vizualno upravljate.

Lastnosti opisujejo, kako komponenta "izgleda" ali "se obnaša": velikost pisave, poravnava, barva, vidnost ali besedilo. Nastavimo jih lahko med načrtovanjem ali spremenimo med izvajanjem, da prilagodimo vmesnik glede na interakcije ali vhodne podatke.

Metode so vnaprej določena dejanja, ki jih komponenta zna izvesti, kot so premikanje okna, fokusiranje polja, dodajanje elementa na seznam ali brisanje besedila. Ne programirate jih iz nič: okolje jih zagotovi pripravljene za klic.

Na teh vrstah platform boste razlikovali tudi med samodejnimi dogodki (npr. ko se zaslon zažene) in tistimi, ki jih sproži uporabnik (pritisk gumba, vlečenje, tapkanje, nagibanje telefona). Ta ločitev je uporabna za urejeno usklajevanje navigacije in stanja.

Grafični uporabniški vmesnik, ukazna vrstica in vloga operacijskega sistema

Operacijski sistemi pošiljajo dogodke aplikaciji, ki ima vhodni fokus. V grafičnem uporabniškem vmesniku lahko vsako okno ali pripomoček prejema in obravnava lastne dogodke prek zanke dogodkov aplikacije.

Tudi v programih ukazne vrstice obstajajo podobni signali: proces lahko počaka, da uporabnik vnese in pritisne Enter, da se dogodek »vnos končan« šteje za dosežen. Glavna razlika je v tem, da se v CLI potek zaznava kot linearen, vendar še vedno obstajajo čakanja na dogodke.

Zvezdne aplikacije za programiranje, ki ga poganjajo dogodki

Interaktivni uporabniški vmesniki : spletna mesta, namizni računalniki in mobilne naprave se takoj odzovejo na vsako gesto. Izkušnja se zdi naravna, saj se logika izvede natančno takrat, ko jo uporabnik zahteva.

Asinhronska komunikacija : HTTP strežniki, WebSockets, čakalne vrste sporočil in mikroservisi izkoriščajo model za obdelavo dohodnih zahtev, ne da bi pri tem blokirali druga opravila.

Obdelava v realnem času – telemetrija, internet stvari, trgovanje, spremljanje infrastrukture in industrijski nadzor – sproži takojšnje ukrepe kot odziv na spremembe, ki jih zaznajo senzorji. Sam dogodek je popoln sprožilec za odziv na realnost v milisekundah.

Prednosti in izzivi, ki jih je treba upoštevati

Na pozitivni strani pridobite interaktivnost, učinkovitost in skalabilnost : koda se izvaja le, ko je potrebna, glavna nit se ne zatakne in delo lahko razdelite med več specializiranih upravljavcev.

Nasprotno pa se kompleksnost povečuje s številom dogodkov, poslušalcev in asinhronih tokov . Brez jasne zasnove trpi vzdrževanje in pojavijo se težave, kot so neurejeno veriženje ali težko preizkuševalni upravljalniki.

Dobre prakse za delo z dogodki

Dosledno poimenovanje za upravljavce (onSubmit, handleClickCancel) se izogne ​​​​vgrajeni logiki v HTML-ju in centralizira naročnino z addEventListener ali sistemom dogodkov vašega ogrodja.

Preprečite puščanje : odstranite poslušalce, ko je komponenta uničena ali element DOM izgine. Uporabite `removeEventListener` na spletu ali enakovredne mehanizme v ogrodjih in izvornih grafičnih uporabniških vmesnikih.

Preverjanje in omejevanje : Uporabite e.preventDefault() na obrazcih, če preverjanje še ni uspešno, in e.stopPropagation(), če ne želite, da se dogodek sproži tudi na prednikih.

Ločite z objavljanjem dogodkov domene (npr. 'order.created') in omogočanjem naročnine drugim modulom. To zmanjša neposredne odvisnosti in olajša razvoj aplikacije.

Onkraj fronte: arhitektura in vzorci

Dogodkovno vodeno računalništvo ni omejeno le na sprednji del. Na zalednem delu lahko uporabite čakalne vrste (RabbitMQ, Kafka), posrednike, notranja vodila in storitve v oblaku, kot je AWS, da omogočite neblokirajočo in odporno komunikacijo med mikrostoritvami.

Uporabni vzorci vključujejo iskanje dogodkov (dogodki so vir resnice), prenos stanja, ki ga prenašajo dogodki (prenos stanja prek dogodkov) in odhodni nabiralnik (zagotavljanje zanesljive objave iz baze podatkov). Vsi se zanašajo na isto načelo: odzivanje na dogodke.

Lastnosti objekta dogodka, ki si jih morate zapomniti

Poleg polj e.type in e.target je na voljo še nekaj zelo uporabnih polj. Za vnos z miško : clientX/clientY (glede na okno) in pageX/pageY (glede na dokument) ter which (pritisnjen gumb). Za vnos s tipkovnico : tipka, koda in modifikatorji, kot so shiftKey, altKey in ctrlKey.

Za kolo deltaX in deltaY določata premik , deltaMode pa označuje, ali so enote slikovne pike, črte ali strani. Če sta učinkovito združeni, omogočata ustvarjanje natančnih in dostopnih interakcij.

Dogodki, lastnosti in metode v kontekstu

Če povzamemo vizualni pristop: komponenta ima lastnosti (konfiguracijo), dogodke (kaj se z njo zgodi) in metode (kaj zna narediti) . Ta triada se pojavlja v App Inventorju, spletnih ogrodjih in izvornih SDK-jih.

Spreminjanje lastnosti med izvajanjem, kot sta velikost pisave ali barva gumba po validaciji, je v tem modelu naravno. Povežite te spremembe z dogodki in zlahka boste dosegli reaktivne uporabniške vmesnike.

HTML in delegiranje dogodkov

Ko je vmesnik zgrajen dinamično, je lahko naročanje na vsak nov element drago. Delegiranje dogodkov posluša skupni vsebnik in filtrira po `e.target` , kar močno poenostavi sezname ali tabele z vrsticami, ki se pojavijo in izginejo.

document.querySelector('#lista').addEventListener('click', (e) => {
  if (e.target.matches('li.removible')) {
    e.target.remove();
  }
});

Na ta način en sam poslušalec upravlja vse trenutne in prihodnje elemente znotraj vsebnika #list. Manj naročnin, manj pomnilnika in manjše tveganje za puščanje podatkov.

Kako se integrira z omrežji in realnim časom?

V Node.js vtičnice in tokovi že delujejo na podlagi dogodkov: 'data', 'end', 'error', 'close' ... Samo še priložiti morate obdelovalce in pustiti, da izvajalno okolje opravi ostalo . V brskalnikih WebSocket in EventSource sledita istemu načelu.

Za internet stvari je prihod meritev iz senzorjev naravni sprožilec. Cevovod dogodkov lahko normalizira, potrdi in objavi posodobljena opozorila ali nadzorne plošče brez ročnega posredovanja.

Vodeno učenje in praksa

Če želite iti še korak dlje, je dobro vaditi z majhnimi projekti: obrazec z vročo validacijo, klepet z WebSockets, nadzorna plošča, ki uporablja tok, ali namizna aplikacija z vezavami. Ponavljanje v različnih kontekstih krepi reflekse in vzorce.

Druga možnost je usposabljanje z intenzivnimi programi, ki združujejo osnove, arhitekturo in uvajanje. Dober tečaj za mobilne aplikacije ali sodoben spletni razvoj vas bo seznanil z dogodki, asinhronostjo in sestavljanjem vmesnikov, pripravljenih za produkcijo.

Programska oprema, ki jo poganjajo dogodki, vam omogoča izdelavo programske opreme, ki se odziva tako, kot ljudje pričakujejo: brez blokiranja in ob pravem trenutku. Zdaj poznate koncepte (dogodke, pošiljatelje, prejemnike, zanke), najpogostejše tipe, kako uporabljati objekt dogodka, primere v Node.js in Python/tkinter, vlogo lastnosti in metod v vizualnih okoljih, aplikacije iz resničnega sveta in najboljše prakse . S to osnovo bo prehod od klika do rezultata stvar pozornega poslušanja, boljšega upravljanja ter ohranjanja čistega in ločenega sistema.