JavaScript依赖注入_IoC容器与装饰器实现-js教程-PHP中文网

JavaScript依赖注入_IoC容器与装饰器实现

夢幻星辰

发布： 2025-11-27 18:39:07

原创

526人浏览过

依赖注入与控制反转通过将对象创建交由外部容器管理，降低代码耦合。在TypeScript中，利用装饰器和reflect-metadata可实现IoC容器，通过@Injectable标记可注入类，结合Map存储依赖映射，递归解析构造函数参数类型完成自动注入，支持复杂应用的解耦与维护。

javascript依赖注入_ioc容器与装饰器实现

依赖注入（Dependency Injection, DI）和控制反转（Inversion of Control, IoC）是现代前端开发中提升代码可维护性与解耦的关键设计模式。在JavaScript尤其是TypeScript生态中，借助装饰器（Decorator）语法可以优雅地实现IoC容器，让对象的创建和依赖管理自动化。

什么是IoC容器与依赖注入

控制反转是指将对象的创建和生命周期管理从代码内部转移到外部容器。原本由类自己实例化依赖，现在由外部“注入”进来，从而降低耦合度。

依赖注入是实现IoC的一种方式，常见形式有构造函数注入、属性注入和方法注入。在JavaScript中，我们可以通过一个IoC容器来管理所有服务的注册与解析。

举个简单例子：如果一个UserService需要UserRepository，传统做法是在UserService内部new UserRepository()，但这样就绑死了实现。使用DI后，UserRepository由容器传入，UserService无需关心如何创建它。

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

使用装饰器声明可注入服务

TypeScript支持装饰器语法（需开启experimentalDecorators和emitDecoratorMetadata），我们可以用@Injectable装饰器标记哪些类可以被IoC容器管理。

示例：

function Injectable(): ClassDecorator {
  return target => {
    // 标记该类可被注入，可附加元数据
  };
}

@Injectable()
class UserRepository {
  findAll() {
    return ['user1', 'user2'];
  }
}

@Injectable()
class UserService {
  constructor(private repo: UserRepository) {}

  listUsers() {
    return this.repo.findAll();
  }
}

登录后复制

通过装饰器，我们为类添加了元信息，IoC容器可以根据这些信息自动解析依赖关系。

实现简易IoC容器

一个基本的IoC容器需要具备注册（register）和获取（resolve）功能。它维护一个依赖映射表，并能递归解析构造函数参数。

Kive

一站式AI图像生成和管理平台

171

查看详情

核心思路：

使用Map保存token到类的映射
利用reflect-metadata读取构造函数参数类型
递归创建实例并注入依赖

实现代码：

import 'reflect-metadata';

const DESIGN_PARAM_TYPES = 'design:paramtypes';
const container = new Map();

function register(token: any, useClass: any) {
  container.set(token, useClass);
}

function resolve<T>(token: any): T {
  const clazz = container.get(token);
  if (!clazz) throw new Error(`No provider for ${token.name}`);

  const paramTypes = Reflect.getMetadata(DESIGN_PARAM_TYPES, clazz) || [];
  const dependencies = paramTypes.map((dep: any) => resolve(dep));

  return new clazz(...dependencies);
}

登录后复制

注册服务：

register(UserRepository, UserRepository);
register(UserService, UserService);

const userService = resolve<UserService>(UserService);
console.log(userService.listUsers()); // ['user1', 'user2']

登录后复制

结合装饰器自动注入构造参数

上述resolve方法依赖reflect-metadata获取构造函数参数类型。只要开启了emitDecoratorMetadata，TypeScript会在编译时自动写入参数类型元数据，IoC容器就能“知道”某个类需要哪些依赖。

注意：基础类型（如string、number）不会被保留，只有引用类型（class）会被记录。因此依赖项必须是类或明确的token。

为了更清晰地控制注入，也可以使用@Inject装饰器指定token：

function Inject(token: any): ParameterDecorator {
  return (target, propertyKey, parameterIndex) => {
    const existingInjectedTokens =
      Reflect.getOwnMetadata('injectedParams', target) || [];
    existingInjectedTokens[parameterIndex] = token;
    Reflect.defineMetadata('injectedParams', existingInjectedTokens, target);
  };
}

登录后复制

这样即使类型信息缺失，也能手动指定注入内容。

基本上就这些。通过装饰器 + reflect-metadata + 容器管理，JavaScript也能实现类似Angular的依赖注入机制。虽然原生JS不内置DI，但在复杂应用或框架开发中，这样的模式非常实用。

以上就是JavaScript依赖注入_IoC容器与装饰器实现的详细内容，更多请关注php中文网其它相关文章！