快捷導(dǎo)航

如何為Vue3提供一個可媲美Angular的ioc容器

更新時間：2024年08月02日 10:05:50 作者：濮水大叔

ue3因其出色的響應(yīng)式系統(tǒng),以及便利的功能特性,完全勝任大型業(yè)務(wù)系統(tǒng)的開發(fā),這篇文章主要介紹了如何為Vue3提供一個可媲美Angular的ioc容器,需要的朋友可以參考下

為什么要為Vue3提供ioc容器

Vue3因其出色的響應(yīng)式系統(tǒng)，以及便利的功能特性，完全勝任大型業(yè)務(wù)系統(tǒng)的開發(fā)。但是，我們不僅要能做到，而且要做得更好。大型業(yè)務(wù)系統(tǒng)的關(guān)鍵就是解耦合，從而減緩shi山代碼的生長。而ioc容器是目前最好的解耦合工具。Angular從一開始就引入了ioc容器，因此在業(yè)務(wù)工程化方面一直處于領(lǐng)先地位，并且一直在向其他前端框架招手：“我在前面等你們，希望三年后能再見”。那么，我就試著向前走兩步，在Vue3中引入ioc容器，并以此為基礎(chǔ)擴充其他工程能力，得到一個新框架：Zova。諸君覺得是否好用，歡迎拍磚、交流：

IOC容器分類

在 Zova 中有兩類 ioc 容器:

全局ioc容器：在系統(tǒng)初始化時，會自動創(chuàng)建唯一一個全局 ioc 容器。在這個容器中創(chuàng)建的Bean實例都是單例模式
組件實例ioc容器：在創(chuàng)建 Vue 組件實例時，系統(tǒng)會為每一個 Vue 組件實例創(chuàng)建一個 ioc 容器。在這個容器中創(chuàng)建的Bean實例可以在組件實例范圍之內(nèi)共享數(shù)據(jù)和邏輯

Bean Class分類

Zova 采用模塊化體系，Bean Class 都由不同的模塊提供。使用模塊內(nèi)部的 Bean Class 時可以直接基于Class類型定位。在跨模塊使用時可以基于Bean標(biāo)識定位，而不是基于Class類型/文件路徑定位，這樣有利于實現(xiàn)模塊之間的松耦合

因此，Zova 提供了兩類 Bean Class：

匿名bean：使用@Local裝飾的 class 就是匿名bean。此類 bean 僅在模塊內(nèi)部使用，不存在命名沖突的問題，定義和使用都很便捷
具名bean：除了@Local之外，其他裝飾器函數(shù)裝飾的 class 都是具名bean。Zova 為此類 bean 提供了命名規(guī)范，既可以避免命名沖突，也有利于跨模塊使用

注入機制

Zova 通過@Use裝飾器函數(shù)注入 Bean 實例，提供了以下幾種注入機制：

1. Bean Class

通過Bean Class在 ioc 容器中查找并注入 Bean 實例，如果不存在則自動創(chuàng)建。這種機制一般用于同模塊注入

import { ModelTodo } from '../../bean/model.todo.js';
class ControllerTodo {
  @Use()
  $$modelTodo: ModelTodo;
}

2. Bean標(biāo)識

通過Bean標(biāo)識在 ioc 容器中查找并注入 Bean 實例，如果不存在則自動創(chuàng)建。這種機制一般用于跨模塊注入和層級注入

import type { ModelTabs } from 'zova-module-a-tabs';
class ControllerLayout {
  @Use('a-tabs.model.tabs')
  $$modelTabs: ModelTabs;
}

通過a-tabs.model.tabs查找并注入 Bean 實例
因此，只需導(dǎo)入 ModelTabs 的 type 類型，從而保持模塊之間的松耦合關(guān)系

3. 注冊名

通過注冊名在 ioc 容器中查找并注入 Bean 實例，如果不存在則返回空值。這種機制一般用于同模塊注入和層級注入

import type { ModelTodo } from '../../bean/model.todo.js';
class ControllerTodo {
  @Use({ name: '$$modelTodo' })
  $$modelTodo: ModelTodo;
}

通過注冊名$$modelTodo查找并注入 Bean 實例。一般而言，應(yīng)該確保在 ioc 容器中已經(jīng)事先注入過 Bean 實例，否則就會返回空值

4. 變量名

通過變量名在 ioc 容器中查找并注入 Bean 實例，如果不存在則返回空值。這種機制一般用于同模塊注入和層級注入

import type { ModelTodo } from '../../bean/model.todo.js';
class ControllerTodo {
  @Use()
  $$modelTodo: ModelTodo;
}

通過變量名$$modelTodo查找并注入 Bean 實例。一般而言，應(yīng)該確保在 ioc 容器中已經(jīng)事先注入過 Bean 實例，否則就會返回空值

注入范圍

匿名bean的默認(rèn)注入范圍都是ctx，具名bean可以在定義時指定默認(rèn)注入范圍，不同的場景(scene)有不同的默認(rèn)注入范圍。此外，在實際注入時，還可以在@Use 中通過injectionScope選項覆蓋默認(rèn)的注入范圍

Zova 提供了以下幾種注入范圍：app/ctx/new/host/skipSelf

1. app

如果注入范圍是 app，那么就在全局 ioc 容器中注入 bean 實例，從而實現(xiàn)單例的效果

// in module: test-module1
@Store()
class StoreCounter {}

// in module: test-module2
import type { StoreCounter } from 'zova-module-test-module1';
class Test {
  @Use('test-module1.store.counter')
  $$storeCounter: StoreCounter;
}

Store 的注入范圍默認(rèn)是 app，因此通過 Bean 標(biāo)識test-module1.store.counter在全局 ioc 容器中查找并注入 bean 實例

2. ctx

如果注入范圍是 ctx，那么就在當(dāng)前組件實例的 ioc 容器中注入 bean 實例

// in module: a-tabs
@Model()
class ModelTabs {}

// in module: test-module2
import type { ModelTabs } from 'zova-module-a-tabs';
class ControllerLayout {
  @Use('a-tabs.model.tabs')
  $$modelTabs: ModelTabs;
}

Model 的注入范圍默認(rèn)是 ctx，因此通過 Bean 標(biāo)識a-tabs.model.tabs在當(dāng)前組件實例的 ioc 容器中查找并注入 bean 實例

3. new

如果注入范圍是 new，那么就直接創(chuàng)建新的 bean 實例

// in module: a-tabs
@Model()
class ModelTabs {}

// in module: test-module2
import type { ModelTabs } from 'zova-module-a-tabs';
class ControllerLayout {
  @Use({ beanFullName: 'a-tabs.model.tabs', injectionScope: 'new' })
  $$modelTabs: ModelTabs;
}

由于指定 injectionScope 選項為 new，因此通過 Bean 標(biāo)識a-tabs.model.tabs直接創(chuàng)建新的 bean 實例

層級注入

注入范圍除了支持app/ctx/new，還支持層級注入：host/skipSelf

4. host

如果注入范圍是 host，那么就在當(dāng)前組件實例的 ioc 容器以及所有父容器中依次查找并注入 bean 實例，如果不存在則返回空值

// in parent component
import type { ModelTabs } from 'zova-module-a-tabs';
class Parent {
  @Use('a-tabs.model.tabs')
  $$modelTabs: ModelTabs;
}

// in child component
import type { ModelTabs } from 'zova-module-a-tabs';
class Child {
  @Use({ injectionScope: 'host' })
  $$modelTabs: ModelTabs;
}