当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptIoC容器与依赖注入解析

JavaScriptIoC容器与依赖注入解析

2025-12-11 11:18:45 0浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript IoC容器实现与依赖注入详解》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

依赖注入与控制反转通过外部容器管理对象创建和依赖关系，实现解耦；2. 使用IoC容器注册依赖并解析实例，支持单例模式；3. 示例中UserService依赖Logger，由容器注入而非内部创建；4. 基础实现包括register、resolve方法，可扩展作用域、异步解析等特性；5. 轻量级IoC提升代码可测试性与模块化，适用于复杂应用服务管理。

JavaScript依赖注入_IoC容器实现

依赖注入（Dependency Injection, DI）和控制反转（Inversion of Control, IoC）是现代软件设计中解耦组件的重要手段。在JavaScript中，虽然没有像Java Spring那样的原生支持，但我们可以自己实现一个轻量级的IoC容器来管理对象的创建和依赖关系。

什么是依赖注入与IoC

控制反转是指将对象的创建和管理从代码内部转移到外部容器。依赖注入是实现IoC的一种方式，即由外部将依赖传入对象，而不是在对象内部直接创建。

例如，一个服务需要数据库连接，传统做法是在服务内部new Database()，而使用DI后，数据库实例由容器注入，服务无需关心如何创建。

实现一个简单的IoC容器

我们可以用一个类来表示IoC容器，它负责注册依赖和解析实例。

核心功能包括：

register(key, creator)：将依赖以键值对形式注册到容器，creator可以是类或工厂函数
resolve(key)：根据key查找并创建实例，自动处理其依赖
支持单例模式缓存已创建的实例

下面是一个基础实现：

class IoCContainer {
  constructor() {
    this.registry = new Map();
    this.singletons = new Map();
  }

  register(key, creator, singleton = false) {
    this.registry.set(key, { creator, singleton });
  }

  resolve(key) {
    if (!this.registry.has(key)) {
      throw new Error(`Dependency not registered: ${key}`);
    }

    const { creator, singleton } = this.registry.get(key);

    // 如果是单例且已创建，直接返回
    if (singleton && this.singletons.has(key)) {
      return this.singletons.get(key);
    }

    // 创建实例（支持构造函数或工厂函数）
    let instance;
    if (typeof creator === 'function') {
      // 假设是构造函数，检查参数依赖
      const dependencies = Reflect.getMetadata?.('design:paramtypes', creator) || [];
      const resolvedDeps = dependencies.map(dep => this.resolve(dep));
      instance = new creator(...resolvedDeps);
    } else {
      // 工厂函数
      instance = creator(this.resolve.bind(this));
    }

    if (singleton) {
      this.singletons.set(key, instance);
    }

    return instance;
  }
}

使用示例

假设我们有两个类：Logger 和 UserService，UserService 依赖 Logger。

class Logger {
  log(message) {
    console.log(`[LOG] ${message}`);
  }
}

class UserService {
  constructor(logger) {
    this.logger = logger;
  }

  createUser(name) {
    this.logger.log(`Creating user: ${name}`);
  }
}

使用IoC容器注册并解析：

const container = new IoCContainer();

container.register('Logger', Logger, true); // 单例
container.register('UserService', UserService);

const userService = container.resolve('UserService');
userService.createUser('Alice'); // 输出: [LOG] Creating user: Alice