OOP Design Pattern in JS

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.

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ặc độ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.