在前端开发领域，依赖注入（Dependency Injection，简称 DI）是一种常见的设计模式，用于解决组件之间的耦合问题，并提高代码的可维护性和可测试性。在 JavaScript 中，有许多优秀的 DI 库可以使用，其中 @simple-ui/di 是一个轻量级的 DI 库，本文将介绍如何使用它。
安装
首先，你需要在你的项目中安装 @simple-ui/di，可以通过 npm 或 yarn 安装：
--- ------- -------------
或
---- --- -------------
使用
@simple-ui/di 的使用非常简单，它提供了一个 Container 类，你只需要创建一个 Container 实例，然后通过 register 方法注册依赖，最后使用 get 方法获取相应的依赖即可。
下面是一个简单的示例，我们将创建一个 Person 的类，并将其注入到 Greeting 类中：
------ - --------- - ---- ----------------
----- ------ -
----- -------
----------------- ------- -
--------- - -----
-
---------- -
------------------- -- ---- -- ---------------
-
-
----- -------- -
------- -------
------------------- ------- -
----------- - -------
-
------- -
-----------------------
-
-
----- --------- - --- ------------
---------------------------- ------- -----------
------------------------------ --------- ------------
----- -------- - ------------------------------------
----------------- -- --------- -- ---- -- -----在上面的示例中，我们首先创建了一个 Container 实例，并使用 register 方法注册了两个依赖：Person 和 Greeting。对于 Person，我们传入了参数 ['Alice']，表示其构造函数需要一个参数，这个参数的值为 ['Alice'] 数组中的元素；对于 Greeting，我们传入了参数 ['person']，表示其构造函数依赖于 person 实例。
最后，我们使用 container.get<Greeting>('greeting') 方法获取 Greeting 的实例，由于 Greeting 依赖于 Person，所以 Person 也会被自动创建并注入到 Greeting 中，最终我们可以执行 greeting.greet() 方法来输出 Hello, my name is Alice。
生命周期
@simple-ui/di 还提供了一些生命周期方法，你可以在注册依赖时传递 Lifecycle 枚举值来选择对应的生命周期方法。目前支持的生命周期方法有：
TRANSIENT: 表示每次使用get方法获取依赖时都会创建一个新的实例。SINGLETON: 表示整个应用只会创建一个实例，并在第一次使用get方法获取依赖时创建。
下面是一个示例，我们将创建一个 Counter 类，并将其注册为 SINGLETON 生命周期：
------ - ---------- --------- - ---- ----------------
----- ------- -
------- ------ -------
------------- -
---------- - --
-
---------- -
------ -----------
-
---------------- -
-------------
-
-
----- --------- - --- ------------
----------------------------- -------- --- ---------------------
----- -------- - ----------------------------------
--------------------------------- -- ----
--------------------------
--------------------------------- -- ----
----- -------- - ----------------------------------
--------------------------------- -- ----------- ------- --在上面的示例中，由于我们将 Counter 类注册为 SINGLETON 生命周期，所以每次调用 container.get<Counter>('counter') 方法时，都会返回同一个 Counter 实例，在第一个 counter1.incrementCount() 方法执行后，counter2.getCount() 输出的结果也变为了 1。
总结
@simple-ui/di 是一个简单易用的 DI 库，它帮助我们解决了组件之间的耦合和代码可维护性和可测试性问题。在实际开发中，我们可以将业务逻辑和依赖的创建分开，使用 DI 模式使得我们的代码更加清晰和可维护。
完整示例代码可访问 Github 获取。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005581481e8991b448d5395