Özet - Tasarım desenleri

JavaScript kursu · Uzman · Ders 6/63

Observer ve factory desenlerini kullanarak bir olay yayınlama kütüphanesi yazarsın.

Özet - Tasarım desenleri

Bu grupta dört yaygın tasarım desenini gördük:

Singleton: bir sınıftan tek örnek garantisi.
Factory: nesne üretimini ayırır.
Observer: olay yayını ve abonelik.
Module: IIFE ile gizli durum.

Son görevde Observer ve Factory desenlerini birleştirip küçük bir olay yayınlama kütüphanesi yazacağız. EventEmitter sınıfını ve createChannel fabrikasını birlikte kullanacağız.

Uygulama EventEmitter sınıfı

Bir EventEmitter sınıfı tanımla. on(event, callback) yöntemi, ilgili olayın abone dizisine callback'i ekler. emit(event, data) yöntemi, o olaya abone olan her callback'i data ile çağırır.

Örnek çözümü göster

class EventEmitter ile başla, on(event, callback) içinde this.listeners[event].push(callback) yap, emit(event, data) içinde cb(data) ile çağır.
Örnek çözüm:
class EventEmitter {
  constructor() {
    this.listeners = {};
  }
  on(event, callback) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
  }
  emit(event, data) {
    if (this.listeners[event]) {
      for (const cb of this.listeners[event]) {
        cb(data);
      }
    }
  }
}

Olay yayınlama kütüphanesi

İki adımlı mini görevimiz var. Önce EventEmitter sınıfını yazacaksın: on(event, callback) abone ekler, emit(event, data) tüm aboneleri çağırır.

Sonra createChannel(name) fabrika fonksiyonunu ekleyeceksin. Her çağrıda yeni bir EventEmitter örneği üretip subscribe ve publish yöntemleriyle sarmalar.

Böylece Observer (yayın) ve Factory (üretim) desenlerini birlikte kullanmış olursun.

Uygulama createChannel fabrikası

createChannel(name) fabrika fonksiyonunu yaz. İçinde yeni bir EventEmitter örneği oluştursun. Döndürdüğü nesnede subscribe(callback) ve publish(data) yöntemleri olsun. subscribe yöntemi emitter.on çağrısı yapsın; publish yöntemi emitter.emit çağrısı yapsın.

Örnek çözümü göster

function createChannel(name) ile başla, const emitter = new EventEmitter(); yap, return { subscribe(callback) { emitter.on('message', callback); }, publish(data) { emitter.emit('message', data); } }; ile bitir.
Örnek çözüm:
function createChannel(name) {
  const emitter = new EventEmitter();
  return {
    name: name,
    subscribe(callback) {
      emitter.on('message', callback);
    },
    publish(data) {
      emitter.emit('message', data);
    }
  };
}

Kendini test et

Olay yayınlama kütüphanesinde Factory deseninin rolü nedir?
- Abone listesini gizlemek
- Sınıf adını değiştirmek
- Yeni kanal örnekleri üretmek
- Etkinlikleri sıralamak
Cevabı göster

Yeni kanal örnekleri üretmek — Doğru! createChannel fabrikası, her çağrıda yeni bir kanal üretir.
Desenleri eşleştir

Singleton

Tek örnek
Factory

Nesne üretimi
Observer

Olay yayını
Module

Gizli durum

Uzman bölümündeki tüm dersler

Özet - Tasarım desenleri