Web Components 的一个重要特性是 Custom Elements，允许开发者自定义 HTML 标签，实现可复用的组件。当我们在编写 Custom Elements 时，我们常常需要考虑如何处理组件依赖关系，以便在不同的上下文环境中使用或测试组件。本文将介绍在 Custom Elements 中如何实现依赖注入，以及为什么使用这种模式。
什么是依赖注入？
依赖注入（Dependency Injection，简称 DI） 是一种设计模式，用来组合对象（或组件）之间的关系。它的基本思想是通过构造函数、属性注入或方法注入等方式，在运行时将对象所需要的依赖项注入到它们当中，从而实现松耦合的组件设计。
依赖注入经常用于复杂的业务场景，它有以下优势：
支持模块化设计： 开发者可以将组件拆分成不同的模块，对不同模块之间的依赖进行明确的定义。
容易进行单元测试： 注入依赖项的方式与直接调用组件不同，这使得我们能够更好地控制组件的行为，方便写单元测试。
在 Custom Elements 中使用依赖注入
在 Web Components 中，我们可以使用 ES6 中的类语法定义 Custom Elements，以实现复用的组件。下面是一个简单的例子：
class MyComponent extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: 'open' });
this.shadow.innerHTML = '<h1>Hello World</h1>';
}
}上述代码中，我们创建了一个名为 MyComponent 的 Custom Element，它继承自 HTMLElement，重写了类的 constructor 方法，并在 constructor 方法中定义了它的 DOM 结构。这个组件可以在其他的 HTML 文档中使用：
<body> <my-component></my-component> <script src="my-component.js"></script> </body>
虽然这个例子十分简单，但是它暴露了一个问题：如果 MyComponent 需要依赖其他模块，我们该如何处理呢？一个常见的做法就是将依赖项作为构造函数的参数传入：
-- -------------------- ---- -------
----- ------------ -
------------- -
-------------- -- ----- -------------
-
-
----- ----------- ------- ----------- -
----------------------- -
--------
--------------- - ---------- -- --- --------------- -- ----------------
----------- - ------------------- ----- ------ ---
--------------------- - ---------- ------------
-
------------------- -
------------------------------
-
-在上述代码中，我们首先定义了一个 MyDependency 类，它是一个普通的 JavaScript 类，用来表示 MyComponent 的依赖项。然后，在 MyComponent 构造函数中进行了依赖注入，如果没有传入依赖项，则创建一个默认的依赖项。最后，在 MyComponent 的 connectedCallback 方法中调用依赖项的 doSomething 方法。
现在，如果我们需要在其他模块中使用 MyComponent，只需要手动注入依赖项即可：
const myDependency = new MyDependency();
customElements.define('my-component', MyComponent);在这个例子中，我们手动创建了一个 MyDependency 实例，并将其传入 MyComponent 的构造函数。当我们在 HTML 文档中使用 <my-component> 标签时，它会自动构造 MyComponent 实例，在构造函数中注入 myDependency。
依赖注入的应用场景
在 Custom Elements 中使用依赖注入，可以帮助我们更好地管理组件之间的依赖关系，让我们的组件更加可复用。下面是一些应用场景：
数据服务： 如果你正在使用 Web Components 构建一个富互联网应用，那么你需要努力将业务逻辑和数据逻辑分离。在这种情况下，你可能需要使用数据服务来获取数据。依赖注入提供了一种很好的方式来将数据服务注入到组件中。
路由器： 如果你的应用程序包含多个路由，你可以使用依赖注入来将路由器注入每个组件中。这样，你就可以减少代码浪费，也能更好地保护组件代码免受底层路由器的影响。
虚拟 DOM： React 等虚拟 DOM 框架通常使用 Context API 或 Provider 来在应用程序中传递数据。使用依赖注入，你可以获得类似的效果，让你的组件能够在多个上下文环境中管理状态、控制器和其他数据。
总结
在 Custom Elements 中使用依赖注入可以帮助我们更好地管理组件之间的依赖关系，让我们的组件更加可复用。依赖注入在高级应用程序中特别有用，并且有助于保持代码的整洁和可测试性。我们学习了如何在 Custom Elements 中使用依赖注入，并介绍了一些应用场景。在实践中，我们应该根据具体需求灵活选择不同的注入方式，以提高代码的可读性和可维护性。
示例代码
-- -------------------- ---- -------
----- ------------ -
------------- -
-------------- -- ----- -------------
-
-
----- ----------- ------- ----------- -
----------------------- -
--------
--------------- - ---------- -- --- --------------- -- ----------------
----------- - ------------------- ----- ------ ---
--------------------- - ---------- ------------
-
------------------- -
------------------------------
-
-
----- ------------ - --- ---------------
------------------------------------- -------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64617b2d968c7c53b02dce6a