JS 依赖注入 (DI) 容器设计：解耦组件与测试性提升

嘿，大家好！今天咱们来聊聊 JavaScript 里的依赖注入（Dependency Injection，简称 DI），这玩意儿听起来高大上，但其实核心思想就是让你的代码更灵活、更容易维护，特别是单元测试的时候，简直是救命稻草。

第一部分：什么是依赖注入？为啥要用它？

想象一下，你写了一个 UserService，它的功能是处理用户相关的事情，比如注册、登录等等。这个 UserService 里面可能需要用到 UserRepository 来访问数据库，还需要 EmailService 来发送邮件。

如果你的代码是这样写的：

class UserService {
  constructor() {
    this.userRepository = new UserRepository(); // 硬编码依赖
    this.emailService = new EmailService(); // 硬编码依赖
  }

  registerUser(userData) {
    const user = this.userRepository.createUser(userData);
    this.emailService.sendWelcomeEmail(user.email);
    return user;
  }
}

这里 UserService 直接 new 了 UserRepository 和 EmailService，这就是所谓的“硬编码依赖”。这种写法有什么问题呢？

紧耦合： UserService 紧紧地依赖于 UserRepository 和 EmailService，一旦 UserRepository 或 EmailService 发生变化，UserService 也要跟着改。
难以测试： 单元测试的时候，你想测试 UserService 的 registerUser 方法，但是它直接调用了 UserRepository 和 EmailService，你没法控制它们的行为，比如你想模拟 UserRepository.createUser 总是返回一个错误，或者 EmailService.sendWelcomeEmail 总是发送失败，就很难做到。

这时候，依赖注入就派上用场了。依赖注入的核心思想是：不要让类自己去创建依赖，而是通过外部“注入”进来。 就像医院里打吊瓶，药水（依赖）不是你自己生产的，而是护士（容器）给你送来的。

使用依赖注入之后，UserService 看起来就像这样：

class UserService {
  constructor(userRepository, emailService) {
    this.userRepository = userRepository;
    this.emailService = emailService;
  }

  registerUser(userData) {
    const user = this.userRepository.createUser(userData);
    this.emailService.sendWelcomeEmail(user.email);
    return user;
  }
}

注意，现在 UserService 的构造函数接受了 userRepository 和 emailService 作为参数。谁来提供这些参数呢？这就是 DI 容器的任务了。

第二部分：DI 容器的原理与实现

DI 容器就像一个大管家，负责管理和创建所有的依赖，然后把它们“注入”到需要的地方。一个简单的 DI 容器可以这样实现：

class Container {
  constructor() {
    this.dependencies = {};
  }

  register(name, dependency) {
    this.dependencies[name] = dependency;
  }

  resolve(name) {
    if (!this.dependencies[name]) {
      throw new Error(`Dependency ${name} not found`);
    }
    return this.dependencies[name];
  }
}

这个 Container 类有两个方法：

register(name, dependency)：用于注册一个依赖，name 是依赖的名称，dependency 是依赖的实例。
resolve(name)：用于解析一个依赖，根据 name 返回对应的实例。

有了这个 Container，我们就可以这样使用：

const container = new Container();

// 注册依赖
container.register('userRepository', new UserRepository());
container.register('emailService', new EmailService());

// 解析依赖，创建 UserService 实例
const userService = new UserService(
  container.resolve('userRepository'),
  container.resolve('emailService')
);

// 现在可以使用 userService 了
userService.registerUser({ name: 'John Doe', email: '[email protected]' });

当然，上面的 Container 非常简单，只能注册和解析简单的实例。更复杂的 DI 容器还需要支持以下功能：

自动解析依赖： 能够自动分析类的构造函数，找到需要的依赖，并自动创建和注入。
单例模式： 保证同一个依赖只会被创建一次。
生命周期管理： 控制依赖的创建、销毁时机。
配置化： 能够通过配置文件来注册和管理依赖。

