JS `Dependency Injection (DI)`：解耦组件，提升可测试性与可维护性

各位靓仔靓女，今天咱们来聊聊JavaScript里的“解耦神器”——依赖注入（Dependency Injection，简称DI）。别怕，听起来高大上，其实啊，它就像是咱们生活中的“外卖”。自己不想做饭？没问题，叫外卖！DI也是这个道理，组件自己不想创建依赖，那就让别人“送”过来。

一、什么是依赖？什么是依赖注入？

在编程世界里，一个组件需要另一个组件才能正常工作，那么我们就说它“依赖”于另一个组件。比如，一个UserService需要UserRepository来获取用户数据，那么UserService就依赖于UserRepository。

class UserRepository {
  getUserById(id) {
    // 模拟从数据库获取用户数据
    return { id: id, name: "张三" };
  }
}

class UserService {
  constructor() {
    this.userRepository = new UserRepository(); // UserService 自己创建 UserRepository
  }

  getUser(id) {
    return this.userRepository.getUserById(id);
  }
}

const userService = new UserService();
const user = userService.getUser(1);
console.log(user); // 输出: { id: 1, name: "张三" }

这段代码看似没啥问题，但仔细想想，UserService把自己和UserRepository紧紧地绑在了一起。就像你非要自己种菜做饭，而不是叫外卖一样，把自己累得半死。

而依赖注入，就是把创建UserRepository的责任交给外部，然后“注入”到UserService里。就像你直接叫外卖，不用自己操心买菜做饭一样。

二、为什么要用依赖注入？

不用DI的时候，组件之间藕断丝连，就像旧社会的包办婚姻一样，你想换个对象（组件），难如登天。使用DI，就可以让组件之间“自由恋爱”，想换就换，灵活得很。具体来说，DI有以下几个优点：

解耦： 组件之间不再直接依赖，降低了耦合度，方便修改和维护。 UserService不再需要关心UserRepository的具体实现，只要它符合某个接口就行。
可测试性： 方便进行单元测试。你可以“注入”一个假的UserRepository（Mock），来测试UserService的逻辑，而不用真的连接数据库。
可维护性： 代码结构更清晰，更容易理解和修改。如果UserRepository的实现方式改变了，你只需要修改创建UserRepository的地方，而不用修改UserService的代码。
可重用性： 组件可以更容易地在不同的场景下重用。因为组件不再依赖于特定的实现，而是依赖于接口，所以可以在不同的环境中使用不同的实现。

三、依赖注入的三种方式

依赖注入主要有三种方式：

构造器注入（Constructor Injection）： 通过构造函数来注入依赖。这是最常用，也是最推荐的方式。

class UserRepository {
  getUserById(id) {
    // 模拟从数据库获取用户数据
    return { id: id, name: "张三" };
  }
}

class UserService {
  constructor(userRepository) {
    this.userRepository = userRepository; // 通过构造函数注入 UserRepository
  }

  getUser(id) {
    return this.userRepository.getUserById(id);
  }
}

const userRepository = new UserRepository();
const userService = new UserService(userRepository); // 创建 UserService 时注入 UserRepository
const user = userService.getUser(1);
console.log(user);

优点：

依赖关系明确，一眼就能看出UserService依赖于UserRepository。
依赖不可变，UserService一旦创建，就不能再改变UserRepository。
方便进行单元测试，可以直接在测试代码中创建 Mock 对象并注入。

缺点：

如果依赖很多，构造函数会变得很长。不过，这通常意味着你的类承担了过多的责任，需要重新设计。

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

class UserRepository {
  getUserById(id) {
    // 模拟从数据库获取用户数据
    return { id: id, name: "张三" };
  }
}
class UserService {
  constructor() {
    this.userRepository = null; // 初始值为 null
  }

  setUserRepository(userRepository) {
    this.userRepository = userRepository; // 通过 Setter 方法注入 UserRepository
  }

  getUser(id) {
    return this.userRepository.getUserById(id);
  }
}

const userService = new UserService();
const userRepository = new UserRepository();
userService.setUserRepository(userRepository); // 调用 Setter 方法注入 UserRepository
const user = userService.getUser(1);
console.log(user);

优点：

允许在对象创建之后再注入依赖。
可以有选择地注入依赖，某些依赖可以设置为可选的。

缺点：

依赖关系不明确，需要查看 Setter 方法才能知道UserService依赖于UserRepository。
依赖可变，UserService创建之后，仍然可以改变UserRepository。
容易出错，如果忘记注入依赖，程序可能会崩溃。

接口注入（Interface Injection）： 通过接口来注入依赖。这种方式比较少见，通常用于框架级别的开发。

