Vue3+TypeScript实现建造者模式

菜喵007
180 阅读5分钟

Vue3+TypeScript实现建造者模式：电脑组装店的定制艺术

建造者模式（Builder Pattern）听起来是不是有点像“程序员开了一家高端电脑组装店”？它是一种创建型设计模式，让你像定制电脑一样，通过分步骤打造复杂对象。今天我们用Vue3和TypeScript，结合一个“电脑组装店”的幽默例子，带你搞懂建造者模式如何将复杂对象的构建过程拆得井井有条，代码优雅又灵活，保证通俗易懂，笑中带学！

一、建造者模式是个啥？

想象你经营一家电脑组装店，客户走进来说：“我要一台游戏神机，RTX 4080，i9 CPU，128GB内存！” 你总不能让客户自己去挑零件、焊主板吧？建造者模式就像你的“定制流水线”：客户（代码调用者）只管提需求，建造者（代码逻辑）负责一步步组装电脑（对象），至于用啥零件、怎么装，客户完全不用操心。它将构建过程和最终产品分开，让你用同样的流程打造不同配置的电脑。

核心角色：

  • 抽象建造者（Builder）：列出组装电脑的步骤清单（接口）。
  • 具体建造者（ConcreteBuilder）：按清单安装具体零件，打造最终的电脑。
  • 产品（Product）：定制好的电脑，包含主板、CPU、内存等部件。
  • 导演者（Director，可选）：像店员一样，指挥建造者按顺序组装。

我们用Vue3+TypeScript实现一个前端版的“电脑定制店”，让你边选配件边学建造者模式！

二、代码实现

1. 产品模型：定义电脑

// src/models/Computer.ts
export interface Computer {
  motherboard: string;
  cpu: string;
  memory: string;
  assemble(): string;
}

export class DesktopComputer implements Computer {
  motherboard = '';
  cpu = '';
  memory = '';

  assemble(): string {
    return `💻 组装完成：主板=${this.motherboard}, CPU=${this.cpu}, 内存=${this.memory}`;
  }
}

幽默讲解：DesktopComputer就像你店里的“电脑胚子”，刚开始啥零件都没有，等着建造者往上装主板、CPU和内存，最后变成一台完整的游戏神机或办公利器！

2. 抽象建造者：组装步骤清单

// src/builders/ComputerBuilder.ts
import { Computer, DesktopComputer } from '../models/Computer';

export abstract class ComputerBuilder {
  protected computer: Computer;

  constructor() {
    this.computer = new DesktopComputer();
  }

  abstract buildMotherboard(): void;
  abstract buildCpu(): void;
  abstract buildMemory(): void;

  getComputer(): Computer {
    return this.computer;
  }
}

幽默讲解：抽象建造者就像店里的“组装说明书”，告诉工人必须装主板、CPU、内存，但具体装啥牌子、啥型号，交给具体的建造者去决定！

3. 具体建造者：高端游戏电脑

// src/builders/HighEndComputerBuilder.ts
import { ComputerBuilder } from './ComputerBuilder';

export class HighEndComputerBuilder extends ComputerBuilder {
  buildMotherboard(): void {
    this.computer.motherboard = 'High-End Gaming Motherboard';
  }

  buildCpu(): void {
    this.computer.cpu = 'Intel Core i9-13900K';
  }

  buildMemory(): void {
    this.computer.memory = '128GB DDR5 RAM';
  }
}

幽默讲解：HighEndComputerBuilder就像店里专为土豪准备的组装师傅，专门挑最顶级的零件：i9 CPU、128GB内存，装出来就是一台能“跑Crysis满帧”的游戏怪兽！

4. 导演者：协调组装流程

// src/builders/ComputerDirector.ts
import { ComputerBuilder } from './ComputerBuilder';
import { Computer } from '../models/Computer';

export class ComputerDirector {
  private builder: ComputerBuilder;

