Series Design Patterns trong JavaScript và TypeScript

Pattern chỉ hữu ích khi giải được vấn đề thật

Design patterns là những lời giải đã được dùng lại nhiều lần cho các vấn đề quen thuộc trong thiết kế phần mềm. Series này đặt từng pattern vào JavaScript và TypeScript, kèm ví dụ thực tế, bối cảnh nên dùng, và cả những chỗ dễ lạm dụng.

Ghi chú cập nhật (2025–2026): Ví dụ trong loạt nhằm làm rõ ý tưởng của từng pattern; trên codebase thực tế nên ưu tiên ES modules, TypeScript 5+ (khi phù hợp), và API runtime hiện đại. Các bài đã được bổ sung ghi chú về:

• JS nền tảng: structuredClone, Error.cause, Promise.withResolvers, Promise.any, Iterator helpers (ES2025), using/Symbol.dispose.
• Huỷ & dọn tài nguyên: AbortController, AbortSignal.timeout, AbortSignal.any.
• Reactive hiện đại: RxJS 7+ (không dùng rxjs/operators), firstValueFrom/lastValueFrom, Signals (Vue, Angular 17+, Solid, TC39 proposal), React useSyncExternalStore.
• Pub-Sub native: EventTarget, BroadcastChannel, MessageChannel, WeakRef/FinalizationRegistry.
• TS pattern: satisfies, discriminated union + exhaustive check, Stage 3 decorators (TS 5+), AsyncLocalStorage (Node).
• Proxy & JS-style pattern: Proxy + Reflect (thay cho GoF class wrapper khi idiomatic hơn).

Phần reactive thường minh họa bằng RxJS, tương đương có thể bằng Signals hoặc luồng async tuỳ stack; Singleton trong JS module thường là “một instance mỗi module” chứ không cần class cổ điển.

Các Loại Design Patterns

Design patterns thường được phân loại thành ba nhóm chính:

• Creational Patterns: Tập trung vào cơ chế tạo đối tượng
• Structural Patterns: Liên quan đến cấu trúc và mối quan hệ giữa các đối tượng
• Behavioral Patterns: Liên quan đến tương tác và trách nhiệm giữa các đối tượng

Ngoài ba nhóm chính, series này còn đi vào các pattern hiện đại trong JavaScript/TypeScript, functional programming patterns, và asynchronous patterns.

Mối Quan Hệ Giữa Các Design Patterns

Biểu đồ sau đây thể hiện mối quan hệ và sự liên kết giữa các design patterns chính:

  ---
config:
  layout: elk
  elk:
    mergeEdges: true
    nodePlacementStrategy: LINEAR_SEGMENTS
