概念

DI(依赖注入-Dependency Injection)，也叫IOC（控制反转-Inversion of Control）。是指将对象的控制权从当前对象转移到外部处理。

目的

类与类之间互相解耦。

为什么用DI

一般的面向对象开发过程中存在的问题

在一般的面向对象的开发中，我们希望把对象的控制权完全掌握在自己手中。我们需要使用一个类（Base类）的实例的时候，就会去创建一个实例去使用。
但我们使用的类不会只用于当前的类。我们可能会有几个甚至几十个类中都依赖了这个类。那么，我们在每个使用到这个类的地方就去创建一个实例。
这时候，问题就出现了，如果我们的需求发生了变更，需要改动Base类，那么在Base类改动了之后，所有使用到Base类的地方都要去进行更改，我们不得不去改动所有用到Base类的类。这样就造成了许多重复劳动，而且非常容易出错，严重降低了开发效率。

image.png

那么如何去优化呢？
我们可以将对象对的创建权交给父级对象。我如果需要使用某个类的实例，就去请求父级对象，父级对象将该类的实例创建好传递给我，这样我就不用关心所依赖类的具体实现。只需要从父级对象去拿，然后消费。这样当新需求发生了变更的时候，我就只需要更改父级对象的实现即可。这样就可以减少不必要的重复劳动。
那么，父类如果也有一系列平级的类，他们管理着一些共同的类，那么如果需求发生变更，我还是需要做许多重复劳动。我为了减少重复劳动，就把这些对象的控制权再往上提一级，交给父类的父类...

image.png

就这样一级一级的交出去，是不是就只有放到入口函数才是最合理的呢？
但是我们一般不这么做。我们会将这些逻辑抽离出去，成为一个工具或框架。
我们可以将一些被其他类依赖的类注册到特定的IOC容器，然后在需要使用这些类的实例的时候，就从IOC容器去取，然后将其注入到当前类中（DI——依赖注入）。当然，创建实例并注入的操作都由框架完成。
这样，我们就很好的实现了对象的解耦与依赖的统一管理。

有了依赖注入，我们可以做什么？

• 依赖管理（理所应当，最重要的职责）
  • 单例对象管理
  • 模块之间共享服务实例（可以做到配置运行时修改，例如API_HOST）
• 简单状态管理，简单场景下共享状态更加方便
• 特性（如果在react中使用）
  • Hook支持，一键注入
  • 装饰器支持，一个装饰器注入依赖

简单实现

有了这么一个思想，那么就很容易实现一个简单的依赖注入工具。
（这里是基本示例，没有考虑常量注入和工厂函数注入，以及参数的处理）

// container.js
class Container {
  providers = []; // 所有注册过的供应商
  instanceMap = new Map(); // hashMap,用于保存每个供应商的实例
  forRoot(providers = []) {
    this.providers = providers;
  };
  get(provider) {
    const key = typeof provider === 'string' ? provider : provider.name; // 拿到当前供应商对应的key

    let instance = this.instanceMap.get(key);
    if (!instance) { // 如果实例不存在就去创建，然后set到map中
      const Provider = this.providers.find(p => p.name === key);
      if (!Provider) {
        throw new Error('未找到对应的供应商');
      }
      instance = new Provider();
      this.instanceMap.set(key, instance);
    }
    return instance;
  }
}

使用：

const DI = Symbol('@DIContainer'); 
// 创建一个IOC容器实例
const container = new Container();
将实例挂载到全局对象上
global[DI] = container;
// 注册供应商
container.forRoot([
  Service
]);
// inject工具函数，用于注入一个依赖
function inject(provider) {
  return global[DI].get(provider);
}
// 测试类
class Test {
  service: any;
  constructor() {
    this.service = inject(Service); // 使用类注入实例
    const service2 = inject('Service'); //使用字符串名字注入实例
    console.log(service2 === this.service); // 两种方法拿到的实例时同一个引用
  }
};

console.log(new Test().service);