[ Better ] Observer Pattern là 1 Cách Tối Ưu Hóa Ứng Dụng của Bạn

Observer Pattern Đây là một ví dụ đơn giản về cách sử dụng mô hình quan sát trong JavaScript cho một ứng dụng quản lý sản phẩm.

The Observer Pattern of Bạn với u Hóa Ứng Dụng — The Observer Pattern of Bạn với įu Hóa Ứng Dụng

Observer Pattern cơ bản quản lý sản phẩm

// Định nghĩa Subject (Subject)
class ProductManager {
  constructor() {
    this.products = [];
    this.observers = [];
  }

  // Thêm Observer
  addObserver(observer) {
    this.observers.push(observer);
  }

  // Xóa Observer
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  // Thêm sản phẩm
  addProduct(product) {
    this.products.push(product);
    // Thông báo cho tất cả các Observer về sự thay đổi
    this.notifyObservers();
  }

  // Xóa sản phẩm
  removeProduct(product) {
    this.products = this.products.filter(p => p !== product);
    // Thông báo cho tất cả các Observer về sự thay đổi
    this.notifyObservers();
  }

  // Phương thức thông báo
  notifyObservers() {
    this.observers.forEach(observer => {
      observer.update(this.products);
    });
  }
}

// Định nghĩa Observer (Observer)
class ProductListDisplay {
  constructor(manager) {
    this.manager = manager;
    this.manager.addObserver(this);
  }

  // Phương thức cập nhật
  update(products) {
    console.log("Danh sách sản phẩm đã được cập nhật:");
    products.forEach(product => {
      console.log(product);
    });
  }
}

// Sử dụng
const productManager = new ProductManager();
const productListDisplay = new ProductListDisplay(productManager);

productManager.addProduct("Sản phẩm 1");
productManager.addProduct("Sản phẩm 2");
productManager.removeProduct("Sản phẩm 1");

Với mỗi khi thực hiện bắt kì thao tác nào thì điều sẽ tiếng hành gọi đến Manager để thông báo là đã thao tác đến đối tượng.

Trong ví dụ sau đây:

– Người quản lý sản phẩm và người theo dõi được gọi là ProductManager.
– Mỗi khi có sự thay đổi trong danh sách sản phẩm của ProductManager, ProductListDisplay là một Observer sẽ hiển thị danh sách sản phẩm.
– ProductManager sẽ sử dụng phương thức notifyObservers để thông báo cho tất cả các Observer khi có sự thay đổi trong danh sách sản phẩm (trong trường hợp này, chỉ có một ProductListDisplay).
– Danh sách sản phẩm sẽ được cập nhật và hiển thị lại khi một sản phẩm được thêm hoặc xóa.

Lợi ích khi dùng

Mẫu thiết kế Observer (Mẫu thiết kế Observer) là một mẫu thiết kế phổ biến trong lập trình hướng đối tượng. Mẫu thiết kế này đặc biệt hữu ích khi một đối tượng (Subject) cần thông báo cho nhiều đối tượng (Observers) về sự thay đổi trạng thái mà không biết chính xác những đối Đây là một số tác dụng và lợi ích của việc sử dụng mô hình quan sát:

Chi tiết hơn bạn có thể xem ảnh bên dưới:

Cách Tối Ưu Hóa Ứng Dụng của Bạn với Observer Pattern — Cách Tối Ưu Hóa Ứng Dụng của Bạn với Pattern

Tìm ra các mối quan tâm: giúp phân biệt logic giữa đối tượng cần quan sát (Subject) và những người nhận thông báo. Điều này làm cho việc bảo trì và hiểu code dễ dàng hơn.

Khả năng mở rộng: Dễ dàng thêm hoặc xóa các quan sát viên mà không thay đổi chủ đề. Điều này giúp tăng khả năng linh hoạt của hệ thống đồng thời giảm sự thay đổi của các lớp hiện có.

Giảm sự phụ thuộc: Đối tượng không cần biết chi tiết về những người theo dõi mà nó thông báo. Điều này làm giảm sự phụ thuộc giữa các lớp và hỗ trợ việc mở rộng và thay đổi hệ thống.

Phản ứng theo thời gian thực: Điều này rất hữu ích cho các ứng dụng yêu cầu cập nhật thời gian thực, chẳng hạn như giao diện người dùng, hệ thống giám sát, thông báo và các ứng dụng khác yêu cầu cập nhật thời gian thực.

Dùng khi nào

Đây là một ví dụ về tình huống xảy ra trong một ứng dụng quản lý sản phẩm thực tế:

