Observer Pattern

Observer Pattern nima?

Observer Pattern — bu behavioral design pattern bo‘lib, u yordamida biz ma’lum obyektlarni — observersni — boshqa bir obyektga, ya’ni observablega subscribe qila olamiz. Qachonki biror event sodir bo‘lsa, observable barcha observerlarni xabardor qiladi (notify qiladi). Bu pattern one-to-many dependency yaratadi, bitta Subject → ko‘p Observers.

Subject(observable) object odatda 3 ta muhim qismdan iborat bo‘ladi:

observers: ma’lum bir event sodir bo‘lganda xabardor qilinadigan observerlar ro’yxati
subscribe(): observerlarni observers ro‘yxatiga qo‘shish uchun method
unsubscribe(): observerlarni observers ro‘yxatidan olib tashlash uchun method
notify(): ma’lum bir event sodir bo‘lganda barcha observerlarni xabardor qilish uchun method

Oddiy misol (Vanilla JavaScript)

class Subject {
  constructor() {
    this.observers = [];
  }
  subscribe(observer) {
    this.observers.push(observer);
  }
  unsubscribe(observer) {
    this.observers = this.observers.filter((obs) => obs !== observer);
  }
  notify(data) {
    this.observers.forEach((observer) => observer(data));
  }
}

Endi biz subscribe methodi orqali observerlarni observers ro‘yxatiga qo‘sha olamiz, unsubscribe methodi orqali ularni olib tashlaymiz va notify methodi yordamida barcha subscribe bo‘lganlarni xabardor qilamiz.

import { toast } from "react-toastify";

const subject = new Subject();

const logger = (log) => console.log("Log: ", log);
const toastify = (data) => toast(`Toast: ${data}`);

subject.subscribe(logger);
subject.subscribe(toastify);

subject.notify("Yangi ma'lumot!");
// Log: Yangi ma'lumot!
// Toast: Yangi ma'lumot!

subject.unsubscribe(logger);
subject.notify("Yana yangilik!");
// Toast: Yana yangilik!