您好,登錄后才能下訂單哦!
這篇文章主要講解了“VSCode中的依賴注入怎么實現(xiàn)”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“VSCode中的依賴注入怎么實現(xiàn)”吧!
如果有這樣一個模塊 A,它的實現(xiàn)依賴另一個模塊 B 的能力,那么應(yīng)該如何設(shè)計呢?很簡單,我們可以在 A 模塊的構(gòu)造函數(shù)中實例化模塊 B,這樣就可以在模塊 A 內(nèi)部使用模塊 B 的能力了。
但是這樣做有兩個問題,一是模塊 A 的實例化過程中,需要手動實例化模塊 B,而且如果模塊 B 的依賴關(guān)系發(fā)生變化,那么也需要修改模塊 A 的構(gòu)造函數(shù),導(dǎo)致代碼耦合。class A {
constructor() {
this.b = new B();
}
}
class B {}
const a = new A();
二是在復(fù)雜項目中,我們在實例化模塊 A 時,難以判斷模塊 B 是否被其他模塊依賴而已經(jīng)實例化過了,從而可能將模塊 B 多次實例化。若模塊 B 較重或者需要為單例設(shè)計,這將帶來性能問題。
因此,更好的方式是,將所有模塊的實例化交給外層框架,由框架統(tǒng)一管理模塊的實例化過程,這樣就可以解決上述兩個問題。
這種將依賴對象通過外部注入,避免在模塊內(nèi)部實例化依賴的方式,稱為依賴注入 (Dependencies Inject, 簡稱 DI)。這在軟件工程中是一種常見的設(shè)計模式,我們在 Java 的 Spring,JS 的 Angular,Node 的 NestJS 等框架中都可以看到這種設(shè)計模式的應(yī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);
當然,在實際應(yīng)用中,由于模塊眾多,依賴復(fù)雜,我們很難像上面的例子一樣,規(guī)劃出來每個模塊的實例化時機,從而編寫模塊實例化順序。并且,許多模塊可能并不需要第一時間被創(chuàng)建,需要按需實例化,因此,粗暴的統(tǒng)一實例化是不可取的。
因此我們需要一個統(tǒng)一的框架來分析并管理所有模塊的實例化過程,這就是依賴注入框架的作用。
借助于 TypeScript 的裝飾器能力,VSCode 實現(xiàn)了一個極為輕量化的依賴注入框架。我們可以先來簡單實現(xiàn)一下,解開這個巧妙設(shè)計的神秘面紗。
實現(xiàn)一個依賴注入框架只需要兩步,一個是將模塊聲明并注冊到框架中進行管理,另一個是在模塊構(gòu)造函數(shù)中,聲明所需要依賴的模塊有哪些。
我們先來看模塊的注冊過程,這需要 TypeScript 的類裝飾器能力。我們在注入時,只需要判斷模塊是否已經(jīng)注冊,如果沒有注冊,將模塊的 id(這里簡化為模塊 Class 名稱)與類型傳入即可完成單個模塊的注冊。
之后我們再來看看模塊是如何聲明依賴的,這需要 TypeScript 的屬性裝飾器能力。我們在注入時,先判斷依賴的模塊是否已經(jīng)被實例化,如果沒有,則將依賴模塊進行實例化,并存入框架中管理。最終返回已經(jīng)被實例化完成的模塊實例。 最后只需要保證框架本身在項目運行前完成實例化即可。(在例子中表示為 injector) 這樣,一個最簡化的依賴注入框架就完成了。由于保存了模塊的類型與實例,它實現(xiàn)了模塊的按需實例化,無需在項目啟動時就初始化所有模塊。export function Injectable(): ClassDecorator {
return (Target: Class): any => {
if (!collection.providers.has(Target.name)) {
collection.providers.set(Target.name, target);
}
return target;
};
}
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);
};
}
export class ServiceCollection {
readonly providers = new Map<string, any>();
readonly dependencies = new Map<string, any>();
}
const collection = new ServiceCollection();
export default collection;
我們可以嘗試調(diào)用它,以上面舉出的例子為例:
無需知曉模塊 A,B 的實例化時機,直接初始化任何一個模塊,框架會自動幫你找到并實例化好所有依賴的模塊。@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();
上面介紹了一個依賴注入框架的最簡實現(xiàn)。但當我們真正閱讀 VSCode 的源碼時,我們發(fā)現(xiàn) VSCode 中的依賴注入框架貌似并不是這樣消費的。
例如在下面這段鑒權(quán)服務(wù)中,我們發(fā)現(xiàn)該類并沒有@injectable()
作為類的依賴收集,并且依賴服務(wù)也直接用其類名作為修飾器,而不是@inject()
。
其實這里的修飾符并不是真正指向類名,而是一個同名的資源描述符 id(VSCode 中稱之為 // src\vs\workbench\services\authentication\browser\authenticationService.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
) {}
}
ServiceIdentifier
),通常使用字符串或 Symbol 標識。
通過 ServiceIdentifier
作為 id,而不是簡單粗暴地通過類名稱作為 id 注冊 Service,有利于處理項目中一個 interface 可能存在多態(tài)實現(xiàn),需要同時多個同名類實例的問題。
此外,在構(gòu)造 ServiceIdentifier
時,我們便可以將該類聲明注入框架,而無需@injectable()
顯示調(diào)用了。
那么,這樣一個 ServiceIdentifier
該如何構(gòu)造呢?
我們僅需通過// src\vs\platform\instantiation\common\instantiation.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 需要變更多態(tài)實現(xiàn),僅需修改 ServiceIdentifier
修飾符確定實現(xiàn)方式即可,無需更改業(yè)務(wù)的調(diào)用代碼。
export const IActivityServicePlanA = createDecorator<IActivityService>("IActivityServicePlanA");
export const IActivityServicePlanB = createDecorator<IActivityService>("IActivityServicePlanB");
export interface IActivityService {...}
export class AuthenticationService {
constructor(
@IActivityServicePlanA private readonly activityService: IActivityService,
) {}
}
模塊之間的依賴關(guān)系是有可能存在循環(huán)依賴的,比如 A 依賴 B,B 依賴 A。這種情況下進行兩個模塊的實例化會造成死循環(huán),因此我們需要在框架中加入循環(huán)依賴檢測機制來進行規(guī)避。
本質(zhì)上,一個健康的模塊依賴關(guān)系就是一個有向無環(huán)圖(DAG),我們之前介紹過有向無環(huán)圖在 excel 表格函數(shù)中的應(yīng)用,放在依賴注入框架的設(shè)計中也同樣適用。
我們可以通過深度優(yōu)先搜索(DFS)來檢測模塊之間的依賴關(guān)系,如果發(fā)現(xiàn)存在循環(huán)依賴,則拋出異常。
該方法通過獲取圖節(jié)點的出度,將該類的全部依賴提取出來作為roots,然后逐個實例化,并從途中剝離該依賴節(jié)點。由于依賴樹的構(gòu)建是逐層依賴的,因此按順序?qū)嵗纯?。當發(fā)現(xiàn)該類的所有依賴都被實例化后,圖中仍存在節(jié)點,則認為存在循環(huán)依賴,拋出異常。// src/vs/platform/instantiation/common/instantiationService.ts
while (true) {
let roots = graph.roots();
// if there is no more roots but still
// nodes in the graph we have a cycle
if (roots.length === 0) {
if (graph.length !== 0) {
throwCycleError();
}
break;
}
for (let root of roots) {
// create instance and overwrite the service collections
const instance = this._createInstance(root.data.desc, []);
this._services.set(root.data.id, instance);
graph.removeNode(root.data);
}
}
感謝各位的閱讀,以上就是“VSCode中的依賴注入怎么實現(xiàn)”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對VSCode中的依賴注入怎么實現(xiàn)這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。