– Công việc của người quản lý sản phẩm là quản lý danh sách sản phẩm và thông báo cho giao diện người dùng khi có sự thay đổi trong danh sách sản phẩm.
– Các giao diện người dùng có thể hiển thị danh sách sản phẩm và thống kê sản phẩm, chẳng hạn như Observers: ProductListDisplay và ProductStatisticsDisplay, v.v. Khi ProductManager bổ sung hoặc xóa một sản phẩm, nó sẽ thông báo cho các giao diện này để hiển thị cập nhật.

// Observer hiển thị thống kê sản phẩm
class ProductStatisticsDisplay {
  constructor(manager) {
    this.manager = manager;
    this.manager.addObserver(this);
  }

  // Phương thức cập nhật
  update(products) {
    console.log("Thống kê sản phẩm:");
    console.log("Tổng số sản phẩm: " + products.length);
  }
}

// Sử dụng
const productManager = new ProductManager();
const productListDisplay = new ProductListDisplay(productManager);
const productStatisticsDisplay = new ProductStatisticsDisplay(productManager);

productManager.addProduct("Sản phẩm 1");
productManager.addProduct("Sản phẩm 2");
productManager.removeProduct("Sản phẩm 1");

Trong ví dụ này, khi thêm hoặc xóa sản phẩm, thông tin hiển thị danh sách sản phẩm và thông tin hiển thị số liệu sản phẩm đều sẽ nhận được thông báo và cập nhật. Điều này cho thấy cách Pattern hiệu quả hỗ trợ quản lý và cập nhật dữ liệu.

Chi tiết hơn về Observers Pattern

Một ví dụ chi tiết hơn về cách triển khai Phương pháp quan sát trong một ứng dụng quản lý sản phẩm sử dụng JavaScript được cung cấp bên dưới. Trong ví dụ này, chúng ta sẽ có một người quản lý sản phẩm (chủ đề) sẽ quản lý danh sách sản phẩm và gửi thông báo cho hai loại quan sát viên: danh sách sản phẩm hiển thị và danh sách thông tin sản phẩm hiển thị.

class ProductManager {
  constructor() {
    this.products = [];
    this.observers = [];
  }

  // Thêm Observer
  addObserver(observer) {
    this.observers.push(observer);
  }

  // Xóa Observer
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  // Thêm sản phẩm
  addProduct(product) {
    this.products.push(product);
    this.notifyObservers();
  }

  // Xóa sản phẩm
  removeProduct(product) {
    this.products = this.products.filter(p => p !== product);
    this.notifyObservers();
  }

  // Thông báo cho tất cả các Observer
  notifyObservers() {
    this.observers.forEach(observer => observer.update(this.products));
  }
}

Code trên có tác dụng quản lý sản phẩm và các chức năng cơ bản với Product

class ProductListDisplay {
  constructor(manager) {
    this.manager = manager;
    this.manager.addObserver(this);
  }

  update(products) {
    console.log("Danh sách sản phẩm đã được cập nhật:");
    products.forEach(product => console.log(product));
  }
}

Hiển thị lại danh sách sản phẩm đã cập nhật

class ProductStatisticsDisplay {
  constructor(manager) {
    this.manager = manager;
    this.manager.addObserver(this);
  }

  update(products) {
    console.log("Thống kê sản phẩm:");
    console.log("Tổng số sản phẩm: " + products.length);
  }
}

Thống kê mới lại sản phẩm khi có sự thay đổi

Cách sử dụng:

const productManager = new ProductManager();

// Tạo và đăng ký các Observer
const productListDisplay = new ProductListDisplay(productManager);
const productStatisticsDisplay = new ProductStatisticsDisplay(productManager);

// Thêm sản phẩm
productManager.addProduct("Sản phẩm 1");
productManager.addProduct("Sản phẩm 2");

// Xóa sản phẩm
productManager.removeProduct("Sản phẩm 1");

Khởi tạo các class Product

và tiến hành thực thi các chức năng bạn sẽ thấy kế quả như bên dưới:

Xem thêm:

https://en.wikipedia.org/wiki/Observer_pattern

Xem thêm về các ứng dụng thực tế về Pattern

#Mtips5s #Contact

Fanpage: https://www.facebook.com/mtipscoder

Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder

Website: https://mtips5s.com

Youtube: https://mtips5s.com

Twitter(X): @takagiks99

Instagram: @khuongkara

Threads: @khuongkara

Google Maps: @khuongkara

Chúc các bạn thành công!