在前端开发中，依赖注入是非常常见的一种技术方案。而 npm 上有不少有效的开源库能够解决依赖注入问题。其中，method-cxt-di 是一款适合在 JavaScript/TypeScript 中使用的依赖注入库，它可以帮助我们更好地管理和使用应用程序中的依赖关系。在本文中，我们将介绍如何使用这个库来进行依赖注入，并提供详细的代码示例和解释。
基本概念
在使用 method-cxt-di 之前，我们需要先理解一些相关的概念。
Provider
Provider 是依赖注入的重要概念之一。它是一个类或对象，它有一个提供服务的方法。在 method-cxt-di 中，我们可以通过 @Provide 或 provide() 来定义一个 Provider。在构造一个对象时，该对象的所有依赖关系将会自动注入。
InjectionToken
InjectionToken 是 method-cxt-di 中用于标识依赖关系的标记。它是一个独立的对象，可以作为参数传递给 Provider 或者 Consumer。
Consumer
Consumer 是那些需要使用服务的对象，也可以是 Provider。在 method-cxt-di 中，我们可以通过 @Inject 或 inject() 来注入需要的服务。
安装和设置
首先，我们需要将 method-cxt-di 安装到我们的项目中。可以使用 npm 或 yarn 来进行安装：
# 使用 npm 安装 npm install method-cxt-di # 使用 yarn 安装 yarn add method-cxt-di
然后，我们需要在我们的代码中引入 DiContainer 类。DiContainer 是 method-cxt-di 的主要类，它用于管理所有的 Provider 和 Consumer。
import { DiContainer } from 'method-cxt-di';在实例化 DiContainer 后，我们就可以在其中添加 Provider 了。
-- -------------------- ---- -------
------ - ------------ ------- - ---- ----------------
----------
----- --------- -
------ ---------- -
------------------- ---------
-
-
----- --------- - --- --------------
---------------------------------这样，我们就定义了一个 MyService 的 Provider，它可以提供一个 sayHello 方法，并将其添加到了 DiContainer 中。接下来，我们可以在其他 Consumer 中使用 MyService 了。
-- -------------------- ---- -------
------ - ------------ ------ - ---- ----------------
----------
----- ---------- -
------------------------------ ------- ---------- ---------- --
------ ---------- -
--------------------------
-
-
----- --------- - --- --------------
---------------------------------
----------------------------------
----- ---------- - --------------------------
----------------------这里我们定义了一个 MyConsumer，它通过 @Inject(MyService) 来注入 MyService。最后，我们在 DiContainer 中获取 MyConsumer 的实例，并调用 sayHello 方法。
在这个例子中，我们使用了 @Provide、@Inject 和 addProvider 方法来定义 Provider 和 Consumer、注入依赖关系并添加它们到 DiContainer 中。接下来，我们将更详细地介绍这些概念及它们的用法。
定义 Provider
如上所述，我们可以使用 @Provide 或者 provide() 方法来定义一个 Provider。这些方法都接受一个可选的参数，用于指定该 Provider 的名称，用于后续的注入和获取实例。
import { Provide, provide } from 'method-cxt-di';
@Provide('MyProvider1')
class MyProvider1 {}
provide('MyProvider2')(class MyProvider2 {});定义好 Provider 后，我们需要为其添加服务方法。方法也是标记的，需要使用 @Provide 或者 provide() 来定义。
-- -------------------- ---- -------
----------------------
----- ---------- -
----------
------ ---------- -
------------------- ---------
-
-
--------------------------- ---------- -
----------
------ ---------- -
------------------- ---------
-
---在上面的例子中，我们分别定义了 MyService1 和 MyService2，它们都提供一个 sayHello 方法来输出一条消息。
注入 Provider
在 Consumer 中，我们可以使用 @Inject 或者 inject() 来注入我们需要的 Provider。
-- -------------------- ---- -------
------ - ------- ------ - ---- ----------------
----------
----- ---------- -
------------
--------------------- ------- ----------- -----------
--------------------- ------- ----------- -----------
- --
------ ------------- -
---------------------------
---------------------------
-
-
-------------------- ------------------- ----------- -
------------------- ----------- ----------- ------- ----------- ----------- --
------ ------------- -
---------------------------
---------------------------
-
---在这个例子中，我们使用了 @Inject 和 inject() 注入了 MyService1 和 MyService2。需要注意的是，我们需要在构造函数中声明需要注入的 Provider，这样 DiContainer 才能在创建一个实例时自动注入这些对象。
注入额外参数
在 Provider 自身提供的服务方法中，我们可以通过注入其它对象来实现更强的服务功能。需要在服务方法中声明需要注入的依赖对象。
@Provide('MyService3')
class MyService3 {
@Provide()
public sayHello(name: string, @Inject(MyService1) myService1: MyService1) {
console.log(`Hello, ${name}!`);
myService1.sayHello();
}
}在这个例子中，我们在 sayHello 方法中注入了一个 name 参数和 MyService1。需要注意的是，我们使用了 @Inject 和 Inject，虽然我们直接在方法上使用，但它们的效果和在构造函数中注入基本相同。
调用此方法的代码示例如下：
import { DiContainer } from 'method-cxt-di';
const container = new DiContainer();
container.addProvider(MyService1);
container.addProvider(MyService3);
const myService3 = container.get(MyService3);
myService3.sayHello('World');在调用 MyService3 的 sayHello 方法时，我们需要传入一个字符串参数作为 name 参数。需要注意的是，我们不需要显式地传递 MyService1 实例，DiContainer 会自动完成注入。
使用 InjectionToken
InjectionToken 是一种更为灵活的注入方式，它可以帮助我们更好地处理某些特殊情况。
-- -------------------- ---- -------
------ - ------------ -------------- - ---- ----------------
----- -------- - --- -----------------------------------
----- ----------- - --- --------------------------------------
----------
----- ---------- -
----------------------------- ------- -------- ------- --
------ ---------- -
------------------- -------------------
-
-
----------
----- ----------- -
------------
----------------- ------- -------- -------
-------------------- ------- ----------- -------
- --
------ ----------- -
--------------- ----- -- --------------- --- ----- ----- -- ---------------------
-
-
----- --------- - --- --------------
----------------------------------
-----------------------------------
----------------------- ---------
-------------------------- -----
----- ----------- - ---------------------------
------------------------在这个例子中，我们使用 InjectionToken 来定义了 MY_TOKEN 和 OTHER_TOKEN，它们分别用来存储一个字符串和一个数字类型的数据。在 MyService4 和 MyConsumer3 的构造函数中，我们通过 @Inject(MY_TOKEN) 和 @Inject(OTHER_TOKEN) 来注入依赖关系，而在 DiContainer 中，我们使用 set() 方法来设置 MY_TOKEN 和 OTHER_TOKEN。这些内容都需要在使用 InjectionToken 时格外地注意。
总结
在本文中，我们介绍了 method-cxt-di 这个依赖注入库的基本用法。它提供了 @Provide、@Inject、DiContainer 和 Provider 等重要的概念和功能，可以让我们在应用程序中更好地管理和使用依赖关系。希望本文能够提供一些帮助，让读者更好地掌握这一技术。完整的内容如下所示。
-- -------------------- ---- -------
------ - ------------ -------------- - ---- ----------------
------ - -------- -------- ------- ------ - ---- ----------------
----- -------- - --- -----------------------------------
----- ----------- - --- --------------------------------------
----------
----- --------- -
------ ---------- -
------------------- ---------
-
-
----------------------
----- ---------- -
----------
------ ---------- -
------------------- ---------
-
-
--------------------------- ---------- -
----------
------ ---------- -
------------------- ---------
-
---
----------------------
----- ---------- -
----------
------ -------------- ------- ------------------- ----------- ----------- -
------------------- -----------
----------------------
-
-
----------
----- ---------- -
----------------------------- ------- -------- ------- --
------ ---------- -
------------------- -------------------
-
-
----------
----- ---------- -
------------
--------------------- ------- ----------- -----------
--------------------- ------- ----------- ----
--------------------- ------- ----------- ----
- --
------ ------------- -
---------------------------
---------------------------
----------------------------------
-
-
-------------------- ------------- ------------------- ----------- -
------------
------- ----------- -----------
------- ----------- ----
------- ----------- ----
- --
------ ------------- -
---------------------------
---------------------------
----------------------------------
-
---
----------
----- ----------- -
------------
----------------- ------- -------- -------
-------------------- ------- ----------- -------
- --
------ ----------- -
--------------- ----- -- --------------- --- ----- ----- -- ---------------------
-
-
----- --------- - --- --------------
---------------------------------
----------------------------------
----------------------------------
-----------------------------------
----------------------------------
----------------------- ---------
-------------------------- -----
----- ---------- - --------------------------
-------------------------
----- ----------- - ---------------------------
--------------------------
----- ----------- - ---------------------------
------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581181e8991b448d5378