第三部分：更高级的 DI 容器实现

为了实现自动解析依赖，我们需要用到一些 JavaScript 的元编程技巧，比如 Reflect.getMetadata。这个方法可以获取类的元数据，包括构造函数的参数类型。

首先，我们需要一个装饰器来标记哪些类是可以被 DI 容器管理的：

import 'reflect-metadata'; // 引入 reflect-metadata

const Injectable = () => {
  return (target) => {
    // 在类的元数据中标记这个类是可注入的
    Reflect.defineMetadata('design:injectable', true, target);
  };
};

然后，我们可以改造一下 Container 类，让它可以自动解析依赖：

class Container {
  constructor() {
    this.dependencies = {};
    this.singletons = {}; // 用于存放单例实例
  }

  register(name, dependency) {
    this.dependencies[name] = dependency;
  }

  resolve(name) {
    if (!this.dependencies[name]) {
      throw new Error(`Dependency ${name} not found`);
    }
    return this.resolveDependencies(this.dependencies[name]);
  }

  resolveDependencies(target) {
    // 如果已经存在单例实例，直接返回
    if (this.singletons[target.name]) {
      return this.singletons[target.name];
    }

    // 获取类的构造函数参数类型
    const paramTypes = Reflect.getMetadata('design:paramtypes', target) || [];

    // 解析构造函数参数的依赖
    const params = paramTypes.map((paramType) => {
      // 递归解析依赖
      return this.resolveDependencies(paramType);
    });

    // 创建类的实例
    const instance = new target(...params);

    // 如果类有 Injectable 装饰器，则将其注册为单例
    if (Reflect.getMetadata('design:injectable', target)) {
      this.singletons[target.name] = instance;
    }

    return instance;
  }
}

这个 Container 类做了以下改进：

使用了 Reflect.getMetadata 获取类的构造函数参数类型。
递归地解析构造函数参数的依赖。
增加了 singletons 属性，用于存放单例实例。
如果类有 Injectable 装饰器，则将其注册为单例。

现在，我们可以这样使用：

@Injectable()
class UserRepository {
  createUser(userData) {
    // ...
  }
}

@Injectable()
class EmailService {
  sendWelcomeEmail(email) {
    // ...
  }
}

@Injectable()
class UserService {
  constructor(userRepository, emailService) {
    this.userRepository = userRepository;
    this.emailService = emailService;
  }

  registerUser(userData) {
    const user = this.userRepository.createUser(userData);
    this.emailService.sendWelcomeEmail(user.email);
    return user;
  }
}

const container = new Container();

// 不需要手动注册依赖了，只需要解析 UserService 即可
const userService = container.resolveDependencies(UserService);

// 现在可以使用 userService 了
userService.registerUser({ name: 'John Doe', email: '[email protected]' });

注意，我们使用了 @Injectable() 装饰器来标记 UserRepository、EmailService 和 UserService 是可注入的。然后，我们只需要调用 container.resolveDependencies(UserService) 就可以自动创建 UserService 的实例，并自动注入 UserRepository 和 EmailService。

第四部分：依赖注入的几种方式

除了构造函数注入，还有其他几种依赖注入的方式：

Setter 注入： 通过 Setter 方法来注入依赖。

class UserService {
  setUserRepository(userRepository) {
    this.userRepository = userRepository;
  }

  setEmailService(emailService) {
    this.emailService = emailService;
  }

  registerUser(userData) {
    const user = this.userRepository.createUser(userData);
    this.emailService.sendWelcomeEmail(user.email);
    return user;
  }
}

const userService = new UserService();
userService.setUserRepository(new UserRepository());
userService.setEmailService(new EmailService());

接口注入： 定义一个接口，包含注入依赖的方法。

interface IUserService {
  setUserRepository(userRepository: UserRepository): void;
  setEmailService(emailService: EmailService): void;
  registerUser(userData: any): any;
}

