电商项目中如何通过依赖注入避免CartManager使用单例模式？

我正在学习优质编程原则，目前开发电商项目时，用CartManager类管理购物车商品。需让HeaderComponent（显示商品计数器）、AllItemsPage（点击商品加购）、CheckOutPage（展示已购商品）三个组件共享该类实例，但不想使用单例模式。尝试通过构造函数注入CartManager实例的方式实现，不确定是否为最优方案，特此咨询。

相关代码 #

CartManager类实现 #

export default class CartManager {
  _totalItemsAdded = 0;
  addedItems = [];
  constructor() {}

  addItem(itemToAdd) {
    this.totalItemsAdded += 1;
    this.addedItems.push(itemToAdd)
  }

  getAddedItems() {
     return this.addedItems;
  }
}

尝试的构造函数注入方式 #

// 创建CartManager的唯一实例
const cartManager = new CartManager();

// 将实例作为依赖传递给各个组件
const headerComponent = new HeaderComponent(cartManager);
const allItemsPage = new AllItemsPage(cartManager);
const checkoutPage = new CheckoutPage(cartManager);

构造函数注入是当前场景的最优方案之一 #

你采用的构造函数注入方式完全符合依赖注入（DI）的核心思想，是非常合理的选择：

• 它明确了组件与CartManager的依赖关系，组件无需关心实例的创建逻辑，只专注于自身业务逻辑；
• 彻底避免了单例模式带来的全局状态耦合、单元测试困难（无法轻松替换模拟实例）等问题；
• 实现简单，没有额外的框架依赖，适合当前的项目规模。

现有代码的优化点 #

1. 修复私有变量访问错误 #

你的CartManager中定义了私有变量_totalItemsAdded，但addItem方法里误写为this.totalItemsAdded，这会意外创建一个公共属性totalItemsAdded，而非更新私有变量。同时建议用ES2022+的私有字段（#前缀）进一步增强封装性。

2. 避免内部状态被外部篡改 #

getAddedItems直接返回addedItems的引用，外部代码可以通过这个引用修改购物车的内部数组，破坏封装性。建议返回数组的副本。

优化后的CartManager代码：

export default class CartManager {
  #totalItemsAdded = 0;
  #addedItems = [];

  constructor() {}

  addItem(itemToAdd) {
    this.#totalItemsAdded += 1;
    this.#addedItems.push(itemToAdd);
  }

  getAddedItems() {
    return [...this.#addedItems]; // 返回数组副本，防止外部修改内部状态
  }

  getTotalItems() {
    return this.#totalItemsAdded; // 提供获取商品总数的方法
  }
}

扩展场景建议 #

如果后续项目规模扩大，组件层级变深，手动传递实例会变得繁琐，可以考虑：

• 使用轻量的依赖注入容器统一管理实例；
• 结合前端框架的内置状态管理方案（比如React Context、Vue Provide/Inject）。
  但对于当前的场景，手动构造函数注入已经足够简洁高效，无需过度设计。

内容的提问来源于stack exchange，提问作者Arnau