第三篇：IoC初探

这是使用TypeScript一步一步实现IoC系列的第三篇文章.

我们知道，使用IoC模式时，需要把创建依赖的责任就给上层，上层进行统一的管理，那么，上层是什么呢？这里的上层就是我们通常所说的IoC container.

这篇文章中我们将实现一个简单的IoC container.

一.创建一个测试类文件

export class Hand {
    public hit() {
        return 'CUT!';
    }
}

export class Mouth {
    public bite() {
        return 'Hit!';
    }
}

export class Human {
    private hand: Hand;
    private mouth: Mouth;
    public constructor(
        hand: Hand,
        mouth: Mouth
    ) {
        this.hand = hand;
        this.mouth = mouth;
    }
    public fight() {
        return this.hand.hit();
    }
    public sneak() {
        return this.mouth.bite();
    }
}

 可以看到，这里的Human来中的constructor有2个参数，分别是Hand类和Mouth类的实例，这里没有在constructor中实例化Hand类和Mouth类，而是把实例的任务交给上层，就是使用IoC的模式。

那么，这个上层是哪里呢？我们来简单的应用一下DI

二.创建Container文件

import { Hand, Mouth } from "./test-class";

type TagKey = string;
type TagValue = string | Function;

export class Container {
    private bindTags: any = {};
    public bind(tag: TagKey, value: TagValue) {
        this.bindTags[tag] = value;
    }
    public get<T>(tag: TagKey): T {
        const target = this.bindTags[tag];
        if (target) {
            throw new Error("Can not find the provider");
        }
        return new target(new Hand(), new Mouth())
    }
}

 

Container类中定义了bind方法和get方法，bind方法用来绑定键与依赖的关系，get方法通过键来找到依赖，返回给调用方。

三.使用

index.ts

import { Container } from "./container";
import { Human } from "./test-class";

const container = new Container();

container.bind('Human', Human);

const human = container.get<Human>('Human');

human.fight();
human.sneak();

 

代码正常运行，可以看到，这里在获取human实例时，我们没有自己去创建Human类的依赖，也就是Hand类和Mouth类，这就实现了Human类与Hand类，Mouth类的不依赖。

四.自动识别Hand类和Mouth类

如果详细的看一下，就会发现Container来写的如此的丑陋，我们一步步来优化它。

首先，Container中的get函数肯定是不能直接使用Hand类和Mouth类的，那么，怎么获取呢，能不能也像Human类一样使用bind函数来绑定呢？下面我们来实现一下。

import 'reflect-metadata';
import { Hand, Mouth } from './test-class';

type Tag = string;
type Constructor<T = any> = new (...args: any[]) => T;
type BindValue = string | Function | Constructor<any>;



export class Container {
    private bindTags: any = {};
    public bind(tag: Tag, value: BindValue) {
        this.bindTags[tag] = value;
    }
    public get<T>(tag: Tag): T {
        const target = this.getTagValue(tag) as Constructor;
        const providers: BindValue[] = [];
        for(let i = 0; i < target.length; i++) {
            // 获取参数的名称
            const providerKey = Reflect.getMetadata(`design:paramtypes`, target)[i].name;
            // 把参数的名称作为Tag去取得对应的类
            const provider = this.getTagValue(providerKey);
            providers.push(provider);
        }
        return new target(new Hand(), new Mouth());
        // return new target(...providers.map(p => new (p as Constructor)()))
    }
    private getTagValue(tag: Tag): BindValue {
        const target = this.bindTags[tag];
        if (!target) {
            throw new Error("Can not find the provider");
        }
        return target;
    }
}

 

可以看到，在get函数中通过了Reflect API获取到了constructor函数的参数名称，再把参数名称作为token去获取provider，也就是对应的类，

当然，可以这样做的前提是需要把类名称与类进行bind

import 'reflect-metadata';

import { Container } from "./container";
import { Hand, Human, Mouth } from "./test-class";

const container = new Container();
container.bind('Hand', Hand);
container.bind('Mouth', Mouth);
container.bind('Human', Human);

const human = container.get<Human>('Human');

human.fight();
human.sneak();

 

如果就这样执行代码的会，会报错，那是因为使用Reflect.getMetadata(`design:paramtypes`, target)时，有一些条件。

首先，MetaData这个题案还没有实现，我们需要导入外部模块reflect-metadata，即npm install  reflect-metadata --save

另外，design:paramtypes这个元数据是需要在装饰器中才能被自动加入的，所以，我们需要给Hand类，Human类，Mouth类加上装饰器

export const injectable = (constructor: Object) => {

}

@injectable
export class Hand {
    public hit() {
        console.log('Cust!');
        return 'Cut!';
    }
}
@injectable
export class Mouth {
    public bite() {
        console.log('Hit!');
        return 'Hit!';
    }
}
@injectable
export class Human {
    private hand: Hand;
    private mouth: Mouth;
    constructor(
        hand: Hand,
        mouth: Mouth
    ) {
        this.hand = hand;
        this.mouth = mouth;
    }
    public fight() {
        return this.hand.hit();
    }
    public sneak() {
        return this.mouth.bite();
    }
}

 

这样，虽然Injectable装饰器是空的，但是运用装饰器时reflect-metadata就会默认到给对象加上以下3个元数据：

• design:type: 属性类型
• design:paramtypes: 参数类型
• design:returntype: 返回值类型

 至此，我们实现了简单的IoC，并且IoC Container与其他类完全的隔离。

下一步，我们会把bind这个步骤做成装饰器，这样更加的方便。