Triển khai mô hình thiết kế trình quan sát trong TypeScript

Triển khai mô hình thiết kế trình quan sát trong TypeScript

Mẫu thiết kế là một mẫu giải quyết một vấn đề thường lặp lại trong thiết kế phần mềm.





Mẫu người quan sát, còn được gọi là mẫu đăng ký xuất bản, là một mẫu hành vi. Nó cho phép bạn thông báo cho nhiều đối tượng hoặc người đăng ký về bất kỳ sự kiện nào được công bố trong đối tượng mà họ đang quan sát.



LÀM VIDEO TRONG NGÀY

Ở đây bạn sẽ học cách triển khai mẫu thiết kế quan sát viên trong TypeScript.





Mẫu người quan sát

Mô hình người quan sát hoạt động bằng cách xác định mối quan hệ một-nhiều giữa nhà xuất bản và người đăng ký của họ. Khi một sự kiện xảy ra nhà xuất bản sẽ thông báo cho tất cả những người đăng ký tham gia sự kiện đó. Một ví dụ phổ biến của mô hình này là Trình nghe sự kiện JavaScript .

Đối với ngữ cảnh, giả sử bạn đang xây dựng một công cụ theo dõi hàng tồn kho để theo dõi số lượng sản phẩm trong cửa hàng của bạn. Trong trường hợp này, cửa hàng của bạn là chủ thể / nhà xuất bản và khoảng không quảng cáo của bạn là người quan sát / người đăng ký. Sử dụng mô hình thiết kế quan sát sẽ là tối ưu trong tình huống này.



Trong mẫu thiết kế trình quan sát, lớp chủ thể của bạn phải triển khai ba phương pháp:

  • Một gắn phương pháp. Phương pháp này thêm một người quan sát vào đối tượng.
  • Một tách ra phương pháp. Phương pháp này loại bỏ một người quan sát khỏi một chủ thể.
  • Một thông báo / cập nhật phương pháp. Phương pháp này thông báo cho người quan sát của đối tượng khi trạng thái thay đổi trong đối tượng.

Lớp quan sát viên của bạn phải triển khai một phương thức, cập nhật phương pháp. Phương pháp này phản ứng khi có sự thay đổi trong trạng thái của chủ thể.



Triển khai các lớp Đối tượng và Quan sát viên

Bước đầu tiên để thực hiện mô hình này là tạo giao diện cho đối tượng và lớp quan sát viên, để đảm bảo rằng chúng triển khai các phương thức chính xác:

// Subject/Publisher Interface 
interface Subject { 
    attachObserver(observer: Observer): void; 
    detachObserver(observer: Observer): void; 
    notifyObserver(): void; 
} 
  
// Observer/Subscriber Interface 
interface Observer { 
    update(subject: Subject): void; 
}

Các giao diện trong khối mã ở trên xác định các phương thức mà các lớp cụ thể của bạn phải triển khai.



windows xp emulator cho windows 10

Một lớp chủ đề bê tông

Bước tiếp theo là triển khai một lớp chủ đề cụ thể triển khai Môn học giao diện:

// Subject 
class Store implements Subject {}

Tiếp theo, khởi tạo Môn học Trạng thái của Cửa hàng lớp. Những người quan sát đối tượng sẽ phản ứng với những thay đổi đối với trạng thái này.

Trong trường hợp này, trạng thái là một con số và những người quan sát sẽ phản ứng với sự gia tăng số lượng:

// Subject state 
private numberOfProducts: number;

Tiếp theo, khởi tạo một mảng các quan sát viên. Mảng này là cách bạn sẽ theo dõi những người quan sát:

// initializing observers 
private observers: Observer[] = [];