站長資訊網(wǎng)
php入門到就業(yè)線上直播課：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用
在閱讀 VSCode 代碼的過程中，我們會發(fā)現(xiàn)每一個模塊中都有大量裝飾器的使用，用來裝飾模塊以及其中依賴的模塊變量。這樣做的目的是什么呢？在這一篇中我們來詳細(xì)分析一下?！就扑]學(xué)習(xí)：vscode教程、編程視頻】
依賴注入介紹
如果有這樣一個模塊 A，它的實現(xiàn)依賴另一個模塊 B 的能力，那么應(yīng)該如何設(shè)計呢？很簡單，我們可以在 A 模塊的構(gòu)造函數(shù)中實例化模塊 B，這樣就可以在模塊 A 內(nèi)部使用模塊 B 的能力了。
class A { constructor() { this.b = new B(); } } class B {} const a = new A();
但是這樣做有兩個問題，一是模塊 A 的實例化過程中，需要手動實例化模塊 B，而且如果模塊 B 的依賴關(guān)系發(fā)生變化，那么也需要修改模塊 A 的構(gòu)造函數(shù)，導(dǎo)致代碼耦合。
二是在復(fù)雜項目中，我們在實例化模塊 A 時，難以判斷模塊 B 是否被其他模塊依賴而已經(jīng)實例化過了，從而可能將模塊 B 多次實例化。若模塊 B 較重或者需要為單例設(shè)計，這將帶來性能問題。
因此，更好的方式是，將所有模塊的實例化交給外層框架，由框架統(tǒng)一管理模塊的實例化過程，這樣就可以解決上述兩個問題。
class A { constructor(private b: B) { this.b = b; } } class B {} class C { constructor(private a: A, private b: B) { this.b = b; } } const b = new B(); const a = new A(b); const c = new C(a, b);
這種將依賴對象通過外部注入，避免在模塊內(nèi)部實例化依賴的方式，稱為依賴注入 (Dependencies Inject, 簡稱 DI)。這在軟件工程中是一種常見的設(shè)計模式，我們在 Java 的 Spring，JS 的 Angular，Node 的 NestJS 等框架中都可以看到這種設(shè)計模式的應(yīng)用。
當(dāng)然，在實際應(yīng)用中，由于模塊眾多，依賴復(fù)雜，我們很難像上面的例子一樣，規(guī)劃出來每個模塊的實例化時機(jī)，從而編寫模塊實例化順序。并且，許多模塊可能并不需要第一時間被創(chuàng)建，需要按需實例化，因此，粗暴的統(tǒng)一實例化是不可取的。
因此我們需要一個統(tǒng)一的框架來分析并管理所有模塊的實例化過程，這就是依賴注入框架的作用。
借助于 TypeScript 的裝飾器能力，VSCode 實現(xiàn)了一個極為輕量化的依賴注入框架。我們可以先來簡單實現(xiàn)一下，解開這個巧妙設(shè)計的神秘面紗。
最簡依賴注入框架設(shè)計
實現(xiàn)一個依賴注入框架只需要兩步，一個是將模塊聲明并注冊到框架中進(jìn)行管理，另一個是在模塊構(gòu)造函數(shù)中，聲明所需要依賴的模塊有哪些。
我們先來看模塊的注冊過程，這需要 TypeScript 的類裝飾器能力。我們在注入時，只需要判斷模塊是否已經(jīng)注冊，如果沒有注冊，將模塊的 id（這里簡化為模塊 Class 名稱）與類型傳入即可完成單個模塊的注冊。
export function Injectable(): ClassDecorator { return (Target: Class): any => { if (!collection.providers.has(Target.name)) { collection.providers.set(Target.name, target); } return target; }; }
之后我們再來看看模塊是如何聲明依賴的，這需要 TypeScript 的屬性裝飾器能力。我們在注入時，先判斷依賴的模塊是否已經(jīng)被實例化，如果沒有，則將依賴模塊進(jìn)行實例化，并存入框架中管理。最終返回已經(jīng)被實例化完成的模塊實例。
export function Inject(): PropertyDecorator { return (target: Property, propertyKey: string) => { const instance = collection.dependencies.get(propertyKey); if (!instance) { const DependencyProvider: Class = collection.providers.get(propertyKey); collection.dependencies.set(propertyKey, new DependencyProvider()); } target[propertyKey] = collection.dependencies.get(propertyKey); }; }
最后只需要保證框架本身在項目運行前完成實例化即可。（在例子中表示為 injector）
export class ServiceCollection { readonly providers = new Map<string, any>(); readonly dependencies = new Map<string, any>(); } const collection = new ServiceCollection(); export default collection;
這樣，一個最簡化的依賴注入框架就完成了。由于保存了模塊的類型與實例，它實現(xiàn)了模塊的按需實例化，無需在項目啟動時就初始化所有模塊。
我們可以嘗試調(diào)用它，以上面舉出的例子為例：
@injectable() class A { constructor(@inject() private b: B) { this.b = b; } } @injectable() class B {} class C { constructor(@inject() private a: A, @inject() private b: B) { this.b = b; } } const c = new C();
無需知曉模塊 A，B 的實例化時機(jī)，直接初始化任何一個模塊，框架會自動幫你找到并實例化好所有依賴的模塊。
VSCode 的依賴收集實現(xiàn)
上面介紹了一個依賴注入框架的最簡實現(xiàn)。但當(dāng)我們真正閱讀 VSCode 的源碼時，我們發(fā)現(xiàn) VSCode 中的依賴注入框架貌似并不是這樣消費的。
例如在下面這段鑒權(quán)服務(wù)中，我們發(fā)現(xiàn)該類并沒有@injectable()作為類的依賴收集，并且依賴服務(wù)也直接用其類名作為修飾器，而不是@inject()。
// srcvsworkbenchservicesauthenticationbrowserauthenticationService.ts export class AuthenticationService extends Disposable implements IAuthenticationService { constructor( @IActivityService private readonly activityService: IActivityService, @IExtensionService private readonly extensionService: IExtensionService, @IStorageService private readonly storageService: IStorageService, @IRemoteAgentService private readonly remoteAgentService: IRemoteAgentService, @IDialogService private readonly dialogService: IDialogService, @IQuickInputService private readonly quickInputService: IQuickInputService ) {} }
其實這里的修飾符并不是真正指向類名，而是一個同名的資源描述符 id(VSCode 中稱之為 ServiceIdentifier)，通常使用字符串或 Symbol 標(biāo)識。
通過 ServiceIdentifier 作為 id，而不是簡單粗暴地通過類名稱作為 id 注冊 Service，有利于處理項目中一個 interface 可能存在多態(tài)實現(xiàn)，需要同時多個同名類實例的問題。
此外，在構(gòu)造 ServiceIdentifier 時，我們便可以將該類聲明注入框架，而無需@injectable()顯示調(diào)用了。
那么，這樣一個 ServiceIdentifier 該如何構(gòu)造呢？
// srcvsplatforminstantiationcommoninstantiation.ts /** * The *only* valid way to create a {{ServiceIdentifier}}. */ export function createDecorator<T>(serviceId: string): ServiceIdentifier<T> { if (_util.serviceIds.has(serviceId)) { return _util.serviceIds.get(serviceId)!; } const id = <any>function (target: Function, key: string, index: number): any { if (arguments.length !== 3) { throw new Error('@IServiceName-decorator can only be used to decorate a parameter'); } storeServiceDependency(id, target, index); }; id.toString = () => serviceId; _util.serviceIds.set(serviceId, id); return id; } // 被 ServiceIdentifier 裝飾的類在運行時，將收集該類的依賴，注入到框架中。 function storeServiceDependency(id: Function, target: Function, index: number): void { if ((target as any)[_util.DI_TARGET] === target) { (target as any)[_util.DI_DEPENDENCIES].push({ id, index }); } else { (target as any)[_util.DI_DEPENDENCIES] = [{ id, index }]; (target as any)[_util.DI_TARGET] = target; } }
我們僅需通過createDecorator方法為類創(chuàng)建一個唯一的ServiceIdentifier，并將其作為修飾符即可。
以上面的 AuthenticationService 為例，若所依賴的 ActivityService 需要變
