如何实现一个JavaScript的依赖注入容器？-js教程-PHP中文网

如何实现一个JavaScript的依赖注入容器？

紅蓮之龍

发布： 2025-10-01 12:36:02

原创

242人浏览过

答案：实现一个轻量级JavaScript依赖注入容器，通过注册和解析服务管理对象创建与依赖关系。容器使用Map存储服务，支持构造函数注入和单例模式，利用正则提取构造函数参数名自动解析依赖，示例展示了Logger与UserService的注入使用，注意事项包括参数名混淆、工厂函数支持、作用域及TypeScript集成等改进方向。

如何实现一个javascript的依赖注入容器？

实现一个 JavaScript 依赖注入（Dependency Injection, DI）容器，核心是管理对象的创建和依赖关系，避免硬编码依赖，提升代码的可测试性和可维护性。下面是一个轻量但实用的 DI 容器实现思路和代码示例。

1. 理解依赖注入的基本原理

依赖注入有三种常见方式：构造函数注入、属性注入和方法注入。最常用的是构造函数注入，即通过类的构造函数传入所需依赖。

DI 容器的作用是：

注册服务（类或实例）
解析依赖并自动实例化
管理生命周期（如单例）

2. 实现一个简单的 DI 容器

以下是一个基于 Map 存储注册项、支持构造函数注入的简易容器：

立即学习“Java免费学习笔记（深入）”；

依图语音开放平台

查看详情

class Container {
  constructor() {
    this.registrations = new Map();
  }

  // 注册一个类或实例
  register(name, clazz, options = { singleton: false }) {
    if (this.registrations.has(name)) {
      throw new Error(`Service "${name}" 已注册`);
    }
    this.registrations.set(name, {
      clazz,
      options,
      instance: null // 用于单例缓存
    });
  }

  // 根据名称获取实例
  resolve(name) {
    const record = this.registrations.get(name);
    if (!record) {
      throw new Error(`Service "${name}" 未注册`);
    }

    // 如果是单例且已有实例，直接返回
    if (record.options.singleton && record.instance) {
      return record.instance;
    }

    // 解析构造函数参数依赖
    const dependencies = [];
    const paramNames = this._getParamNames(record.clazz);
    for (const paramName of paramNames) {
      if (this.registrations.has(paramName)) {
        dependencies.push(this.resolve(paramName));
      } else {
        throw new Error(`无法解析依赖: "${paramName}" in ${name}`);
      }
    }

    // 创建实例
    const instance = new record.clazz(...dependencies);

    // 单例则缓存
    if (record.options.singleton) {
      record.instance = instance;
    }

    return instance;
  }

  // 使用正则提取构造函数参数名（生产环境建议用装饰器或手动注册依赖）
  _getParamNames(fn) {
    const fnStr = fn.toString().replace(/\/\*[\s\S]*?\*\//g, '');
    const argStr = fnStr.slice(fnStr.indexOf('(')+1, fnStr.indexOf(')'));
    return argStr.trim().split(',').map(arg => arg.trim()).filter(Boolean);
  }
}

登录后复制

3. 使用示例

假设我们有两个服务：

class Logger {
  log(msg) {
    console.log('[LOG]', msg);
  }
}

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

  createUser(name) {
    this.logger.log(`创建用户: ${name}`);
  }
}

登录后复制

使用容器注册并解析：

const container = new Container();

container.register('logger', Logger, { singleton: true });
container.register('userService', UserService, { singleton: false });

const userService = container.resolve('userService');
userService.createUser('Alice'); // 输出: [LOG] 创建用户: Alice

登录后复制