  constructor(builder: ComputerBuilder) {
    this.builder = builder;
  }

  constructComputer(): Computer {
    this.builder.buildMotherboard();
    this.builder.buildCpu();
    this.builder.buildMemory();
    return this.builder.getComputer();
  }
}

幽默讲解：导演者就像店里的“首席组装师”，负责盯着工人按顺序干活：先装主板，再上CPU，最后插内存。客户只管拿成品，流程完全透明！

5. Vue3组件：客户点单界面

// src/components/ComputerCustomizer.vue
<script setup lang="ts">
import { ref } from 'vue';
import { ComputerDirector } from '../builders/ComputerDirector';
import { HighEndComputerBuilder } from '../builders/HighEndComputerBuilder';

const computerInfo = ref('');

const orderComputer = () => {
  const builder = new HighEndComputerBuilder();
  const director = new ComputerDirector(builder);
  const computer = director.constructComputer();
  computerInfo.value = computer.assemble();
};
</script>

<template>
  <div>
    <h2>电脑定制店</h2>
    <button @click="orderComputer">定制高端游戏电脑</button>
    <p>{{ computerInfo }}</p>
  </div>
</template>

幽默讲解：这个Vue组件就像店里的“点单机”，客户点一下“高端游戏电脑”，后台流水线（导演者和建造者）立刻开工，吐出一台配置拉满的电脑，客户只需要坐等收货！

三、应用场景

建造者模式在Vue3前端开发中就像“电脑组装店的定制服务”，超级适合以下场景：

  • 复杂组件配置：动态生成复杂的Vue组件（如表单、图表），根据用户选择配置不同样式或功能。
  • 主题定制：为UI组件生成不同主题（按钮、卡片、输入框），确保风格一致。
  • 数据模型构建：根据API返回的数据，逐步构建复杂的TypeScript模型。
  • 多步骤流程：需要按顺序执行多个构建步骤，如初始化WebSocket连接、配置参数、绑定事件。

幽默例子：想象你的Vue3项目是个电脑组装店，用户点“电竞模式”按钮，建造者模式吐出一套电竞风格组件；点“办公套装”，生成低调办公风格UI。客户（代码）只管用，流水线管生产！

四、适用性

建造者模式适合以下前端场景：

  • 复杂对象的构建：当对象有多个属性，且组合方式复杂时（如定制UI组件）。
  • 需要不同表现形式：同一构建流程能生成不同配置（如不同主题的组件）。
  • 解耦构建与表示：隐藏构建细节，让客户端只关注结果。

但小心适用范围：

  • 如果对象简单，只有几个属性，直接实例化可能更高效。
  • 建造者模式会增加类和接口数量，小项目慎用以免过度设计。

五、注意事项

  1. 选择合适的场景：

    • 小型项目直接new对象，简单高效。
    • 复杂对象或多步骤构建时，用建造者模式解耦流程。

  2. TypeScript的优势：

    • 用接口（interface）定义产品和建造者，确保类型安全。
    • 善用抽象类和方法，规范构建步骤。

  3. 性能考虑：

    • 建造者模式增加了一层间接调用，注意不要过度封装。
    • 避免为简单对象引入复杂建造流程。

  4. Vue3生态：

    • 参考VueUse或Element Plus的组件配置逻辑，学习建造者模式的实践。
    • 结合Vue的组合式API，优化组件构建流程。

幽默提示：别让你的建造者模式变成“电脑组装黑店”，为简单配置搞一堆复杂流程！用对场景，客户才会为你的“定制神机”买单！

六、总结

建造者模式就像前端开发中的“电脑定制流水线”，通过分步骤构建复杂对象，让代码优雅又灵活。在Vue3+TypeScript项目中，它适合处理复杂组件、主题定制或多步骤数据模型构建。搭配导演者，构建过程井然有序，客户（代码）只需坐享其成！

avatar
文章
阅读
粉丝