依赖注入原理解析并实践

傷城~ 2022-09-09 09:21 165阅读 0赞

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

##### 本文基于自身理解进行输出，目的在于交流学习，如有不对，还望各位看官指出。    #####

## DI— ##

DI—Dependency Injection，即“依赖注入”：对象之间依赖关系由容器在运行期决定，形象的说，即由`容器动态的将某个对象注入到对象属性之中`。依赖注入的目的并非为软件系统带来更多功能，而是为了提升对象重用的频率，并为系统搭建一个灵活、可扩展的框架。

## 使用方式— ##

首先看一下常用依赖注入 (DI)的方式：

function Inject(target: any, key: string){
        target[key] = new (Reflect.getMetadata('design:type',target,key))()
    }
    
    class A {
        sayHello(){
            console.log('hello')
        }
    }
    
    class B {
        @Inject   // 编译后等同于执行了 @Reflect.metadata("design:type", A)
        a: A
    
        say(){
           this.a.sayHello()  // 不需要再对class A进行实例化
        }
    }
    
    new B().say() // hello

## 原理分析— ##

TS在编译装饰器的时候，会通过执行`__metadata函数`多返回一个属性装饰器`@Reflect.metadata`，它的目的是将需要实例化的`service`以元数据`'design:type'`存入`reflect.metadata`，以便我们在需要依赖注入时，通过`Reflect.getMetadata`获取到对应的`service`， 并进行实例化赋值给需要的属性。

`@Inject`编译后代码:

var __metadata = (this && this.__metadata) || function (k, v) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
    };
    
    // 由于__decorate是从右到左执行，因此, defineMetaData 会优先执行。
    __decorate([
        Inject,
        __metadata("design:type", A)  //  作用等同于 Reflect.metadata("design:type", A)
    ], B.prototype, "a", void 0);

`即默认执行了以下代码:`

Reflect.defineMetadata("design:type", A, B.prototype, 'a');

`Inject`函数需要做的就是从`metadata`中获取对应的构造函数并构造实例对象赋值给当前装饰的属性

function Inject(target: any, key: string){
        target[key] = new (Reflect.getMetadata('design:type',target,key))()
    }

不过该依赖注入方式存在一个问题：

*  由于`Inject函数`在代码编译阶段便会执行，将导致`B.prototype`在代码编译阶段被修改，这违反了`六大设计原则之开闭原则（避免直接修改类，而应该在类上进行扩展）`那么该如何解决这个问题呢，我们可以借鉴一下`TypeDI`的思想。

## typedi— ##

> typedi 是一款支持TypeScript和JavaScript依赖注入工具 typedi 的依赖注入思想是类似的，不过多维护了一个`container`

#### 1. metadata ####

在了解其`container`前，我们需要先了解 typedi 中定义的`metadata`，这里重点讲述一下我所了解的比较重要的几个属性。

*  `id: service的唯一标识`
 *  `type: 保存service构造函数`
 *  `value: 缓存service对应的实例化对象`

const newMetadata: ServiceMetadata<T> = {
          id: ((serviceOptions as any).id || (serviceOptions as any).type) as ServiceIdentifier,    // service的唯一标识
          type: (serviceOptions as ServiceMetadata<T>).type || null,  // service 构造函数
          value: (serviceOptions as ServiceMetadata<T>).value || EMPTY_VALUE,  // 缓存service对应的实例化对象
    };

#### 2. container 作用 ####

function ContainerInstance() {
            this.metadataMap = new Map();  //保存metadata映射关系，作用类似于Refect.metadata
            this.handlers = []; // 事件待处理队列
            get(){};  // 获取依赖注入后的实例化对象
             ...
    }

*  this. metadataMap -  `@service`会将`service构造函数`以metadata形式保存到`this.metadataMap`中。
 *   *  缓存实例化对象，保证单例;
 *  this.handlers  - `@inject`会将依赖注入操作的`对象`、`目标`、`行为`以 object 形式 push 进 handlers 待处理数组。
 *   *  保存`构造函数`与`静态类型`及`属性`间的映射关系。

{
            object: target,  // 当前等待挂载的类的原型对象
            propertyName: propertyName,  // 目标属性值
            index: index, 
            value: function (containerInstance) {   // 行为
                var identifier = Reflect.getMetadata('design:type', target, propertyName)
                return containerInstance.get(identifier);
            }
    }

`@inject`将该对象 push 进一个等待执行的 handlers 待处理数组里，当需要用到对应 service 时执行 value函数 并修改 propertyName。

if (handler.propertyName) {
         instance[handler.propertyName] = handler.value(this);
    }

*  get - 对象实例化操作及依赖注入操作
 *   *  避免直接修改类，而是对其实例化对象的属性进行拓展;

## 相关结论— ##

*  `typedi`中的实例化操作不会立即执行, 而是在一个`handlers`待处理数组，等待`Container.get(B)`，先对B进行实例化，然后从`handlers`待处理数组取出对应的`value函数`并执行修改实例化对象的属性值，这样不会影响Class B 自身
 *  实例的属性值被修改后，将被缓存到`metadata.value`(typedi 的单例服务特性)。

