数栈技术分享：聊聊IOC中依赖注入那些事 (Dependency inject)

Part1: What is Dependency injection

依赖注入定义为组件之间依赖关系由容器在运行期决定，形象的说即由容器动态的将某个依赖关系注入到组件之中在面向对象编程中，我们经常处理的问题就是解耦，控制反转(IoC)就是常用的面向对象编程的设计原则，其中依赖注入是控制反转最常用的实现。目标解决当前类不负责被依赖类实例的创建和初始化。

Part2: What is Dependency

依赖是程序中常见的现象，假设有 A和B都被C耦合依赖着，在 OOP 编程中依赖无处不在。依赖形式有多种表现形式，比如一个类向另一个类发消息，一个类是另一个类的成员，一个类是另一个类的参数。

class A {}

class B {

  classA: A;

  constructor() {

    this.classA = new A();

  }

}

class C {

  classA: A;

  classB: B;

  constructor() {

    this.classA = new A();

    this.classB = new B();

  }

}

Part3: When is use Dependency injection

eg: 以用户调用 API 层打印日志来说明

LoggerService被ApiService和UserService所依赖

ApiService被UserService所依赖

class LoggerService {

    constructor() {

    }

    log(args) {

        console.log(args)

    }

}

class ApiService {

    constructor (

        private readonly logger: LoggerService

) {

        this.logger.log('api constructor')

    }

    public async getMydata () {

        return { name: 'mumiao', hobby: 'focusing in web'}

    }

}

class UserService {

    constructor (

        private readonly api: ApiService,

        private readonly logger: LoggerService

) {

        this.logger.log('user constructor')

    }

    async getMyhobby () {

        const { hobby } = await this.api.getMydata()

        return hobby

    }

}

async function Main {

    const loggerService = new LoggerService()

    const apiService = new ApiService(loggerService)

    const userService = new UserService(loggerService, userService)

    console.log('my hobby is', await userService.getMyhobby())

}

Main()

1、存在的问题

Unit tests 很难写

组件不易复用和维护，可扩展性比较低

UserService 不应该承载ApiService和LoggerService实例的创建。

2、如何解决

采用依赖注入，UserService不负责被依赖类的创建和销毁，而是通过外部传入api和logger对象的方式注入。常见依赖注入方式有三种，本文主要以构造器注入为例解释。

const apiService = Injector.resolve < ApiService > ApiService;

const userService = Injector.resolve < UserService > UserService;

// returns an instance of , with all injected dependencies

Part4: Implement simply Dependency injection

1、预备知识

ES6 的平时业务中相对使用较少的特性：Reflect、Proxy、Decorator、Map、Symbol

了解 Dependency injection，ES/TS 装饰器

深入理解 TypeScript - Reflect Metadata

1）Reflect

简介

Proxy 与 Reflect 是 ES6 为了操作对象引入的 API，Reflect 的 API 和 Proxy 的 API 一一对应，并且可以函数式的实现一些对象操作。

另外，使用 reflect-metadata 可以让 Reflect 支持元编程

类型获取

类型元数据：design:type

参数类型元数据：design:paramtypes

函数返回值类型元数据：design:returntype

Reflect.defineMetaData(metadataKey, metadataValue, target) // 在类上定义元数据

Reflect.getMetaData("design:type", target, propertyKey); //返回类被装饰属性类型

Reflect.getMetaData("design:paramtypes", target, propertyKey); //返回类被装饰参数类型

Reflect.getMetaData("design:returntype", target, propertyKey); // 返回类被装饰函数返回值类型

2）Decorators

function funcDecorator(target, name, descriptor) {

  // target 指 类的prototype name是函数名 descriptor是属性描述符

  let originalMethod = descriptor.value;

  descriptor.value = function () {

    console.log("我是Func的装饰器逻辑");

    return originalMethod.apply(this, arguments);

  };

  return descriptor;

}

class Button {

  @funcDecorator

  onClick() {

    console.log("我是Func的原有逻辑");

  }

}

Reflect and Decorators

const Injector = (): ClassDecorator => {

  // es7 decorator

  return (target, key, descriptor) => {

    console.log(Reflect.getMetadata("design:paramtypes", target));

    // [apiService, loggerService]

  };

};

@Injector()

class userService {

  constructor(api: ApiService, logger: LoggerService) {}

}

3）Implement simply Dependency injection

// interface.ts

type Type = new (...args: any[]) => T;

export type GenericClassDecorator = (target: T) => void;

// ServiceDecorator.ts

const Service = (): GenericClassDecorator> => {

  return (target: Type