精读《Inject Instance 源码》

1. 引言

本周精读的源码是 inject-instance 这个库。

这个库的目的是为了实现 Class 的依赖注入。

好比咱们经过 inject 描述一个成员变量，那么在运行时，这个成员变量的值就会被替换成对应 Class 的实例。这等于让 Class 具有了申明依赖注入的能力：

import {inject} from 'inject-instance'
import B from './B'

class A {
  @inject('B') private b: B
  public name = 'aaa'

  say() {
    console.log('A inject B instance', this.b.name)
  }
}
复制代码

试想一下，若是成员函数 b 是经过 New 出来的：

class A {
  private b = new B()

  say() {
    console.log('A inject B instance', this.b.name)
  }
}
复制代码

这个 b 就不具有依赖注入的特色，由于被注入的 b 是外部已经初始化好的，而不是实例化 A 时动态生成的。

须要依赖注入的通常都是框架级代码，好比定义数据流，存在三个 Store 类，他们之间须要相互调用对方实例：

class A {
  @inject('B') private b: B
}

class B {
  @inject('C') private c: C
}

class C {
  @inject('A') private a: A
}
复制代码

那么对于引用了数据流 A、B、C 的三个组件，要保证它们访问到的是同一组实例 A B C 该怎么办呢？

这时候咱们须要经过 injectInstance 函数统一实例化这些类，保证拿到的实例中，成员变量都是属于同一份实例：

import injectInstance from 'inject-instance'

const instances = injectInstance(A, B, C)
instances.get('A')
instances.get('B')
instances.get('C')
复制代码

那么框架底层能够经过调用 injectInstance 方式初始化一组 “正确注入依赖关系的实例”，拿 React 举例，这个动做能够发生在自定义数据流的 Provider 函数里：

<Provider stores={{ A, B, C }}>
  <Root /> </Provider>
复制代码

那么在 Provider 函数内部经过 injectInstance 实例化的数据流，能够保证 A B C 操做的注入实例都是当前 Provider 实例中的那一份。

2. 精读

那么开始源码的解析，首先是总体思路的分析。

咱们须要准备两个 API: inject 与 injectInstance。

inject 用来描述要注入的类名，值是与 Class 名相同的字符串，injectInstance 是生成一系列实例的入口函数，须要生成最终生效的实例，并放在一个 Map 中。

inject

inject 是个装饰器，它的目的有两个：

1. 修改 Class 基类信息，使其实例化的实例能拿到对应字段注入的 Class 名称。
2. 增长一个字段描述注入了那些 Key。

const inject = (injectName: string): any => (target: any, propertyKey: string, descriptor: PropertyDescriptor): any => {
    target[propertyKey] = injectName

    // 加入一个标注变量
    if (!target['_injectDecorator__injectVariables']) {
        target['_injectDecorator__injectVariables'] = [propertyKey]
    } else {
        target['_injectDecorator__injectVariables'].push(propertyKey)
    }

    return descriptor
}
复制代码

target[propertyKey] = injectName 这行代码中，propertyKey 是申明了注入的成员变量名称，好比 Class A 中，propertyKey 等于 b，而 injectName 表示这个值须要的对应实例的 Class 名，好比 Class A 中，injectName 等于 B。

而 _injectDecorator__injectVariables 是个数组，为 Class 描述了这个类参与注入的 key 共有哪些，这样能够在后面 injectInstance 函数中拿到并依次赋值。

injectInstance

这个函数有两个目的：

1. 生成对应的实例。
2. 将实例中注入部分的成员变量替换成对应实例。

代码不长，直接贴出来：

const injectInstance = (...classes: Array<any>) => {
    const classMap = new Map<string, any>()
    const instanceMap = new Map<string, any>()

    classes.forEach(eachClass => {
      if (classMap.has(eachClass.name)) {
        throw `duplicate className: ${eachClass.name}`
      }
      classMap.set(eachClass.name, eachClass)
    })

    // 遍历全部用到的类
    classMap.forEach((eachClass: any) => {
      // 实例化
      instanceMap.set(eachClass.name, new eachClass())
    })

    // 遍历全部实例
  instanceMap.forEach((eachInstance: any, key: string) => {
    // 遍历这个类的注入实例类名
    if (eachInstance['_injectDecorator__injectVariables']) {
      eachInstance['_injectDecorator__injectVariables'].forEach((injectVariableKey: string) => {
        const className = eachInstance.__proto__[injectVariableKey];
        if (!instanceMap.get(className)) {
          throw Error(`injectName: ${className} not found!`);
        }

        // 把注入名改为实际注入对象
        eachInstance[injectVariableKey] = instanceMap.get(className);
      });
    }

    // 删除这个临时变量
    delete eachInstance['_injectDecorator__injectVariables'];
  });

  return instanceMap
}
复制代码

能够看到，首先咱们将传入的 Class 依次初始化：

// 遍历全部用到的类
classMap.forEach((eachClass: any) => {
  // 实例化
  instanceMap.set(eachClass.name, new eachClass())
})
复制代码

这是必须提早完成的，由于注入可能存在循环依赖，咱们必须在解析注入以前就生成 Class 实例，此时须要注入的字段都是 undefined。

第二步就是将这些注入字段的 undefined 替换为刚才实例化 Map instanceMap 中对应的实例了。

咱们经过 __proto__ 拿到 Class 基类在 inject 函数中埋下的 injectName，配合 _injectDecorator__injectVariables 拿到 key 后，直接遍历全部要替换的 key, 经过类名从 instanceMap 中提取便可。

__proto__ 仅限框架代码中使用，业务代码不要这么用，形成额外理解成本。

因此总结一下，就是提早实例化 + 根据 inject 埋好的信息依次替换注入的成员变量为刚才实例化好的实例。

3. 总结

但愿读完这篇文章，你能理解依赖注入的使用场景，使用方式，以及一种实现思路。

框架实现依赖注入都是提早收集全部类，统一初始化，经过注入函数打标后全局替换，这是一种思惟套路。

若是有其余更有意思的依赖注入实现方案，欢迎讨论。

讨论地址是：精读《Inject Instance 源码》 · Issue #176 · dt-fe/weekly

若是你想参与讨论，请 点击这里，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

关注 前端精读微信公众号

版权声明：自由转载-非商用-非衍生-保持署名（创意共享 3.0 许可证）