Event-Driven Programming: een complete gids met voorbeelden

Informatic Digital » programmering » Event-Driven Programming: een complete gids met voorbeelden

Event-driven programmeren is een ontwikkelstijl waarbij een applicatie reageert op wat er om zich heen gebeurt, in plaats van op een vaste lijst met stappen. In plaats van rechtstreeks van punt A naar punt B te rennen, wacht de software op gebeurtenissen en reageert hierop. Wanneer iemand klikt, komen er gegevens binnen of verandert de status van het systeem.

Als je een meer sequentiële programmeerachtergrond hebt, opent deze aanpak een heel nieuw scala aan mogelijkheden voor rijke interfaces, diensten met een hoge belasting en systemen die livestreams verwerken. Ik bied een complete rondleiding aan met concepten, architectuur, gebeurtenistypen, praktische code (JavaScript, Node.js en Python/tkinter) en goede praktijken. om het met gemak onder de knie te krijgen.

Wat is event-driven programmeren?

In dit paradigma wordt logica geactiveerd wanneer er iets relevants gebeurt: gebruikersinteractie, netwerkberichten, sensoren, timers of een door de programmeur gedefinieerd signaal. Dat ‘iets’ wordt een gebeurtenis genoemd en activeert één of meer handlers. die het antwoord bevatten dat u wilt uitvoeren.

Het belangrijkste is dat gebeurtenissen asynchroon, zelfs parallel, kunnen plaatsvinden. Het programma luistert via een gebeurtenislus die gebeurtenissen verzamelt, in de wachtrij plaatst en distribueert naar de ontvangers., waardoor de app responsief blijft zonder te blokkeren.

Essentiële concepten: gebeurtenissen, zenders, ontvangers en lus

Een gebeurtenis is de manifestatie dat iets is gebeurd: klikken, dubbelklikken, een toetsaanslag, het voltooien van een download, het ontvangen van een netwerkpakket, het openen van een venster, enzovoort. Het bevat doorgaans gegevens (payload) en een context die beschrijft wat er is gebeurd, waardoor beslissingen in de handler kunnen worden genomen.

De componenten die gebeurtenissen genereren, worden zenders genoemd. De componenten die deze gebeurtenissen verwerken, worden ontvangers of luisteraars genoemd. De verbinding tussen beide wordt tot stand gebracht met abonnementsmechanismen (luisteraars) of bindingsmechanismen die aangeven welke functie voor welk type gebeurtenis moet worden uitgevoerd.

Het hart van het systeem is de event loop. Deze lus verzamelt lopende events, sorteert ze en levert ze af aan de bijbehorende controllers. Dankzij dit patroon kan de applicatie op meerdere stimuli reageren zonder dat de interface geblokkeerd raakt of er bronnen verspild worden..

In visuele en mobiele omgevingen maakt u ook onderscheid tussen door de gebruiker geïnitieerde gebeurtenissen (klikken, slepen, tikken, kantelen van een apparaat) en automatische gebeurtenissen (het openen van een scherm, het activeren van een timer, het wijzigen van de focus). Door de twee groepen te scheiden, kunt u voorspelbare interactie-stromen ontwerpen..

Hoe de levenscyclus van een evenement werkt

We kunnen de dynamiek samenvatten in drie opeenvolgende stappen. Eerst wordt de gebeurtenis gegenereerd (door persoon, systeem, netwerk of hardware); die gebeurtenis komt in een gemeenschappelijk kanaal (wachtrij) terecht terwijl de gebeurtenislus toekijkt.

Ten tweede vindt er luisteren plaats. Ontvangers die op dat specifieke type gebeurtenis zijn geabonneerd, detecteren het. (bijvoorbeeld een 'klik'-listener of een 'data'-handler op een socket) en zijn klaar om actie te ondernemen.

Ten slotte wordt de afhandeling uitgevoerd. Een handler verwerkt het gebeurtenisobject, vraagt ​​de eigenschappen ervan op (type, bestemming, waarden) en beslist wat er moet gebeuren.: Werk de gebruikersinterface bij, valideer, verspreid, annuleer of verstuur nieuwe cascadegebeurtenissen.

Meest voorkomende soorten evenementen

In de praktijk kom je bekende families tegen. Als u de nuances hiervan kent, bespaart u zich een hoop hoofdpijn als het gaat om debuggen en instrumentatie.:

• Muis of aanwijzer: klikken, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove, contextmenu.
• toetsenbord: toetsindrukking, toetsindrukking, toetsaanslag (voor tekentoetsen).
• Venster en document: laden, fout (bij het laden van bronnen), formaat wijzigen, scrollen, pagina verbergen/pagina weergeven.
• vormen: invoer, wijzigen, verzenden, focus in/focus uit.
• Wiel/scrollen: wiel met horizontale en verticale scrollgegevens.

Naast de gebeurtenisnaam geeft het gebeurtenisobject aanvullende details. In de aanwijzer staan ​​clientX/pageX en clientY/pageY; op het toetsenbord staan ​​toetsen, codes of modifiers (shiftKey, altKey, ctrlKey).; in wheel, deltaX, deltaY en deltaMode om de eenheid te weten.

