- Reaktif model: Olaylar, bir olay döngüsünde işleyicileri tetikler.
- Temel kavramlar: Göndericiler, alıcılar, olay nesneleri ve dinleyiciler.
- Uygulamalar: arayüzler, asenkron iletişim ve gerçek zamanlı/IoT.
- Uygulama: addEventListener, preventDefault, Node.js ve tkinter.
Olay odaklı programlama, bir uygulamanın katı bir adım listesine bağlı kalmak yerine çevresine tepki verdiği bir geliştirme tarzıdır. Yazılım, A noktasından B noktasına sırayla ilerlemek yerine, olayları bekler ve birisi tıkladığında, veri geldiğinde veya sistem durumu değiştiğinde yanıt verir.
Daha çok sıralı programlama geçmişiniz varsa, bu yaklaşım zengin arayüzler, yüksek yük altındaki hizmetler ve canlı iş akışlarını işleyen sistemler için birçok olasılık sunar. Bu yaklaşımı kolayca öğrenmenize yardımcı olmak için kavramlar, mimari, olay türleri, pratik kod (JavaScript, Node.js ve Python/tkinter) ve en iyi uygulamalar hakkında kapsamlı bir genel bakış sunuyorum .
Olay odaklı programlama nedir?
Bu paradigmada, mantık ilgili bir şey olduğunda etkinleşir: kullanıcı etkileşimi, ağ mesajları, sensörler, zamanlayıcılar veya programcı tarafından tanımlanan herhangi bir sinyal. Bu "şey"e olay denir ve yürütmek istediğiniz yanıtı içeren bir veya daha fazla işleyiciyi tetikler.
Buradaki kilit nokta, olayların eşzamansız, hatta paralel olarak bile gerçekleşebilmesidir. Program, olayları toplayan, sıraya koyan ve alıcılarına dağıtan bir olay döngüsü kullanarak sürekli tetikte kalır ve uygulamanın yanıt vermesini ve engellememesini sağlar.
Temel kavramlar: olaylar, yayıcılar, alıcılar ve döngü
Bir olay, bir şeyin gerçekleştiğinin tezahürüdür: tıklama, çift tıklama, tuşa basma, indirme işleminin sonu, ağ paketinin gelmesi, pencerenin açılması vb. Genellikle veri (yük) ve ne olduğunu açıklayan bir bağlam taşır ve bu da işleyici tarafından kararlar alınmasına olanak tanır.
Olayları üreten bileşenlere yayıcılar; bunlara yanıt verenlere ise alıcılar veya dinleyiciler denir. Aralarındaki bağlantı, her olay türü için hangi fonksiyonun yürütülmesi gerektiğini belirten abonelik mekanizmaları (dinleyiciler) veya bağlama yoluyla kurulur.
Sistemin kalbi olay döngüsüdür. Bu döngü, bekleyen olayları toplar, sıralar ve ilgili işleyicilere iletir. Bu yapı sayesinde uygulama, arayüzü bloke etmeden veya kaynakları israf etmeden birden fazla uyarıcıya tepki verebilir.
Görsel ve mobil ortamlarda, kullanıcı tarafından başlatılan olaylar (tıklama, sürükleme, dokunma, cihazı eğme) ve otomatik olaylar (ekran açma, zamanlayıcıyı tetikleme, odak değiştirme) arasında da ayrım yapacaksınız. Bu iki grubu ayırmak, öngörülebilir etkileşim akışları tasarlamanıza yardımcı olur.
Olay yaşam döngüsü nasıl çalışır?
Dinamikleri birbirine bağlı üç adımda özetleyebiliriz. İlk olarak, olay oluşturulur (kişi, sistem, ağ veya donanım tarafından) ; bu olay, olay döngüsü izlerken ortak bir kanala (kuyruğa) girer.
İkinci olarak, dinleme gerçekleşir. Bu özel olay türüne abone olan alıcılar olayı algılar (örneğin, bir soketteki 'tıklama' dinleyicisi veya 'veri' işleyicisi) ve harekete geçmeye hazır hale gelir.
Son olarak, işleme aşaması gerçekleşir. Bir denetleyici, olay nesnesini işler, özelliklerini (tür, hedef, değerler) kontrol eder ve ne yapacağına karar verir : kullanıcı arayüzünü güncellemek, doğrulamak, yaymak, iptal etmek veya yeni ardışık olaylar yaymak.
En sık görülen olay türleri
Pratikte, iyi bilinen ailelerle karşılaşacaksınız. Bu ailelerin inceliklerini anlamak, onları geliştirme ve uygulama aşamasında size birçok baş ağrısından kurtaracaktır.
- Fare veya işaretçi: tıkla, çift tıkla, fareyi aşağı indir, fareyi yukarı kaldır, fareyi üzerine getir, fareyi kaldır, fareyi hareket ettir, içerik menüsü.
- klavye: tuşa bas, tuşa bas, tuşa bas (karakter tuşları için).
- Pencere ve belge: yükle, hata (kaynaklar yüklenirken), yeniden boyutlandır, kaydır, sayfa gizle/sayfa göster.
- formlar: giriş, değişiklik, gönderme, odaklanma/odaklanmama.
- Tekerlek/kaydırma: yatay ve dikey kaydırma verilerinin bulunduğu tekerlek.
Olay nesnesi, olay adına ek olarak fazladan ayrıntılar da sağlar. İşaretçiler için clientX/pageX ve clientY/pageY; klavyeler için tuş, kod veya değiştirici tuşlar (shiftKey, altKey, ctrlKey) kontrol edilir ; tekerlek verileri için ise birimi belirlemek üzere deltaX, deltaY ve deltaMode bulunur.
Uygulamada dinleme ve etkinlik yönetimi
Web'de iki tipik yaklaşım vardır. Bunlardan biri , prototipler veya basit durumlar için kullanışlı olan, HTML'nin kendisinde olay işleyicileri tanımlamaktır (onclick gibi öznitelikler) :
<!-- myClickHandler es la función JS que manejará el evento -->
<button onclick='myClickHandler()'>Púlsame</button>
<script>
function myClickHandler(){
alert('Hola');
}
</script>Diğer, daha temiz ve daha ölçeklenebilir seçenek ise JavaScript'ten dinleyiciler kaydetmektir. `addEventListener`, çalışma zamanında abone olmanıza ve görünümü mantıktan ayırmanıza olanak tanır.
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);Her işleyici, olay nesnesini alır. Orada e.type, e.target, e.cancelable ve varsayılan davranışı iptal etmek veya yayılmayı durdurmak için e.preventDefault() veya e.stopPropagation() gibi önemli yöntemler bulacaksınız .
Tipik bir örnek, sayfayı yenilemeden bir giriş alanının değerini yakalamaktır: değişiklik veya giriş işleyicisi içinde e.target.value'yu okuyun ve metni anında elde edeceksiniz.
Node.js ve Python'da kod örnekleri
Node.js, EventEmitter sınıfı ile güçlü bir yayınlama/abone olma modeli uygular. Bu, kendi iş olaylarınızı tanımlamanıza ve bunlara tepki vermenize olanak tanır.
// 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');Python'da, masaüstü arayüzleriyle çalışıyorsanız, tkinter widget'ları olaylara bağlamayı kolaylaştırır. Bir düğme, bir çerçeve veya bir pencere fare ve klavye eylemleriyle ilişkilendirilebilir.
# 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()Python'da (GUI olmadan) özel bir yayıncıya ilişkin basit bir örnek tercih ediyorsanız, fonksiyon listeleri kullanarak abonelik ve bildirim işlemlerini simüle edebilirsiniz :
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')Görsel ortamlardaki özellikler ve yöntemler (MIT App Inventor ve benzeri)
MIT App Inventor gibi blok tabanlı geliştirme araçları, olay odaklı bir paradigmanın mükemmel bir örneğidir. Her bileşen (düğme, etiket, resim) görsel olarak manipüle ettiğiniz özelliklere, olaylara ve yöntemlere sahiptir .
Özellikler, bir bileşenin nasıl "göründüğünü" veya "davrandığını" tanımlar: yazı tipi boyutu, hizalama, renk, görünürlük veya metin. Bunlar tasarım aşamasında ayarlanabilir veya etkileşimlere veya gelen verilere göre arayüzü uyarlamak için çalışma zamanında değiştirilebilir.
Metotlar, bir bileşenin nasıl yapılacağını bildiği önceden tanımlanmış eylemlerdir; örneğin bir pencereyi taşımak, bir alanı odaklamak, bir listeye öğe eklemek veya metni temizlemek gibi. Bunları sıfırdan programlamazsınız: ortam, çağrılmaya hazır olarak bunları sağlar.
Bu tür platformlarda, otomatik olaylar (örneğin, bir ekranın başlaması) ve kullanıcı tarafından tetiklenen olaylar (bir düğmeye basma, sürükleme, dokunma, telefonu eğme) arasında da ayrım yaparsınız. Bu ayrım, gezinmeyi ve durumu düzenli bir şekilde yönetmek için faydalıdır .
GUI, CLI ve İşletim Sisteminin Rolü
İşletim sistemleri, giriş odağına sahip uygulamaya olaylar gönderir. Grafik kullanıcı arayüzünde (GUI), her pencere veya bileşen, uygulamanın olay döngüsü aracılığıyla kendi olaylarını alabilir ve işleyebilir .
Komut satırı programlarında bile benzer sinyaller vardır: işlem, "giriş tamamlandı" olayının gerçekleştiğini kabul etmek için kullanıcının bir şey yazıp Enter tuşuna basmasını bekleyebilir. Temel fark, CLI'da akışın doğrusal olarak algılanmasıdır, ancak yine de olaylar için beklemeler vardır.
Olay odaklı programlama için yıldız uygulamaları
Etkileşimli kullanıcı arayüzleri : Web siteleri, masaüstü bilgisayarlar ve mobil cihazlar her harekete anında tepki verir. Mantık, kullanıcının istediği anda tam olarak çalıştığı için deneyim doğal hissettirir.
Asenkron iletişim : HTTP sunucuları, WebSocket'ler, mesaj kuyrukları ve mikro hizmetler, diğer işleri engellemeden gelen istekleri işlemek için bu modeli kullanır.
Gerçek zamanlı işlemleme —telemetri, IoT, ticaret, altyapı izleme ve endüstriyel kontrol— sensörler tarafından algılanan değişikliklere yanıt olarak anında eylemleri tetikler. Olayın kendisi, gerçekliğe milisaniyeler içinde tepki vermek için mükemmel bir tetikleyicidir.
Dikkate alınması gereken avantajlar ve zorluklar
Olumlu yönlerine bakacak olursak, etkileşim, verimlilik ve ölçeklenebilirlik kazanırsınız : kod yalnızca gerektiğinde çalışır, ana iş parçacığı takılıp kalmaz ve işi çeşitli uzmanlaşmış işleyiciler arasında dağıtabilirsiniz.
Tersine, olayların, dinleyicilerin ve eşzamansız akışların sayısı arttıkça karmaşıklık da artar . Net bir tasarım olmadan, sürdürülebilirlik azalır ve düzensiz zincirleme veya test edilmesi zor işleyiciler gibi sorunlar ortaya çıkar.
Etkinliklerle çalışmaya yönelik iyi uygulamalar
Olay işleyicileri için tutarlı adlandırma (onSubmit, handleClickCancel), HTML'de satır içi mantığı önler ve aboneliği addEventListener veya çerçeve sisteminizin olay sistemiyle merkezileştirir.
Sızıntıları önleyin : Bileşen yok edildiğinde veya DOM öğesi kaybolduğunda dinleyicileri kaldırın. Web'de `removeEventListener` veya çerçevelerde ve yerel GUI'lerde eşdeğer mekanizmalar kullanın.
Doğrulama ve sınırlama : Doğrulama henüz geçmediyse formlarda `e.preventDefault()` kullanın ve üst öğelerde de olayın tetiklenmesini istemiyorsanız `e.stopPropagation()` kullanın.
Alan olaylarını (örneğin, 'sipariş oluşturuldu') yayınlayarak ve diğer modüllerin abone olmasına izin vererek bağımlılıkları azaltın . Bu, doğrudan bağımlılıkları azaltır ve uygulamanın geliştirilmesini kolaylaştırır.
Cephenin ötesinde: mimari ve desenler
Olay odaklı hesaplama yalnızca ön uçla sınırlı değildir. Arka uçta, mikro hizmetler arasında engellemeyen ve dayanıklı iletişimi sağlamak için kuyruklar (RabbitMQ, Kafka), aracı sunucular, dahili veri yolları ve AWS gibi bulut hizmetleri kullanabilirsiniz .
Faydalı kalıplar arasında Olay Kaynaklama (olaylar gerçeğin kaynağıdır), Olayla Taşınan Durum Aktarımı (durumun olaylar aracılığıyla aktarılması) ve Çıkış Kutusu (veritabanından güvenilir yayın sağlama) yer alır. Hepsi aynı prensibe dayanır: olaylara tepki vermek.
Ezberlemeniz gereken olay nesnesi özellikleri
e.type ve e.target'a ek olarak, çok kullanışlı bazı alanlar da mevcuttur. Fare girişi için : clientX/clientY (pencereye göre) ve pageX/pageY (belgeye göre) ve which (basılan düğme). Klavye girişi için : key, code ve shiftKey, altKey ve ctrlKey gibi değiştirici tuşlar.
Tekerlek için deltaX ve deltaY yer değiştirmeyi tanımlarken , deltaMode birimlerin piksel, satır veya sayfa olup olmadığını gösterir. Bunlar etkili bir şekilde birleştirildiğinde, hassas ve erişilebilir etkileşimler oluşturmanıza olanak tanır.
Bağlamdaki olaylar, özellikler ve yöntemler
Görsel yaklaşımı özetlemek gerekirse: bir bileşenin özellikleri (yapılandırma), olayları (ona ne olduğu) ve yöntemleri (nasıl yapacağını bildiği) vardır . Bu üçlü, App Inventor'da, web çerçevelerinde ve yerel SDK'larda bulunur.
Bu modelde, doğrulama sonrasında yazı tipi boyutu veya düğme rengi gibi özellikleri çalışma zamanında değiştirmek doğaldır. Bu değişiklikleri olaylara bağlayarak, kolayca reaktif kullanıcı arayüzleri elde edebilirsiniz.
HTML ve olay delegasyonu
Arayüz dinamik olarak oluşturulduğunda, her yeni öğeye abone olmak maliyetli olabilir. Olay delegasyonu, ortak bir kapsayıcıyı dinler ve `e.target` ile filtreleme yapar ; bu da satırları görünüp kaybolan listeler veya tabloları büyük ölçüde basitleştirir.
document.querySelector('#lista').addEventListener('click', (e) => {
if (e.target.matches('li.removible')) {
e.target.remove();
}
});Bu sayede, tek bir dinleyici #list kapsayıcısı içindeki tüm mevcut ve gelecekteki öğeleri yönetir. Daha az abonelik, daha az bellek kullanımı ve daha az bellek sızıntısı riski.
Ağlarla ve gerçek zamanla nasıl entegre oluyor?
Node.js'de soketler ve akışlar zaten 'data', 'end', 'error', 'close' gibi olaylara dayalı olarak çalışır. Sadece işleyicileri eklemeniz ve gerisini çalışma zamanına bırakmanız yeterlidir . Tarayıcılarda WebSocket ve EventSource aynı prensibi izler.
Nesnelerin İnterneti (IoT) için sensörlerden gelen ölçümler doğal bir tetikleyicidir. Bir olay işlem hattı, manuel müdahaleye gerek kalmadan güncellenmiş uyarıları veya gösterge panellerini normalleştirebilir, doğrulayabilir ve yayınlayabilir .
Rehberli öğrenme ve uygulama
Bir adım daha ileri gitmek isterseniz, küçük projelerle pratik yapmak iyi bir fikirdir: anlık doğrulama içeren bir form, WebSockets kullanan bir sohbet uygulaması, bir akışı tüketen bir kontrol paneli veya bağlamalar içeren bir masaüstü uygulaması. Farklı bağlamlarda tekrar, refleksleri ve kalıpları güçlendirir.
Bir diğer seçenek ise temelleri, mimariyi ve dağıtımı birleştiren yoğun programlarla eğitim almaktır. İyi bir mobil uygulama veya modern web geliştirme eğitim kampı, olaylar, eşzamansızlık ve üretime hazır arayüzler oluşturma konusunda sizi hızlandıracaktır .
Olay odaklı yazılım, insanların beklediği gibi yanıt veren yazılımlar oluşturmanıza olanak tanır: engelleme yapmadan ve doğru anda. Artık kavramlara (olaylar, göndericiler, alıcılar, döngüler), en yaygın türlere, olay nesnesinin nasıl kullanılacağına, Node.js ve Python/tkinter örneklerine, görsel ortamlarda özelliklerin ve yöntemlerin rolüne, gerçek dünya uygulamalarına ve en iyi uygulamalara sahipsiniz . Bu temel üzerine, tıklamadan sonuca ulaşmak, dikkatlice dinlemek, daha iyi yönetmek ve sistemi temiz ve bağımsız tutmak meselesi olacaktır.
