前端开发中，依赖注入是一种常见的开发模式。通过依赖注入，我们可以更好地解耦模块之间的依赖关系，提高代码的可复用性。
好消息是，在 npm 上有一个名为 good-injector 的包，它提供了一种简单而强大的依赖注入解决方案。在本篇文章中，我们将介绍如何使用 good-injector 实现依赖注入。
安装
安装 good-injector 是非常简单的。只需在命令行输入以下命令即可：
npm install good-injector --save
好了，现在你已经准备好可以开始依赖注入了。
使用基础
在 start 前进行必要配置
Injector.config({ verbose: false, // 异常输出 debug: false, // 调试输出 onError: (e, key, module) => { // 错误回调函数 } })
下面我们将针对一些使用场景展开说明。
注册依赖
要使用 good-injector，首先我们需要注册需要注入的依赖项。 在下面的示例中，我们将注册一个名为 "foo" 的依赖项，并注入一个名为 "bar" 的依赖项。
-- -------------------- ---- -------
----- -------- - -------------------------
----- --- -
------------- -
--------- - ------
-------- - --------------------
-
---------- -
------------------- -- ---- -- ---------------
--------------------
-
-
----- --- -
------------- -
--------- - ------
-
---------- -
------------------- -- ---- -- ---------------
-
-
------------------------ -----
------------------------ -----
----- --- - --------------------
--------------- -- -- ------- -- ---- -- ---- - ------- -- ---- -- ----在上面的代码中，我们首先定义了两个类：Foo 和 Bar。Foo 类具有一个名为 bar 的成员变量，我们将在构造函数中注入一个名为 "bar" 的依赖项。注意，在我们调用 Injector.get("foo") 时，good-injector 会自动将 "bar" 的依赖项注入到 "foo" 实例中，因此在调用 foo.sayHello() 时，会输出 'Hello, my name is bar'。
使用作用域
有时候我们需要将依赖项注册在特定的作用域中，这可以通过指定一个字符串名称的作用域来实现。在下面的示例中，我们将注册一个名为 "foo" 的依赖项，并在名为 "homepage" 的作用域中使用它。
-- -------------------- ---- -------
----- -------- - -------------------------
----- --- -
------------- -
--------- - ------
-
---------- -
------------------- -- ---- -- ---------------
-
-
------------------------ ---- ------------
-------------------------- -- -- -
----- --- - --------------------
--------------- -- -- ------- -- ---- -- ----
---
-- ----- ----- ------使用参数
在某些情况下，我们需要将参数传递给构造函数进行实例化。这可以通过在调用 Injector.get() 时传递一个数组变量来实现。在下面的示例中，我们将实例化一个名为 "foo" 的类，并将一个字符串值 "baz" 传递给其构造函数。
-- -------------------- ---- -------
----- -------- - -------------------------
----- --- -
---------------- ---- -
-------- - ----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------ --- -- ----- -- --------------
-
-
------------------------ -----
----- --- - ------------------- ------- --------
--------------- -- -- ------- -- ---- -- ---- --- -- ----- -- ----在上面的代码中，我们首先定义了一个名为 "foo" 的类，它接受两个参数：foo 和 bar。在调用 Injector.get() 时，我们传递了一个数组变量，其中第一个元素是 "foo"，第二个元素是 "baz"。
使用实例
在某些情况下，我们不一定需要使用 good-injector 创建实例，而是已经有了一个实例，并且希望将其作为依赖项注入到其他实例中。这可以通过调用 Injector.set() 来实现。在下面的示例中，我们将创建一个名为 "bar" 的类的实例，并将其注入到另一个名为 "foo" 的实例中。
-- -------------------- ---- -------
----- -------- - -------------------------
----- --- -
------------- -
--------- - ------
-------- - --------------------
-
---------- -
------------------- -- ---- -- ---------------
--------------------
-
-
----- --- -
------------- -
--------- - ------
-
---------- -
------------------- -- ---- -- ---------------
-
-
------------------------ -----
------------------------ -----
----- --- - --- ------
------------------- -----
----- --- - --------------------
--------------- -- -- ------- -- ---- -- ---- - ------- -- ---- -- ----在上面的代码中，我们首先创建了一个名为 "bar" 的类的实例，并使用 Injector.set() 将其注册为名为 "bar" 的依赖项。在我们获取名为 "foo" 的依赖项实例时，good-injector 自动注入了我们创建的 "bar" 实例。
使用Provider
如果有一个需要更多配置的类，此时我们需要使用 provider。
-- -------------------- ---- -------
----- -------- - -------------------------
----- --- -
------------- -
--------- - ------
-
---------- -
------------------- -- ---- -- ---------------
-
-
----- ----------- -
------ ------- - ---
------------- --
------ -
----- --- - --- ------
-------- - -- ---- ---- -------- -- --- -----------
------ ----
-
-
------------------------ -------------
----- --- - --------------------
--------------- -- -- ------- -- ---- -- - ---- ---- -------- -- --- ----------在上面的代码中，我们定义了一个名为 "FooProvider" 的 Provider 类。在其 $get() 方法中，我们可以进行更多的自定义逻辑，并返回修改后的实例。在调用 Injector.get("foo") 时，我们的自定义逻辑将自动被调用。
总结
好了，这就是 good-injector 的基本使用教程。如你所见，good-injector 提供了一种强大而灵活的依赖注入解决方案，可以帮助我们更好地管理组件之间的依赖关系。希望它可以在你的下一个项目中派上用场！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e73255dee6beeee7511