OOP Design Pattern in JS

OOP là gì, như thế lào thì chắc ai cũng rõ rồi nhỉ? Skip thẳng vào những pattern nào. À mà trước đây mình có nghe từ 1 developer nào đấy chia sẻ về việc nếu như bạn không am hiểu về design pattern thì tuyệt đối đừng sử dụng nó. Nên là phải ngâm cứu cho kỹ mới được. Let's go!

1. Singleton Pattern

Là pattern đảm bảo 1 class chỉ có duy nhất một instance và cung cấp global point để truy cập

  // Singleton instance
  let instance = null;

  class Singleton {
    constructor() {
      if (!instance) {
        instance = this;
        // Your initialization code here
      } else {
        return instance;
      }
    }
    // Your methods and properties here
  }

  // Usage
  const singletonA = new Singleton();
  const singletonB = new Singleton();

  console.log(singletonA === singletonB);

Các lệnh gọi tới constructor sẽ return về một existing instance và đảm bảo chỉ có một instance của Singleton class.
Real-world use case:
1. Managing Configuration Settings
2. Logger and Error Handling
3. Database Connections
4. Caching

(Trong 4 case trên thì mình hay dùng nhất là trong cái 3 với cái 4.)

2. Factory Pattern

Là pattern cung cấp 1 interface cho việc tạo objects nhưng cho phép các subclasses thay đổi loại đối tượng sẽ được tạo. Kiểu đóng gói quá trình tạo đối tượng á.

  // Product class
  class Product {
    constructor(name) {
      this.name = name;
    }
  }

  // Factory for creating products
  class ProductFactory {
    createProduct(name) {
      return new Product(name);
    }
  }
  // Usage
  const factory = new ProductFactory();
  const productA = factory.createProduct('Product A');
  const productB = factory.createProduct('Product B');

  console.log(productA.name); // Output: 'Product A'
  console.log(productB.name); // Output: 'Product B'

(Ời, nó chỉ vậy thôi đó, thằng ProductFactory chịu trách nhiệm tạo instances cho Product class. Nó abstracts quá trính tạo, cho phép tạo các loại product khác bằng cách extend the factory)

Use: Khi muốn đóng gói quá trình tạo object và cung cấp 1 interface đơn giản để tạo các đối tượng với các cách triển khai khác nhau

3. Abstract Factory Pattern (anh em cùng cha với thằng trên)

Là pattern cung cấp interface cho việc tạo các nhóm đối tượng liên quan hoặc phụ thuộc mà chỉ định các lớp cụ thể của chúng. Cho phép tạo các tập hợp object hoạt động hài hòa với nhau

  // Abstract Product classes
  class Button {
    render() {}
  }

  class Checkbox {
    render() {}
  }

  // Concrete Product classes
  class MacButton extends Button {
    render() {
      return 'Render Mac button';
    }
  }

  class MacCheckbox extends Checkbox {
    render() {
      return 'Render Mac checkbox';
    }
  }

  class WindowsButton extends Button {
    render() {
      return 'Render Windows button';
    }
  }

  class WindowsCheckbox extends Checkbox {
    render() {
      return 'Render Windows checkbox';
    }
  }

  // Abstract Factory interface
  class GUIFactory {
    createButton() {}
    createCheckbox() {}
  }

  // Concrete Factories
  class MacFactory extends GUIFactory {
    createButton() {
      return new MacButton();
    }

    createCheckbox() {
      return new MacCheckbox();
    }
  }

  class WindowsFactory extends GUIFactory {
    createButton() {
      return new WindowsButton();
    }

    createCheckbox() {
      return new WindowsCheckbox();
    }
  }

  // Usage
  function createUI(factory) {
    const button = factory.createButton();
    const checkbox = factory.createCheckbox();

    return { button, checkbox };
  }

  const macUI = createUI(new MacFactory());
  console.log(macUI.button.render()); // Output: 'Render Mac button'
  console.log(macUI.checkbox.render()); // Output: 'Render Mac checkbox'

  const windowsUI = createUI(new WindowsFactory());
  console.log(windowsUI.button.render()); // Output: 'Render Windows button'
  console.log(windowsUI.checkbox.render()); // Output: 'Render Windows checkbox'

Use: Khi cần tạo các đối tượng liên quan hoặc phụ thuộc phải hoạt động cùng nhau. Giúp các đối tượng được tạo tương thích và gắn kết.

Còn nhiều pattern khác nữa. Mình sẽ cập nhật sau.

OOP Design Pattern in JS

Lại lượm nhặt thêm một bài khá hay. Tôi note lại đây vậy.

1. Singleton Pattern

2. Factory Pattern

3. Abstract Factory Pattern (anh em cùng cha với thằng trên)