// 定义一个注入接口
class UserRepository {
  getUserById(id) {
    // 模拟从数据库获取用户数据
    return { id: id, name: "张三" };
  }
}
class UserServiceInterface {
  setUserRepository(userRepository) {} // 定义注入接口
}

class UserService extends UserServiceInterface {
  constructor() {
    super();
    this.userRepository = null;
  }

  setUserRepository(userRepository) {
    this.userRepository = userRepository; // 实现注入接口
  }

  getUser(id) {
    return this.userRepository.getUserById(id);
  }
}

const userService = new UserService();
const userRepository = new UserRepository();
userService.setUserRepository(userRepository);
const user = userService.getUser(1);
console.log(user);

优点：

更加灵活，可以根据不同的接口实现来注入不同的依赖。
可以实现更高级的依赖管理。

缺点：

代码更加复杂，需要定义接口和实现类。
可读性较差，需要查看接口定义才能知道UserService依赖于UserRepository。

四、依赖注入容器（DI Container）

手动注入依赖虽然简单，但是当组件很多，依赖关系很复杂的时候，就会变得非常繁琐。这时候，我们就需要一个“依赖注入容器”来帮我们管理依赖关系。 DI Container就像一个“外卖平台”，你只需要告诉它你需要什么，它就会自动帮你创建并注入依赖。

虽然JavaScript不像Java或C#那样有成熟的DI框架，但我们仍然可以使用一些库，或者自己实现一个简单的DI Container。

1. 使用第三方库：tsyringe

tsyringe是一个轻量级的JavaScript DI Container，使用TypeScript装饰器来定义依赖关系。

首先，你需要安装tsyringe：

npm install tsyringe reflect-metadata

然后，你需要在你的代码中引入reflect-metadata：

import "reflect-metadata";

接下来，你可以使用@injectable()装饰器来标记一个类可以被注入，使用@inject()装饰器来注入依赖：

import "reflect-metadata";
import { injectable, inject, container } from "tsyringe";

interface IUserRepository {
  getUserById(id: number): { id: number; name: string };
}

@injectable()
class UserRepository implements IUserRepository {
  getUserById(id: number) {
    // 模拟从数据库获取用户数据
    return { id: id, name: "张三" };
  }
}

@injectable()
class UserService {
  constructor(@inject(UserRepository) private userRepository: IUserRepository) {}

  getUser(id: number) {
    return this.userRepository.getUserById(id);
  }
}

const userService = container.resolve(UserService); // 从容器中获取 UserService 实例
const user = userService.getUser(1);
console.log(user);

2. 手动实现一个简单的DI Container

如果你不想使用第三方库，也可以自己实现一个简单的DI Container。下面是一个简单的示例：

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];
  }
}

// 使用示例
class UserRepository {
  getUserById(id) {
    // 模拟从数据库获取用户数据
    return { id: id, name: "张三" };
  }
}
class UserService {
  constructor(userRepository) {
    this.userRepository = userRepository;
  }

  getUser(id) {
    return this.userRepository.getUserById(id);
  }
}

const container = new Container();
container.register("UserRepository", new UserRepository());
container.register("UserService", (container) => new UserService(container.resolve("UserRepository")));

const userService = container.resolve("UserService");
const user = userService.getUser(1);
console.log(user);

这个简单的DI Container只能注册和解析依赖，功能比较有限，但是可以帮助你理解DI Container的基本原理。

五、依赖注入的注意事项

过度使用： 不要为了DI而DI，只有在确实需要解耦和提高可测试性的时候才使用DI。
循环依赖： 避免出现循环依赖，比如A依赖于B，B又依赖于A。循环依赖会导致程序崩溃。
依赖的生命周期： 考虑依赖的生命周期，是单例的还是每次都需要创建新的实例。 DI Container通常会提供不同的生命周期管理策略。
代码可读性： 确保DI的代码清晰易懂，不要过度使用复杂的DI框架，导致代码难以理解。

六、总结

依赖注入是一种非常有用的设计模式，可以帮助我们解耦组件，提高可测试性和可维护性。虽然JavaScript不像Java或C#那样有成熟的DI框架，但我们仍然可以使用一些库，或者自己实现一个简单的DI Container。希望今天的讲座能让你对依赖注入有一个更深入的了解。

记住，DI就像外卖，用好了可以解放双手，提升效率，用不好就会增加复杂度，反而得不偿失。所以，要根据实际情况，灵活运用DI，才能真正发挥它的威力。好了，今天的讲座就到这里，各位靓仔靓女，下课！

发表回复 取消回复

发表回复取消回复