手把手教你实现TypeScript下的IoC容器

在此篇文章开始之前，先向大家简单介绍 IoC。什么是 IoC？以及为什么我们需要 IoC？以及本文核心，在 TypeScript 中实现一个简单的 IoC 容器？

目录 [隐藏]

IoC 定义
初识 Container
原理揭秘
- @inject
- Container
小结

IoC 定义

我们看维基百科定义：

控制反转（Inversion of Control，缩写为 IoC），是面向对象编程中的一种设计原则，可以用来减低计算机代码之间的耦合度。其中最常见的方式叫做依赖注入（Dependency Injection，简称 DI），还有一种方式叫“依赖查找”（Dependency Lookup）。通过控制反转，对象在被创建的时候，由一个调控系统内所有对象的外界实体，将其所依赖的对象的引用传递(注入)给它。 ———— 维基百科

简单来说，IoC 本质上是一种设计思想，可以将对象控制的所有权交给容器。由容器注入依赖到指定对象中。由此实现对象依赖解耦。

初识 Container

假设我们有三个接口： Warrior 战士、Weapon 武器、ThrowableWeapon 投掷武器。

export interface Warrior {fight(): string;sneak(): string;
}
export interface Weapon {hit(): string;
}
export interface ThrowableWeapon {throw(): string;
}

对应分别有实现这三个接口的类：Katana 武士刀、Shuriken 手里剑、以及 Ninja 忍者。

export class Katana implements Weapon {public hit() {return 'cut!';}
}
export class Shuriken implements ThrowableWeapon {public throw() {return 'hit!';}
}
export class Ninja implements Warrior {private _katana: Weapon;private _shuriken: ThrowableWeapon;public constructor() {this._katana = new Katana();this._shuriken = new Shuriken();}public fight() {return this._katana.hit();}public sneak() {return this._shuriken.throw();}
}

由上面的示例，很明显我们可以得知，Ninja 类依赖了 Katana 类和 Shuriken 类。这种依赖关系对于我们来说很常见，但是随着应用的日益迭代，越来越复杂的情况下，类与类之间的耦合度也会越来越高，应用会变得越来越难以维护。

对于上述 Ninja 类来说，如若日后需要不断新增其他武器对象，甚至忍术对象，这个 Ninja 类文件会引入越来越多的对象，Ninja 类也会越来越臃肿。如果一个应用内部每一个类都对彼此产生依赖，可能代码写到后面就是沉重的技术债了。

因此 IoC 的思想的出现，就是为了实现对象依赖解耦。

那么先带大家简单认识 IoC 容器的使用。

const container = new Container();
const TYPES = {Warrior: Symbol.for('Warrior'),Weapon: Symbol.for('Weapon'),ThrowableWeapon: Symbol.for('ThrowableWeapon')
};
container.bind<Weapon>(TYPES.Weapon).to(Katana);
container.bind<ThrowableWeapon>(TYPES.ThrowableWeapon).to(Shuriken);
container.bind<Warrior>(TYPES.Warrior).to(Ninja);
const ninja = container.get<Ninja>(TYPES.Warrior);
ninja.fight(); // "cut!"
ninja.sneak(); // "hit!"

上面的 Container 实际上接手了对象依赖的管理，使得 Ninja 类脱离了对 Katana 类和 Shuriken 类的依赖！

此时 Ninja 类只依赖抽象的接口（Weapon、ThrowableWeapon）而不是依赖具体的类（Katana、Shuriken）。

原理揭秘

那么 Container 怎样做到的呢？它的实现原理又是怎样的呢？是不是很好奇？其实没有什么黑魔法，接下来就会为大家揭开 Container 实现 IoC 原理的神秘面纱。

首先我们先将 Ninja 类改写如下：

export class Ninja implements Warrior {private _katana: Weapon;private _shuriken: ThrowableWeapon;public constructor(@inject(TYPES.Weapon) katana: Weapon, @inject(TYPES.ThrowableWeapon) shuriken: ThrowableWeapon) {this._katana = katana;this._shuriken = shuriken;}public fight() {return this._katana.hit();}public sneak() {return this._shuriken.throw();}
}

@inject

可以发现。我们在 Ninja 类的构造函数里对每个参数进行了 @inject 装饰器声明。那么这个@inject 又干了什么事情？。@inject 也不过是我们实现的一个装饰器函数而已，代码如下：

export function inject(serviceIdentifier: string | symbol) {return function(target: any, propertyKey: string, parameterIndex: number) {const metadata = {key: 'inject.tag',value: serviceIdentifier};Reflect.defineMetadata(`custom:paramtypes#${parameterIndex}`, metadata, target);};
}