相关资料可查看：

https://stackoverflow.com/questions/55684776/typedi-inject-doesnt-work-but-container-get-does

new B().say()  // 将会输出sayHello is undefined
    
    Container.get(B).say()  // hello word

## 实现一个简易版 DI Container— ##

此处代码依赖`TS`,不支持`JS环境`

interface Handles {
        target: any
        key: string,
        value: any
    }
    
    interface Con {
        handles: Handles []   // handlers待处理数组
        services: any[]  // service数组，保存已实例化的对象
        get<T>(service: new () => T) : T   // 依赖注入并返回实例化对象
        findService<T>(service: new () => T) : T  // 检查缓存
        has<T>(service: new () => T) : boolean  // 判断服务是否已经注册
    }
    
    var container: Con = {
        handles: [],  // handlers待处理数组
        services: [], // service数组，保存已实例化的对象
        get(service){
            let res: any = this.findService(service)
            if(res){
                return  res
            }
    
            res = new service()
            this.services.push(res)
            this.handles.forEach(handle=>{
                if(handle.target !== service.prototype){
                    return
                }
                res[handle.key] = handle.value
            })
            return res
        },
    
        findService(service){
            return this.services.find(instance => instance instanceof service)
        },
    
       // service是否已被注册
        has(service){
            return !!this.findService(service)
        }
    }
    
    function Inject(target: any, key: string){
        const service = Reflect.getMetadata('design:type',target,key)
        
        // 将实例化赋值操作缓存到handles数组
        container.handles.push({
            target,
            key,
            value: new service()
        })
    
        // target[key] = new (Reflect.getMetadata('design:type',target,key))()
    }
    
    class A {
        sayA(name: string){
            console.log('i am '+ name)
        }
    }
    
    class B {
        @Inject
        a: A
    
        sayB(name: string){
           this.a.sayA(name)
        }
    }
    
    class C{
        @Inject
        c: A
    
        sayC(name: string){
           this.c.sayA(name)
        }
    }
    
    // new B().sayB(). // Cannot read property 'sayA' of undefined
    container.get(B).sayB('B')
    container.get(C).sayC('C')

最后

*  欢迎加我微信，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![26260bcb27cc4b089a78dde58ae36cb0.png][]

![9b88a921ad8968190308aba267b89ee1.png][]

点个**在看**支持我吧

![8fe93d5099cce326d6e56a67f04c50f1.gif][]

![b3ea809144dccf7322da0b43d411c765.png][]

往期推荐

[大厂面试过程复盘(微信/阿里/头条,附答案篇)][Link 1]

![b74c18707e9948bd2b9f92f417c8ff33.png][]

[面试题：说说事件循环机制(满分答案来了)][Link 2]

![fd277f5cb0a959811396233cd399dcf9.png][]

[专心工作只想搞钱的前端女程序员的2020][2020]

![096a472f26d45fb7ba669cf4cebdf7d8.png][]

[26260bcb27cc4b089a78dde58ae36cb0.png]: /images/20220829/f2270b2b4ac642c09cb4e101642eae42.png
[9b88a921ad8968190308aba267b89ee1.png]: /images/20220829/de696d161cf84acdb375c3dc51a017d7.png
[8fe93d5099cce326d6e56a67f04c50f1.gif]: /images/20220829/1c954b3296f948bdaffc5e89f9a33607.png
[b3ea809144dccf7322da0b43d411c765.png]: /images/20220829/f150c1414fd74a4b8923d6ca0ab733de.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng%3D%3D&chksm=f175e460c6026d76bcdfc6dd42cfe80a3f14ea832d1922d65043f666d6de22bd17b09e779ed9&idx=2&mid=2649829027&scene=21&sn=1a433047a8d6e8af65012bfa0bd27e3f#wechat_redirect
[b74c18707e9948bd2b9f92f417c8ff33.png]: /images/20220829/50a0075f83b7454eb2bf4b57c3f12422.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng%3D%3D&chksm=f175ef9ec60266880a86f33085ff43f95e3180846c5f139cb9b1b33c3245201157f39d949e9a&idx=1&mid=2649826653&scene=21&sn=9e5e2de78a8ef4de3820769ff3ab7c02#wechat_redirect
[fd277f5cb0a959811396233cd399dcf9.png]: /images/20220829/b650848ce2df4f97bbc8447dbbf80538.png
[2020]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng%3D%3D&chksm=f175f306c6027a1029967cde600630a5107fbbfdd125b64ba3f2c9d9b570b102162ab4c3b373&idx=1&mid=2649831877&scene=21&sn=9352cf4624308602c50a6fd10379d132#wechat_redirect
[096a472f26d45fb7ba669cf4cebdf7d8.png]: /images/20220829/c79c5df07c454c14810a9f9819c01438.png