Observer pattern คืออะไร?

Question

Accepted Answer

**Observer** pattern กำหนด **dependency แบบหนึ่งต่อหลาย** ที่อ็อบเจ็กต์หลายตัว (observer) ได้รับการแจ้งเตือนโดยอัตโนมัติเมื่ออ็อบเจ็กต์อีกตัว (subject) เปลี่ยนสถานะ มันช่วยให้เกิดการสื่อสารแบบ event-driven ที่ลด coupling ซึ่งถูกใช้อย่างกว้างขวางใน UI, ระบบ event และ reactive programming

## Observer pattern ทำอะไร

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

## ตัวอย่าง

```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
```

## ที่ที่ถูกใช้ (พบบ่อยมาก)

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

## ทำไมจึงสำคัญ

การเข้าใจ Observer pattern มีคุณค่า เพราะมันเป็น**หนึ่งใน pattern ที่ถูกใช้อย่างกว้างขวางที่สุด** ซึ่งเป็นพื้นฐานของระบบ event-driven และ reactive ทุกหนแห่ง จึงเป็นความรู้การออกแบบที่สำคัญและนำไปใช้ได้กว้าง

Observer pattern ซึ่งเป็น dependency แบบหนึ่งต่อหลายที่ subject แจ้งเตือน observer ของมันโดยอัตโนมัติเมื่อสถานะเปลี่ยน ช่วยให้เกิด**การสื่อสารแบบ event-driven ที่ลด coupling** ซึ่งเป็นพื้นฐานของวิธีที่ซอฟต์แวร์สมัยใหม่จำนวนมากทำงาน

การเข้าใจกลไก (observer subscribe ไปยัง subject, subject แจ้งเตือนทั้งหมดเมื่อมีการเปลี่ยนแปลง, observer ตอบสนอง โดยที่ subject ถูกแยกออกจากรายละเอียดของ observer) เป็นความรู้พื้นฐาน

สิ่งที่สำคัญที่สุดคือ การเข้าใจ**ที่ที่ถูกใช้**เผยให้เห็นความแพร่หลายของมัน ได้แก่ **UI events** (event listener และ click handler คือ observer), **reactive programming และ state management** (component สังเกตการเปลี่ยนแปลงสถานะเพื่อ re-render ซึ่งเป็นแกนหลักของ framework อย่าง React), **pub/sub และระบบ event** (subscriber ตอบสนองต่อ event) และ MVC (view สังเกต model) รวมถึง reactive library (RxJS, signals, event emitters)

การตระหนักว่า Observer pattern เป็นพื้นฐานของกลไกที่พบเห็นทั่วไปเหล่านี้ทำให้มันเป็นหนึ่งใน pattern ที่สำคัญที่สุดในเชิงปฏิบัติที่ควรเข้าใจ เพราะ event-driven และ reactive programming อยู่ทุกหนแห่งในซอฟต์แวร์สมัยใหม่ (UI, state management, ระบบ event)

การเข้าใจมันช่วยให้คุณรู้จักและเข้าใจ pattern เหล่านี้ทั่วทั้งโค้ดที่คุณทำงานด้วย

เนื่องจาก Observer pattern เป็นหนึ่งใน pattern ที่ถูกใช้อย่างกว้างขวางที่สุด (เป็นพื้นฐานของ UI events, reactive programming, state management และ pub/sub ซึ่งแพร่หลายในซอฟต์แวร์สมัยใหม่) และช่วยให้เกิดการสื่อสารแบบ event-driven ที่ลด coupling ซึ่งเป็นแกนหลักของวิธีที่ซอฟต์แวร์จำนวนมากทำงาน และเนื่องจากการเข้าใจมันช่วยให้คุณรู้จักและใช้กลไกที่พบเห็นทั่วไปเหล่านี้ การเข้าใจ Observer pattern จึงเป็นความรู้การออกแบบที่มีคุณค่าและนำไปใช้ได้กว้าง เป็นหนึ่งใน pattern ที่สำคัญและถูกใช้มากที่สุด เป็นพื้นฐานของระบบ event-driven และ reactive ที่แพร่หลายในซอฟต์แวร์สมัยใหม่ และจำเป็นต่อการเข้าใจว่า UI, state management และระบบ event ทำงานอย่างไร