Luisteren en eventmanagement in de praktijk

Er zijn twee typische manieren op het web. Eén daarvan is het definiëren van handlers in de HTML zelf (attributen zoals onclick), handig voor prototypes of eenvoudige gevallen:

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

De andere, schonere en schaalbaardere, manier is om luisteraars te registreren vanuit JavaScript. Met addEventListener kunt u zich tijdens runtime abonneren en de weergave loskoppelen van de logica:

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

Elke handler ontvangt het gebeurtenisobject. Daar vindt u e.type, e.target, e.cancelable en sleutelmethoden zoals e.preventDefault() of e.stopPropagation() om het standaardgedrag te annuleren of de bubbel te stoppen.

Een typisch geval is het vastleggen van de waarde van een invoer zonder de pagina te vernieuwen: leest e.target.value in de wijzigings- of invoerhandler en je hebt de live tekst.

Codevoorbeelden in Node.js en Python

Node.js implementeert een zeer krachtig publicatie-/abonneerpatroon met de EventEmitter-klasse. Zo kunt u zelf uw bedrijfsevenementen definiëren en daarop reageren.:

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

Als u in Python met desktopinterfaces werkt, kunt u met tkinter eenvoudig widgets aan gebeurtenissen koppelen. Een knop, een frame of een venster kan worden gekoppeld aan muis- en toetsenbordacties:

# 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()

Als u de voorkeur geeft aan een eenvoudig voorbeeld van uw eigen emitter in Python (zonder GUI), U kunt abonnementen en meldingen simuleren met functielijsten:

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

Eigenschappen en methoden in visuele omgevingen (MIT App Inventor en vergelijkbare)

Bouwsteenontwikkelingstools zoals MIT App Inventor zijn een perfect voorbeeld van het event-driven paradigma. Elk onderdeel (knop, label, afbeelding) heeft eigenschappen, gebeurtenissen en methoden die je visueel manipuleert.

Eigenschappen beschrijven hoe een component eruitziet of zich gedraagt: lettergrootte, uitlijning, kleur, zichtbaarheid of tekst. Ze kunnen qua ontwerp worden vastgelegd of qua uitvoering worden gewijzigd om de interface aan te passen. op basis van binnenkomende interacties of gegevens.

Methoden zijn vooraf gedefinieerde acties die een component kan uitvoeren, zoals het verplaatsen van een venster, het focussen op een veld, het toevoegen van een item aan een lijst of het wissen van tekst. Je programmeert ze niet vanaf nul: de omgeving biedt ze je aan, klaar om te gebruiken..

Bij dit soort platforms wordt ook onderscheid gemaakt tussen automatische gebeurtenissen (bijvoorbeeld wanneer een scherm start) en gebeurtenissen die door de gebruiker worden geactiveerd (op een knop drukken, slepen, tikken, de telefoon kantelen). Deze scheiding is handig voor het orkestreren van navigatie en status. op een ordelijke manier.

GUI, CLI en de rol van het besturingssysteem

Besturingssystemen sturen gebeurtenissen naar de toepassing met de invoerfocus. In een GUI kan elk venster en elke widget zijn eigen gebeurtenissen ontvangen en verwerken. via de gebeurtenislus van de app.

Zelfs in opdrachtregelprogramma's zijn er vergelijkbare signalen: het proces kan wachten tot de gebruiker typt en op Enter drukt om de gebeurtenis 'invoer voltooid' als opgetreden te beschouwen. Het belangrijkste verschil is dat in CLI de stroom als lineair wordt ervaren, maar er nog steeds op gebeurtenissen wordt gewacht..

Stertoepassingen voor gebeurtenisgestuurd programmeren

Interactieve gebruikersinterfaces: Web-, desktop- en mobiele apparaten reageren direct op elk gebaar. De ervaring is natuurlijk omdat de logica precies wordt uitgevoerd wanneer de gebruiker erom vraagt.

Asynchrone communicatie:HTTP-servers, WebSockets, berichtenwachtrijen en microservices maken gebruik van het model om inkomende verzoeken te verwerken zonder ander werk te blokkeren.

Realtime verwerking: Telemetrie, IoT, handel, infrastructuurbewaking of industriële besturing zorgen ervoor dat er direct actie wordt ondernomen wanneer sensoren veranderingen detecteren. De gebeurtenis is de perfecte trigger om binnen milliseconden op de realiteit te reageren.

Voordelen en uitdagingen om te overwegen

Aan de andere kant, U krijgt interactiviteit, efficiëntie en schaalbaarheid:De code wordt alleen uitgevoerd als dat nodig is, de hoofdthread loopt niet vast en u kunt het werk verdelen over meerdere gespecialiseerde handlers.

In ruil, De complexiteit neemt toe met het aantal gebeurtenissen, luisteraars en asynchrone stromenZonder een helder ontwerp is het onderhoudbaar niet optimaal en ontstaan ​​er problemen zoals ongeordende ketening of moeilijk te testen handlers.

Goede werkwijzen voor het werken met evenementen

