Vue3+TypeScript实现观察者模式

菜喵007
105 阅读4分钟

Vue3+TypeScript实现观察者模式：电脑库存的实时通知系统

观察者模式（Observer Pattern）听起来是不是有点像“程序员在电脑组装店里搞了个库存报警系统”？它是一种行为型设计模式，定义了一对多的依赖关系，当库存变化时，所有关心库存的部门都会收到通知并自动更新。今天我们用Vue3和TypeScript，结合一个“电脑库存监控”的幽默例子，带你搞懂观察者模式如何实现实时通知，代码优雅又实用，保证通俗易懂，笑中带学！

一、观察者模式是什么？

想象你经营一家电脑组装店，库存里的电脑数量一变，销售部、采购部、仓库管理员都得知道：销售部要更新促销计划，采购部要考虑补货，仓库管理员要调整货架。你总不能每次库存变了就挨个打电话吧？观察者模式就像你的“库存广播系统”：库存（主题）一有变化，自动通知所有订阅者（观察者），让他们各自处理，省心又高效！

核心角色：

  • 主题接口（Subject）：定义订阅、取消订阅和通知的方法。
  • 具体主题（Concrete Subject）：管理观察者列表，状态变化时广播通知。
  • 观察者接口（Observer）：定义更新方法，接收主题通知。
  • 具体观察者（Concrete Observer）：实现具体的更新逻辑。

我们用Vue3+TypeScript实现一个前端版的“电脑库存通知系统”，让你边监控库存边学观察者模式！

二、代码实现

1. 主题接口与具体主题

// src/observers/InventorySubject.ts
export interface InventorySubject {
  addObserver(observer: InventoryObserver): void;
  removeObserver(observer: InventoryObserver): void;
  notifyObservers(message: string): void;
}

export class ComputerInventory implements InventorySubject {
  private observers: InventoryObserver[] = [];
  private stock: number = 0;

  addObserver(observer: InventoryObserver): void {
    this.observers.push(observer);
  }

  removeObserver(observer: InventoryObserver): void {
    const index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }

  notifyObservers(message: string): void {
    this.observers.forEach(observer => observer.update(message));
  }

  setStock(stock: number): void {
    this.stock = stock;
    this.notifyObservers(`库存更新：剩余${this.stock}台电脑`);
  }
}

幽默讲解：ComputerInventory是店里的“库存管理系统”，像个大喇叭，库存一变就喊一嗓子，通知所有订阅者。addObserver和removeObserver就像订阅和退订服务，notifyObservers是广播通知，告诉大家：“库存有变化，快来看！”

2. 观察者接口与具体观察者

// src/observers/InventoryObserver.ts
export interface InventoryObserver {
  update(message: string): void;
}

export class SalesDepartment implements InventoryObserver {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  update(message: string): string {
    return `💰 ${this.name}收到通知：${message}，调整促销计划！`;
  }
}

export class ProcurementDepartment implements InventoryObserver {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  update(message: string): string {
    return `📦 ${this.name}收到通知：${message}，准备补货！`;
  }
}

幽默讲解：SalesDepartment和ProcurementDepartment是“销售部”和“采购部”，订阅了库存通知。库存一变，他们就收到广播，销售部忙着改促销，采购部忙着补货，各干各的，互不干扰！

3. Vue3组件：库存监控界面

// src/components/InventoryMonitor.vue
<script setup lang="ts">
import { ref } from 'vue';
import { ComputerInventory } from '../observers/InventorySubject';
import { SalesDepartment, ProcurementDepartment } from '../observers/InventoryObserver';

const inventory = new ComputerInventory();
const sales = new SalesDepartment('销售部');
const procurement = new ProcurementDepartment('采购部');
inventory.addObserver(sales);
inventory.addObserver(procurement);

const stock = ref(0);
const notifications = ref<string[]>([]);

const updateStock = () => {
  inventory.setStock(stock.value);
  notifications.value = [
    sales.update(`库存更新：剩余${stock.value}台电脑`),
    procurement.update(`库存更新：剩余${stock.value}台电脑`),
  ];
};
</script>

<template>
  <div>
    <h2>电脑库存监控站</h2>
    <div>
      <label>设置库存数量：</label>
      <input v-model.number="stock" type="number" placeholder="输入库存数量" />
    </div>
    <button @click="updateStock">更新库存</button>
    <pre>{{ notifications.join('\n') }}</pre>
  </div>
</template>

幽默讲解：这个Vue组件就像店里的“库存监控屏幕”，输入新的库存数量，点“更新”，观察者模式自动广播给销售部和采购部，他们各自喊一嗓子：“收到！我要干活了！” 客户（代码）只管改数字，通知全自动！

三、应用场景

观察者模式在Vue3开发中就像“电脑库存的广播系统”，非常适合以下场景：

  • 事件驱动UI：监听用户操作（如点击、输入），自动更新相关组件（如按钮状态、表单提示）。
  • 数据同步：多个组件共享同一数据源（如用户设置），数据变化时自动更新所有组件。
  • 消息订阅：实现消息中心（如通知、弹窗），新消息发布时自动通知订阅者。
  • 状态管理：结合Vuex或Pinia，状态变化时通知相关组件更新。

幽默例子：你的Vue3项目是个电脑组装店，库存一变，观察者模式像大喇叭，瞬间通知销售部搞促销、采购部补货！客户（代码）只管改库存，通知自动飞！

四、适用性

观察者模式适合以下前端场景：

  • 一对多依赖：一个对象变化需通知多个对象，且对象数量动态变化。
  • 松耦合通知：通知接收者无需知道通知来源的细节。
  • 动态订阅：支持运行时添加或移除观察者。

注意事项：

  • 如果观察者过多，通知可能影响性能，需优化广播机制。
  • 避免循环通知或内存泄漏，及时移除不再需要的观察者。

五、注意事项

  1. 通知管理：

    • 确保通知逻辑清晰，避免重复或遗漏通知。
    • 提供可靠的订阅和退订机制，防止内存泄漏。

  2. TypeScript优势：

    • 用接口（interface）定义主题和观察者行为，确保类型安全。
    • 利用类型检查，防止错误添加或移除观察者。

  3. 性能考虑：

    • 大量观察者可能导致通知开销，考虑批量处理或异步通知。
    • 定期清理无用观察者，释放内存。

  4. Vue3生态：

    • 参考Vue的watch或reactive，学习响应式通知机制。
    • 结合Vue的组合式API，优化观察者模式的响应式管理。

幽默提示：别让观察者模式变成“库存广播的大嗓门”，喊太多把客户吓跑（性能爆炸）！用对场景，观察者模式让你的通知像广播一样精准高效！

六、总结

观察者模式就像前端开发中的“库存广播系统”，通过一对多的依赖关系，实现状态变化的自动通知。在Vue3+TypeScript项目中，它适合事件驱动UI、数据同步或消息订阅场景。观察者模式让你的代码像智能广播，状态一变，通知全飞，省心又优雅！

avatar
文章
阅读
粉丝