Thanh's second brain

Observer pattern

Observer pattern (còn gọi là pub/sub pattern) là một behavioral design pattern, trong đó một object gọi là subject duy trì danh sách các dependent gọi là observer và tự động thông báo cho chúng mỗi khi trạng thái thay đổi, thường bằng cách gọi một method của observer. Pattern này giải quyết bài toán thông báo cho nhiều thành phần biết về sự thay đổi của một thành phần, qua đó giảm phụ thuộc giữa các thành phần và giúp mở rộng hệ thống mà không phải sửa nhiều mã nguồn.

Cơ chế

Subject (observable) cung cấp ba thao tác cốt lõi: đăng ký một observer vào danh sách listener, hủy đăng ký một observer khỏi danh sách, và thông báo để trigger toàn bộ listener khi có thay đổi. Mỗi observer cài đặt một method update để nhận thông báo từ subject.

class Observable {
  private observers: Observer[] = [];

  registerObserver(o: Observer) { this.observers.push(o); }
  unregisterObserver(o: Observer) {
    this.observers = this.observers.filter((x) => x !== o);
  }
  notifyObservers() { this.observers.forEach((o) => o.update()); }
}

Áp dụng trong web frontend

Trong một ứng dụng web, data model đóng vai trò subject còn UI đóng vai trò observer: mọi thay đổi của data model được ánh xạ lên UI thông qua việc gọi notifyObservers. Một todo application minh họa rõ điều này khi tách thành model và view. Model (kế thừa observable) chứa toàn bộ logic quản lý danh sách task và gọi notifyObservers sau mỗi lần thêm hoặc cập nhật task. View (là observer) đăng ký với model lúc khởi tạo, cài đặt update để render lại danh sách lên DOM, đồng thời truyền các event từ UI ngược về model khi người dùng tương tác.

Việc tách model và view theo cách này tách phần logic ứng dụng khỏi phần hiển thị, giúp mã nguồn dễ đọc và dễ bảo trì. Cũng chính cơ chế này được các framework lớn như React, Angular và Vue dùng để quản lý state và đồng bộ lên UI.

Nguồn tham khảo

Liên kết tri thức

Tags