class UserService implements IUserService {
  userRepository: UserRepository;
  emailService: EmailService;

  setUserRepository(userRepository: UserRepository) {
    this.userRepository = userRepository;
  }

  setEmailService(emailService: EmailService) {
    this.emailService = emailService;
  }

  registerUser(userData: any) {
    const user = this.userRepository.createUser(userData);
    this.emailService.sendWelcomeEmail(user.email);
    return user;
  }
}

const userService = new UserService();
userService.setUserRepository(new UserRepository());
userService.setEmailService(new EmailService());

注入方式	优点	缺点
构造函数注入	强制依赖，更容易发现依赖关系，更适合单元测试	构造函数参数过多时，代码可读性降低
Setter 注入	允许可选依赖，更灵活	依赖关系不明显，可能导致运行时错误，单元测试需要额外设置
接口注入	强制实现接口，更规范	代码量增加，需要定义接口，不如构造函数注入简洁

第五部分：依赖注入与单元测试

依赖注入最大的好处之一就是方便单元测试。有了依赖注入，我们可以轻松地 mock 掉依赖，然后只关注被测试单元的行为。

例如，我们要测试 UserService 的 registerUser 方法，我们可以 mock 掉 UserRepository 和 EmailService：

// 创建 mock 的 UserRepository
const mockUserRepository = {
  createUser: jest.fn().mockReturnValue({ id: 1, name: 'John Doe', email: '[email protected]' }),
};

// 创建 mock 的 EmailService
const mockEmailService = {
  sendWelcomeEmail: jest.fn(),
};

// 创建 UserService 实例，并注入 mock 的依赖
const userService = new UserService(mockUserRepository, mockEmailService);

// 调用 registerUser 方法
userService.registerUser({ name: 'John Doe', email: '[email protected]' });

// 验证 UserRepository.createUser 方法被调用
expect(mockUserRepository.createUser).toHaveBeenCalledWith({ name: 'John Doe', email: '[email protected]' });

// 验证 EmailService.sendWelcomeEmail 方法被调用
expect(mockEmailService.sendWelcomeEmail).toHaveBeenCalledWith('[email protected]');

在这个测试用例中，我们使用了 jest.fn() 创建了 mock 的 UserRepository 和 EmailService，然后将它们注入到 UserService 中。这样，我们就可以控制 UserRepository 和 EmailService 的行为，并验证 UserService 是否正确地调用了它们的方法。

第六部分：一些流行的 JS DI 容器

除了自己实现 DI 容器，我们还可以使用一些流行的 JS DI 容器，比如：

InversifyJS: 一个功能强大的 DI 容器，支持 TypeScript 和 ES6。
tsyringe: 另一个流行的 DI 容器，也支持 TypeScript 和 ES6。
Awilix: 一个轻量级的 DI 容器，易于使用。

这些 DI 容器提供了更丰富的功能，比如：

自动绑定： 能够自动扫描代码，找到可注入的类，并自动注册到容器中。
AOP (面向切面编程)： 能够在方法调用前后执行额外的逻辑，比如日志记录、性能监控等等。
插件机制： 允许扩展容器的功能。

选择哪个 DI 容器取决于你的项目需求和个人喜好。

第七部分：总结

依赖注入是一种重要的设计模式，可以帮助我们编写更灵活、更容易维护和测试的代码。虽然实现一个简单的 DI 容器并不难，但要实现一个功能强大的 DI 容器需要深入理解 JavaScript 的元编程技巧。使用现有的 DI 容器可以省去很多麻烦，并提供更丰富的功能。

总而言之，依赖注入是现代 JavaScript 开发中不可或缺的一部分。掌握依赖注入，可以让你写出更健壮、更易于维护的代码，并在单元测试中游刃有余。希望今天的讲解对你有所帮助！

有问题可以随时提问，咱们一起探讨！

发表回复 取消回复

发表回复取消回复