用TypeScript裝飾器實現(xiàn)一個簡單的依賴注入

Reflect

簡介

Proxy?與?Reflect?是?ES6?為了操作對象引入的?API，Reflect?的?API?和?Proxy?的?API?一一對應，并且可以函數(shù)式的實現(xiàn)一些對象操作。另外，使用?reflect-metadata?可以讓?Reflect?支持元編程。

參考資料

Reflect - JavaScript | MDN
Metadata Proposal - ECMAScript

類型獲取

編寫模塊

首先寫一個服務提供者，作為被依賴模塊:

// @services/log.tsclass LogService {
 ?public debug(...args: any[]): void {
 ? ?console.debug('[DEB]', new Date(), ...args);
 ?}

 ?public info(...args: any[]): void {
 ? ?console.info('[INF]', new Date(), ...args);
 ?}

 ?public error(...args: any[]): void {
 ? ?console.error('[ERR]', new Date(), ...args);
 ?}}

然后我們再寫一個消費者：

// @controllers/custom.tsimport LogService from '@services/log';

class CustomerController { ?private log!: LogService;
 ?private token = "29993b9f-de22-44b5-87c3-e209f4174e39";

 ?constructor() {
 ? ?this.log = new LogService();
 ?}

 ?public main(): void {
 ? ?this.log.info('Its running.');
 ?}}

現(xiàn)在我們看到，消費者在?constructor?構造函數(shù)內對?LogService?進行了實例化，并在?main?函數(shù)內進行了調用，這是傳統(tǒng)的調用方式。

當?LogService?變更，修改了構造函數(shù)，而這個模塊被依賴數(shù)很多，我們就得挨個找到引用此模塊的部分，并一一修改實例化代碼。

架構設計

1. 我們需要用一個?Map?來存儲注冊的依賴，并且它的?key?必須唯一。所以我們首先設計一個容器。

2. 注冊依賴的時候盡可能簡單，甚至不需要用戶自己定義?key，所以這里使用?Symbol?和唯一字符串來確定一個依賴。

3. 我們注冊的依賴不一定是類，也可能是一個函數(shù)、字符串、單例，所以要考慮不能使用裝飾器的情況。

Container

先來設計一個?Container?類，它包括?ContainerMap、set、get、has?屬性或方法。ContainerMap?用來存儲注冊的模塊，set?和?get?用來注冊和讀取模塊，has?用來判斷模塊是否已經(jīng)注冊。

• 
  

• set?形參?id?表示模塊?id，?value?表示模塊。

• 
  

• get?用于返回指定模塊?id?對應的模塊。

• 
  

• has?用于判斷模塊是否注冊。

• 
  

// @libs/di/Container.tsclass Container {
 ?private ContainerMap = new Map<string | symbol, any>();

 ?public set = (id: string | symbol, value: any): void => {
 ? ?this.ContainerMap.set(id, value);
 ?}
 ?
 ?public get = <T extends any>(id: string | symbol): T => {
 ? ?return this.ContainerMap.get(id) as T;
 ?}

 ?public has = (id: string | symbol): Boolean => {
 ? ?return this.ContainerMap.has(id);
 ?}}const ContainerInstance = new Container();export default ContainerInstance;

Service

現(xiàn)在實現(xiàn)?Service?裝飾器來注冊類依賴。

// @libs/di/Service.tsimport Container from './Container';interface ConstructableFunction extends Function {
 ?new (): any;}// 自定義 id 初始化export function Service (id: string): Function;// 作為單例初始化export function Service (singleton: boolean): Function;// 自定義 id 并作為單例初始化export function Service (id: string, singleton: boolean): Function;export function Service (idOrSingleton?: string | boolean, singleton?: boolean): Function {
 ?return (target: ConstructableFunction) => {
 ? ?let _id;
 ? ?let _singleton;
 ? ?let _singleInstance;

 ? ?if (typeof idOrSingleton === 'boolean') {
 ? ? ?_singleton = true;
 ? ? ?_id = Symbol(target.name);
 ? ?} else {
 ? ? ?// 判斷如果設置 id，id 是否唯一
 ? ? ?if (idOrSingleton && Container.has(idOrSingleton)) {
 ? ? ? ?throw new Error(`Service：此標識符（${idOrSingleton}）已被注冊.`);
 ? ? ?}

 ? ? ?_id = idOrSingleton || Symbol(target.name);
 ? ? ?_singleton = singleton;
 ? ?}

 ? ?Reflect.defineMetadata('cus:id', _id, target);

 ? ?if (_singleton) {
 ? ? ?_singleInstance = new target();
 ? ?}

 ? ?Container.set(_id, _singleInstance || target);
 ?};};

Service?作為一個類裝飾器，id?是可選的一個標記模塊的變量，singleton?是一個可選的標記是否單例的變量，target?表示當前要注冊的類，拿到這個類之后，給它添加?metadata，方便日后使用。

Inject

接下來實現(xiàn)?Inject?裝飾器用來注入依賴。

// @libs/di/Inject.tsimport Container from './Container';// 使用 id 定義模塊后，需要使用 id 來注入模塊
export function Inject(id?: string): PropertyDecorator {
 ?return (target: Object, propertyKey: string | symbol) => {
 ? ?const Dependency = Reflect.getMetadata("design:type", target, propertyKey);

 ? ?const _id = id || Reflect.getMetadata("cus:id", Dependency);
 ? ?const _dependency = Container.get(_id);

 ? ?// 給屬性注入依賴
 ? ?Reflect.defineProperty(target, propertyKey, {
 ? ? ?value: _dependency,
 ? ?});
 ?};}

服務提供者

log 模塊：

// @services/log.tsimport { Service } from '@libs/di';@Service(true)class LogService {
 ?...}

config 模塊：

// @services/config.tsimport { Container } from '@libs/di';export const token = '29993b9f-de22-44b5-87c3-e209f4174e39';// 可在入口文件處調用以載入
export default () => {
 ?Container.set('token', token);};

消費者

// @controllers/custom.tsimport LogService from '@services/log';class CustomerController {
 ?// 使用 Inject 注入
 ?@Inject()
 ?private log!: LogService;

 ?// 使用 Container.get 注入
 ?private token = Container.get('token');

 ?public main(): void {
 ? ?this.log.info(this.token);
 ?}}

運行結果

[INF] 2020-08-07T11:56:48.775Z 29993b9f-de22-44b5-87c3-e209f4174e39

注意事項

decorator?有可能會在正式調用之前初始化，因此?Inject?步驟可能會在使用?Container.set?注冊之前執(zhí)行（如上文的?config?模塊注冊和?token?的注入），此時可以使用?Container.get?替代。

我們甚至可以讓參數(shù)注入在?constructor?形參里面，使用?Inject?直接在構造函數(shù)里注入依賴。當然這就需要自己下去思考了：

constructor(@Inject() log: LogService) {
 ?this.log = log;}