---
graph TD
    %% Group Traditional Patterns
    subgraph A[Traditional Patterns]
        B[Creational Patterns]
        C[Structural Patterns]
        D[Behavioral Patterns]

        %% Creational Patterns
        B --> B1[Singleton]
        B --> B2[Factory Method]
        B --> B3[Abstract Factory]
        B --> B4[Builder]
        B --> B5[Prototype]
        B --> B6[Module]

        %% Structural Patterns
        C --> C1[Adapter]
        C --> C2[Bridge]
        C --> C3[Composite]
        C --> C4[Decorator]
        C --> C5[Facade]
        C --> C6[Flyweight]
        C --> C7[Proxy]

        %% Behavioral Patterns
        D --> D1[Observer]
        D --> D2[Strategy]
        D --> D3[Command]
        D --> D4[Iterator]
        D --> D5[Mediator]
        D --> D6[State]
        D --> D7[Chain of Responsibility]
        D --> D8[Memento]
        D --> D9[Template Method]
        D --> D10[Visitor]
        D --> D11[Interpreter]
    end

    %% Modern JS/TS Patterns
    E[Modern JS/TS Patterns]
    E --> E1[Dependency Injection]
    E --> E2[MVVM & MVC]
    E --> E3[Repository]
    E --> E4[Mixin]

    %% Functional Patterns
    F[Functional Patterns]
    F --> F1[Monads]
    F --> F2[Functors]
    F --> F3[Function Composition]
    F --> F4[Currying & Partial Application]

    %% Asynchronous Patterns
    G[Asynchronous Patterns]
    G --> G1[Promises & Async/Await]
    G --> G2[Reactive Patterns]
    G --> G3[Polling vs WebSockets]
    G --> G4[Pub-Sub]

    %% Relationships between patterns with descriptions
    B2 -.-> |"Mở rộng thành"|B3[Abstract Factory]
    B4 -.-> |"Có thể sử dụng"|B5[Prototype]
    C4 -.-> |"Thường kết hợp với"|D3[Command]
    C5 -.-> |"Thường sử dụng"|B1[Singleton]
    C6 -.-> |"Thường sử dụng"|B1[Singleton]
    C7 -.-> |"Tương tự nhưng mục đích khác"|C4[Decorator]
    D1 -.-> |"Có thể kết hợp với"|D5[Mediator]
    D3 -.-> |"Có thể được triển khai bằng"|D7[Chain of Responsibility]
    D6 -.-> |"Tương tự nhưng tập trung vào trạng thái"|D2[Strategy]
    D2 -.-> |"Thường được sử dụng trong"|D9[Template Method]
    E1 -.-> |"Thường sử dụng"|B2[Factory Method]
    E3 -.-> |"Có thể được triển khai bằng"|C7[Proxy]
    F2 -.-> |"Monad = Functor + bind (flatMap)"|F1[Monads]
    F1 -.-> |"Hỗ trợ"|F3[Function Composition]
    G1 -.-> |"Nền tảng của"|G2[Reactive Patterns]
    G2 -.-> |"Có nền tảng từ"|D1[Observer]
    G4 -.-> |"Liên quan đến"|D1[Observer]

    %% Style
    classDef category fill:#1a2828,stroke:#7aaa8a,stroke-width:2px,color:#ccd4d4
    classDef creational fill:#2a1a1a,stroke:#c86060,stroke-width:2px,color:#d0a8a8
    classDef structural fill:#1a2a1a,stroke:#7aaa8a,stroke-width:2px,color:#a8d0a8
    classDef behavioral fill:#1a1a2a,stroke:#6a7aaa,stroke-width:2px,color:#a8a8d0
    classDef modern fill:#2a2018,stroke:#d0a058,stroke-width:2px,color:#d0c0a0
    classDef functional fill:#2a2a18,stroke:#a0a050,stroke-width:2px,color:#d0d0a0
    classDef async fill:#182a2a,stroke:#5a949a,stroke-width:2px,color:#a0c8cc
    classDef relationship stroke-dasharray: 5 5,color:#3a4848

    style A fill:#111818,stroke:#4a5a5a,stroke-width:3px,rx:10px,ry:10px,color:#ccd4d4
    class B,C,D category
    class B1,B2,B3,B4,B5,B6 creational
    class C1,C2,C3,C4,C5,C6,C7 structural
    class D1,D2,D3,D4,D5,D6,D7,D8,D9,D10,D11 behavioral
    class E1,E2,E3,E4 modern
    class F1,F2,F3,F4 functional
    class G1,G2,G3,G4 async

Creational Patterns

Creational patterns cung cấp các cơ chế tạo đối tượng khác nhau để tăng tính linh hoạt và tái sử dụng mã hiện có.

• Tổng Quan về Creational Patterns
• Singleton Pattern
• Factory Method Pattern
• Abstract Factory Pattern
• Builder Pattern
• Prototype Pattern
• Module Pattern

Structural Patterns

Structural patterns giải thích cách tổ chức các đối tượng và lớp thành các cấu trúc lớn hơn trong khi vẫn giữ cho các cấu trúc này linh hoạt và hiệu quả.

• Tổng Quan về Structural Patterns
• Adapter Pattern
• Bridge Pattern
• Composite Pattern
• Decorator Pattern
• Facade Pattern
• Flyweight Pattern
• Proxy Pattern

Behavioral Patterns

Behavioral patterns liên quan đến các thuật toán và việc phân công trách nhiệm giữa các đối tượng.

• Tổng Quan về Behavioral Patterns
• Interpreter Pattern
• Iterator Pattern
• Mediator Pattern
• Chain of Responsibility Pattern
• Command Pattern
• Memento Pattern
• Observer Pattern
• State Pattern
• Strategy Pattern
• Template Method Pattern
• Visitor Pattern

Modern JavaScript/TypeScript Patterns

Các patterns đã phát triển cùng với các phương pháp phát triển hiện đại trong JavaScript và TypeScript.

• Tổng Quan về Modern JS/TS Patterns
• Dependency Injection Pattern
• MVVM & MVC Patterns
• Repository Pattern
• Mixin Pattern

Functional Programming Patterns

Các patterns có nguồn gốc từ lập trình hàm (functional programming) có thể áp dụng trong JavaScript và TypeScript.

• Tổng Quan về Functional Patterns
• Monads Pattern
• Functors Pattern
• Function Composition Pattern
• Currying & Partial Application

Asynchronous Patterns

Các patterns để xử lý các hoạt động bất đồng bộ trong JavaScript và TypeScript.

• Tổng Quan về Async Patterns
• Promises & Async/Await
• Reactive Patterns
• Polling vs WebSockets
• Pub-Sub Pattern

Phụ Lục

• Anti-patterns và lưu ý khi dùng Design Patterns 2026