这里出现了 Reflect.defineMetadata，大家可能比较陌生。Reflect Metadata 是 ES7 的一个提案，它主要用来在声明的时候添加和读取元数据。

提案文档： Metadata Proposal – ECMAScript。

想要使用此特性，需要安装 reflect-metadata 这个包，同时配置 tsconfig 如下：

{"compilerOptions": {"target": "es5","lib": ["es6", "DOM"],"types": ["reflect-metadata"],"module": "commonjs","moduleResolution": "node","experimentalDecorators": true,"emitDecoratorMetadata": true}
}

在这个场景下，我为 @inject 对象里每个传入的参数自定义了 metadataKey。比如在上述@inject(TYPES.Weapon)中，target 就是 Ninja 类，parameterIndex 就是 0。@inject(TYPES.ThrowableWeapon)同样道理。

因此在 Ninja 类里，根据@inject 装饰器的声明，在运行时给 Ninja 类添加了两个元数据。

custom:paramtypes#0 -> { key: "inject.tag", value: TYPES.Weapon }
custom:paramtypes#1 -> { key: "inject.tag", value: TYPES.ThrowableWeapon }

Container

IoC 容器的主要功能是什么呢？

类的实例化
查找对象的依赖关系

以下是一个十分简单的 Container 容器实现代码。

type Constructor<T = any> = new (...args: any[]) => T;
class Container {bindTags = {};bind<T>(tag: string | symbol) {return {to: (bindTarget: Constructor<T>) => {this.bindTags[tag] = bindTarget;}};}get<T>(tag: string | symbol): T {const target = this.bindTags[tag];const providers = [];for (let i = 0; i < target.length; i++) {const paramtypes = Reflect.getMetadata('custom:paramtypes#' + i, target);const provider = this.bindTags[paramtypes.value];providers.push(provider);}return new target(...providers.map(provider => new provider()));}
}

bind 方法，主要将所有绑定在容器上依赖建立映射关系。比如以下代码：

const container = new Container();
container.bind<Weapon>(TYPES.Weapon).to(Katana);
container.bind<ThrowableWeapon>(TYPES.ThrowableWeapon).to(Shuriken);
container.bind<Warrior>(TYPES.Warrior).to(Ninja);

创建容器后，通过 bind 绑定了三个对象，因此容器中形成了（bindTags）以下这样的关系。

{[TYPES.Weapon]: Katana,[TYPES.ThrowableWeapon]: Shuriken,[TYPES.Warrior]: Ninja
}

绑定依赖对象后，我们再结合实例看容器的 get 方法：

const ninja = container.get<Ninja>(TYPES.Warrior);

容器的 get 方法通过 tag 参数在 bingTags 映射里，找到目标对象，对应到上述代码也就是，找到了 Ninja 类。

紧接着重头戏来了，我们可以通过 target.length（也就是 function.length）得知 Ninja 类构造函数的参数数量，声明了 providers 数组用于存储 Ninja 类的依赖。还记得一开始我们通过 @inject 在类上添加的两个元数据。此时发挥了重要作用！因此通过元数据即可查找到依赖。

如下：

const paramtypes = Reflect.getMetadata('custom:paramtypes#' + i, target);
const provider = this.bindTags[paramtypes.value];

第一个参数对应 custom:paramtypes#0，paramtypes.value 即为 TYPES.Weapon，此时在 bindTags 查到，找到了 Katana 类依赖！

同理第二个参数也找到了 Shuriken 类依赖。

找到所有在构造函数中声明的依赖后，真正开始注入依赖，如下。

return new target(...providers.map(provider => new provider()));

因此最后，通过容器 get 方法，成功得到了注入了依赖的 ninja 实例。

ninja.fight(); // "cut!"
ninja.sneak(); // "hit!"

噌噌噌！正确运行！

小结

通过容器管理，类真正做到了依赖抽象的接口，而不是依赖具体的类。践行了 IoC 的思想。

不过上文的 IoC 容器，也只是一个小小的玩具，它所产生的意义主要是引导指示的价值。希望通过此文，可以让大家理解和重视 IoC 的使用。当然笔者也是刚刚学习 IoC，业余时间敲下这个 demo，自己的乐趣和收获也很多~

以上，对大家如有助益，不胜荣幸。

https://juejin.im/post/5e167abc6fb9a047f66ebb7c

转自https://www.lizenghai.com/archives/43943.html