Apakah corak Observer?

Question

Accepted Answer

Corak **Observer** mentakrifkan **kebergantungan satu-ke-banyak** di mana berbilang objek (observers) dimaklumkan secara automatik apabila objek lain (subject) menukar keadaannya. Ia membolehkan komunikasi yang dipisahkan dan dipacu peristiwa (event-driven) — digunakan secara meluas dalam UI, sistem peristiwa, dan pengaturcaraan reaktif.

## Apa yang dilakukan corak Observer

```text
OBSERVER → a SUBJECT maintains a list of OBSERVERS and NOTIFIES them on state changes:
  → observers SUBSCRIBE to the subject
  → when the subject changes → it notifies ALL subscribed observers automatically
  → observers react to the notification (update themselves)
→ one-to-many: one subject, many observers; DECOUPLED (subject doesn't know observer details)
```

## Contoh

```js
class Subject {
  observers = [];
  subscribe(obs) { this.observers.push(obs); }
  notify(data) { this.observers.forEach(obs => obs.update(data)); }  // notify all
}
// observers implement update(); they subscribe and get notified on changes
subject.subscribe({ update: (data) => console.log('notified:', data) });
subject.notify('state changed');   // all observers are called
```

## Di mana ia digunakan (sangat biasa)

```text
✓ UI EVENTS → event listeners (click handlers) are observers of UI events
✓ REACTIVE programming / state management → components observe state changes (re-render)
✓ PUB/SUB and event systems → subscribers react to published events
✓ MVC → views observe the model; notifications (e.g. RxJS, signals, event emitters)
→ one of the most widely-used patterns (event-driven systems everywhere)
```

## Mengapa ia penting

Memahami corak Observer adalah bernilai kerana ia merupakan **salah satu corak yang paling banyak digunakan**, mendasari sistem dipacu peristiwa dan reaktif di mana-mana, jadi ia pengetahuan reka bentuk yang penting dan boleh diterapkan secara meluas.

Corak Observer — kebergantungan satu-ke-banyak di mana subject memaklumkan observers-nya secara automatik apabila keadaannya berubah — membolehkan **komunikasi dipisahkan yang dipacu peristiwa**, yang merupakan asas kepada cara banyak perisian moden berfungsi.

Memahami mekanisme (observers melanggan subject, subject memaklumkan kesemuanya apabila berlaku perubahan, observers bertindak balas — dengan subject dipisahkan daripada butiran observer) ialah pengetahuan asas.

Yang paling penting, memahami **di mana ia digunakan** mendedahkan keserataannya: **UI events** (event listeners dan click handlers ialah observers), **pengaturcaraan reaktif dan state management** (komponen yang memerhati perubahan keadaan untuk re-render — penting bagi framework seperti React), **pub/sub dan sistem peristiwa** (subscribers yang bertindak balas terhadap peristiwa), dan MVC (views yang memerhati models), serta pustaka reaktif (RxJS, signals, event emitters).

Mengiktiraf bahawa corak Observer mendasari mekanisme yang ada di mana-mana ini menjadikannya salah satu corak yang paling penting secara praktikal untuk difahami, kerana pengaturcaraan dipacu peristiwa dan reaktif ada di mana-mana dalam perisian moden (UI, state management, sistem peristiwa).

Memahaminya membantu anda mengenali dan menaakul corak ini di seluruh kod yang anda kerjakan.

Memandangkan corak Observer ialah salah satu corak yang paling banyak digunakan (mendasari UI events, pengaturcaraan reaktif, state management, dan pub/sub — meluas dalam perisian moden) dan membolehkan komunikasi dipisahkan yang dipacu peristiwa yang menjadi teras kepada cara banyak perisian berfungsi, dan kerana memahaminya membantu anda mengenali serta menggunakan mekanisme yang ada di mana-mana ini, memahami corak Observer merupakan pengetahuan reka bentuk yang bernilai dan boleh diterapkan secara meluas — salah satu corak yang paling penting dan banyak digunakan, mendasari sistem dipacu peristiwa dan reaktif yang meluas dalam perisian moden, serta penting untuk memahami cara UI, state management, dan sistem peristiwa berfungsi.