Consistent benoemd Voor handlers (onSubmit, handleClickCancel) moet u inline logica in de HTML vermijden en het abonnement centraliseren met addEventListener of het gebeurtenissysteem van uw framework.

Voorkomt lekken: Verwijdert listeners wanneer het onderdeel wordt vernietigd of het DOM-element verdwijnt. removeEventListener op het web of equivalente mechanismen in native frameworks en GUI's.

Valideert en beperkt: Gebruik e.preventDefault() op formulieren als deze nog niet gevalideerd zijn, en e.stopPropagation() als u niet wilt dat een gebeurtenis ook op voorouders wordt geactiveerd.

Ontkoppelen Domeingebeurtenissen publiceren (bijv. 'order.created') en andere modules zich hierop laten abonneren. Dit vermindert directe afhankelijkheden en maakt het gemakkelijker om je app te ontwikkelen.

Achter de voorkant: architectuur en patronen

Gebeurtenisgerichtheid stopt niet bij de interface. In de backend kun je gebruikmaken van wachtrijen (RabbitMQ, Kafka), brokers of interne bussen en clouddiensten zoals AWS om microservices niet-blokkerend en veerkrachtig te communiceren.

Nuttige patronen zijn onder meer: Evenement sourcing (de bron van de waarheid zijn gebeurtenissen), Gebeurtenis overgedragen staatsoverdracht (statusoverdracht via gebeurtenissen) of Outbox (zorgen voor betrouwbare publicatie vanuit de database). Ze berusten allemaal op hetzelfde principe: reageer op feiten..

Eigenschappen van gebeurtenisobjecten die u moet onthouden

Naast e.type en e.target zijn er nog een aantal zeer nuttige velden. In muis: clientX/clientY (ten opzichte van het venster) en pageX/pageY (ten opzichte van het document), welke (knop ingedrukt). Op het toetsenbord: toets, code en modificatoren zoals shiftKey, altKey en ctrlKey.

Voor het wiel, deltaX en deltaY markeren de verplaatsing en deltaMode geeft aan of de eenheden pixels, lijnen of pagina's zijn. Wanneer ze goed gecombineerd worden, kunt u nauwkeurige en toegankelijke interacties creëren.

Gebeurtenissen, eigenschappen en methoden in context

Om de visuele benadering samen te vatten: een component heeft eigenschappen (configuratie), gebeurtenissen (wat ermee gebeurt) en methoden (wat het weet hoe het moet doen)Deze triade komt voor in App Inventor, webframeworks en native SDK's.

Het wijzigen van eigenschappen tijdens runtime, bijvoorbeeld de lettergrootte of de kleur van een knop na validatie, is in dit model vanzelfsprekend. Koppel wijzigingen aan gebeurtenissen en u krijgt eenvoudig reactieve gebruikersinterfaces..

HTML en gebeurtenisdelegatie

Als de interface dynamisch wordt opgebouwd, kan het duur zijn om je op elk nieuw element te abonneren. Gebeurtenisdelegatie luistert naar een gemeenschappelijke container en filtert op e.target, wat lijsten of tabellen met rijen die verschijnen en verdwijnen, aanzienlijk vereenvoudigt.

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

Zo beheert één enkele listener alle huidige en toekomstige elementen binnen de #list-container. Minder abonnementen, minder geheugen en minder risico op lekken.

Hoe integreert het met netwerken en real-time?

In Node.js werken sockets en streams al op basis van gebeurtenissen: 'data', 'end', 'error', 'close'… Sluit gewoon handlers aan en laat de runtime de rest doen.In browsers volgen WebSocket en EventSource hetzelfde principe.

Voor IoT is de komst van metingen van sensoren de natuurlijke trigger. Een gebeurtenispijplijn kan bijgewerkte waarschuwingen of dashboards normaliseren, valideren en publiceren. zonder handmatige tussenkomst.

Begeleid leren en oefenen

Als je nog een stap verder wilt gaan, is het een goed idee om te oefenen met kleine projecten: een formulier met hot validation, een chat met WebSocket, een dashboard dat een stream gebruikt of een desktop-app met bindingen. Herhaling in verschillende contexten consolideert reflexen en patronen.

Een andere optie is om te trainen met intensieve programma's die basisprincipes, architectuur en implementatie combineren. Een goede bootcamp voor mobiele apps of moderne webontwikkeling zorgt ervoor dat je snel de kneepjes van het vak leert op het gebied van gebeurtenissen, asynchronie en interfacecompositie. klaar voor productie.

Met gebeurtenisgestuurd gedrag kunt u software bouwen die reageert op de manier waarop mensen verwachten: niet-blokkerend en precies op tijd. U kent nu de concepten (gebeurtenissen, emitters, ontvangers, lus), de meest voorkomende typen, het gebruik van het gebeurtenisobject, voorbeelden in Node.js en Python/tkinter, de rol van eigenschappen en methoden in visuele omgevingen, echte toepassingen en goede werkwijzen.Met deze basisprincipes is de overgang van klik naar resultaat een kwestie van goed luisteren, beter beheren en het systeem schoon en ontkoppeld houden.