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.

Ở đâ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ẫu này là trình xử lý 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 những 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 thức 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:

interface Subject {
attachObserver(observer: Observer): void;
detachObserver(observer: Observer): void;
notifyObserver(): void;
}

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.

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:

class Store implements Subject {}

Tiếp theo, khởi tạo Môn họctrạ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:

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:

private observers: Observer[] = [];

Bạn có thể tìm thấy một số triển khai của mẫu người quan sát bằng cách sử dụng cấu trúc Dữ liệu đặt thay cho một mảng để theo dõi người quan sát. Sử dụng một Bộ sẽ đảm bảo rằng cùng một người quan sát sẽ không xuất hiện hai lần. Nếu bạn muốn sử dụng một mảng thay thế, bạn nên kiểm tra các quan sát viên trùng lặp trong gắn phương pháp.

Tiếp theo, bạn nên triển khai Môn họcphương pháp của—gắn, tách ravà thông báo / cập nhật—Trong lớp cụ thể của bạn.

Để thực hiện gắn phương pháp, trước tiên hãy kiểm tra xem trình quan sát đã được đính kèm chưa và thông báo lỗi nếu có. Nếu không, hãy thêm trình quan sát vào mảng bằng phương thức mảng JavaScript, đẩy:

attachObserver(observer: Observer): void {
const observerExists = this.observers.includes(observer);
if (observerExists) {
throw new Error('Observer has already been subscribed ');
}

this.observers.push(observer);
}

Tiếp theo, triển khai tách ra bằng cách tìm chỉ mục và xóa nó khỏi mảng bằng JavaScript mối nối phương pháp.

Có thể có các tình huống trong đó người quan sát bạn đang cố gắng tách ra đã bị tách ra hoặc không được đăng ký ngay từ đầu. Bạn nên xử lý các tình huống này bằng cách thêm câu lệnh điều kiện để kiểm tra xem người quan sát có nằm trong mảng hoặc tập hợp tùy trường hợp hay không.

detachObserver(observer: Observer): void {
console.log(`Detaching observer ${JSON.stringify(observer)}`);
const observerIndex = this.observers.indexOf(observer);
if (observerIndex === -1) {
throw new Error('Observer does not exist');
}
this.observers.splice(observerIndex, 1);
console.log('Observer detached...');
}

Tiếp theo, triển khai thông báo / cập nhật bằng cách lặp lại danh sách những người quan sát của bạn và gọi cập nhật phương pháp của từng cái:

notifyObserver(): void {
console.log('Notifying observers...');
for (const observer of this.observers) {
observer.update(this);
}
}

Cuối cùng, đối với Môn học lớp, thực hiện một phương thức thao tác trạng thái và sau đó thông báo cho những người quan sát về sự thay đổi bằng cách gọi thông báo / cập nhật phương pháp. Ví dụ này là sự đơn giản hóa cách một chủ thể có thể thực hiện một hành động và sau đó thông báo cho người quan sát:

newProduct(products: number): void {
this.numberOfProducts += products;
console.log('New product added to the store');
this.notifyObserver();
}

Các lớp quan sát viên bê tông

Tạo một hoặc các lớp quan sát viên, để đăng ký với nhà xuất bản. Mỗi lớp quan sát viên phải thực hiện Người quan sát giao diện.

Các lớp quan sát viên sẽ thực hiện một thông báo / cập nhật phương pháp mà chỉ chủ thể mà họ đang quan sát mới nên gọi. Phương thức này phải chứa tất cả logic nghiệp vụ bạn cần chạy để đáp ứng với sự thay đổi trong trạng thái của chủ thể:

class Inventory implements Observer {
update(): void {
console.log('New product added to the store, updating inventory...');
}
}

class Customer implements Observer {
update(): void {
console.log('New product added to the store, I have to go check it out...');
}
}

Sử dụng mô hình trình quan sát

Để sử dụng mẫu này, hãy khởi tạo đối tượng cụ thể và các lớp quan sát viên. Khi bạn đã làm như vậy, hãy gọi Chủ đề của gắn và chuyển thể hiện Observer làm đối số. Đáp lại, đối tượng sẽ thêm cá thể đó vào danh sách những người quan sát:

const store = new Store();
const inventory = new Inventory();
const customer = new Customer()

store.attachObserver(inventory);
store.attachObserver(customer);
store.newProduct(30);

Mã này mô phỏng một sự thay đổi trạng thái. Thay đổi sẽ kích hoạt phương thức thông báo trên Môn học lớp. Phương thức này, đến lượt nó, gọi thông báo phương pháp trên mỗi quan sát viên của nó. Mỗi người quan sát sau đó sẽ điều hành logic nghiệp vụ của riêng mình.

Bạn chỉ nên sử dụng mẫu này khi các thay đổi đối với trạng thái của một đối tượng ảnh hưởng đến các đối tượng khác và tập hợp các đối tượng liên quan là không xác định hoặc động.

Ưu điểm của việc sử dụng mô hình trình quan sát

Sử dụng mẫu này trong mã của bạn cho phép bạn duy trì nguyên tắc mở / đóng. Bạn có thể thêm bao nhiêu người đăng ký tùy thích và thiết lập mối quan hệ giữa các đối tượng trong thời gian chạy mà không cần thay đổi mã của chủ thể.