JavaScript 设计模式

Design Pattern

TODO:

单例模式

Singleton Pattern

只能实例化一次，创建的该唯一实例对象在整个应用程序中通用共享

┌─────────────┐                          ┌──────▶
│             │                          │
│             │                          ├──────▶
│             │       ┌────────────┐     │
│    Class    │ ────▶ |  Instance  │ ────┼──────▶
│             │       └────────────┘     │
│             │                          ├──────▶
│             │                          │
└─────────────┘                          └──────▶

let instance; // 用于存储单例实例

class 类 {
  constructor() {
    if (instance) {
      throw new Error("只能创建一个实例对象");
    }
    instance = this;
  }

  // ...
}

const 实例对象1 = new 类();
const 实例对象2 = new 类(); // "只能创建一个实例对象"

为了防止单例实例对象被覆盖修改，建议将其冻结

class 类 {
  // ...
}

const 单例实例对象 = Object.freeze(new 类());
export default 单例实例对象;

工厂模式

Factory Pattern

根据调用函数时传递的不同信息创建数据结构相同但是内容不同的对象

┌─────────────┐
│             │ ◀────────── parameters
│             │           ┌────────────┐
│             │ ────────▶ |   Object   │
│             │           └────────────┘
│             │
│             │ ◀────────── parameters
│   Factory   │           ┌────────────┐
│   Function  │ ────────▶ |   Object   │
│             │           └────────────┘
│             │
│             │ ◀────────── parameters
│             │           ┌────────────┐
│             │ ────────▶ |   Object   │
│             │           └────────────┘
└─────────────┘

代理模式

Proxy Pattern

拦截并控制与目标对象的直接交互

          ┌───────────────┐          ┌─────────────┐
          │     Proxy     │          │             │
          │               │          │             │
          │┌─────────────┐│          │             │
◀─────────┼┼──▶  Get  ◀──┼┼────────▶ │    Object   │
          │├─────────────┤│          │             │
──────────┼┼──▶  Set  ───┼┼────────▶ │             │
          │└─────────────┘│          │             │
          └───────────────┘          └─────────────┘

提供者模式

Provider Pattern

                ┌────────────────────────────────────┐
                │                ┌─────────────────┐ │
                │   Provider  ┌──┼───▶  Context    │ │
                │             │  └─────────────────┘ │
          ┌─────┼─────────────┤                      │
          │     │             │  ┌─────────────────┐ │
          │     │             └──┼───▶  Context    │ │
          │     │                └─────────────────┘ │
          │     └────────────────────────────────────┘
Data ────▶│
          │     ┌────────────────────────────────────┐
          │     │                ┌─────────────────┐ │
          │     │   Provider  ┌──┼───▶  Context    │ │
          │     │             │  └─────────────────┘ │
          └─────┼─────────────┤                      │
                │             │  ┌─────────────────┐ │
                │             └──┼───▶  Context    │ │
                │                └─────────────────┘ │
                └────────────────────────────────────┘

钩子模式

Hook Pattern

通过预留“挂钩”允许子类或外部代码在特定阶段插入自定义逻辑从而实现逻辑的复用

目前被广泛使用在很多主流框架和库中 ( 比如前端的 React )

   ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
   |     Hook     │ |     Hook     │ |     Hook     │ |     Hook     │
   └──────┼───────┘ └──────┼───────┘ └──────┼───────┘ └──────┼───────┘
          │                │                │                │
          ├────────────────┴────────┬───────┴────────────────┤
          │                         │                        │
┌─────────┼───────────┐  ┌──────────┼──────────┐  ┌──────────┼──────────┐
|      Component      │  |      Component      │  |      Component      │
|  ┌──────────────┐   |  |  ┌──────────────┐   |  |  ┌──────────────┐   |
|  |     Hook     │   |  |  |     Hook     │   |  |  |     Hook     │   |
|  ├──────────────┤   |  |  ├──────────────┤   |  |  ├──────────────┤   |
|  |     Hook     │   |  |  |     Hook     │   |  |  |     Hook     │   |
|  └──────────────┘   |  |  └──────────────┘   |  |  └──────────────┘   |
└─────────────────────┘  └─────────────────────┘  └─────────────────────┘

相关链接

• デザインパターン入門
• 14z种常见设计模式