在前端开发中，我们常常会用到自定义组件，而 Custom Elements 就是实现自定义组件的一种方式。Custom Elements 提供了一个标准的 API，可以让开发者通过 JavaScript 原生的方式创建自定义组件。
在实现自定义组件时，有时候我们需要依赖一些其他的组件或者服务，比如向组件内部注入一个数据服务，或者向组件内部传入其他组件的引用。那么在 Custom Elements 中，如何实现依赖注入呢？接下来的文章将给出一个详细的解答。
Custom Elements 介绍
Custom Elements 是 Web 标准的一部分，旨在让开发者们能够更加方便地实现 Web 组件化。Custom Elements 的 API 由两部分组成，分别是 customElements.define() 和 CustomElementRegistry。
使用 customElements.define() 方法可以定义一个自定义元素，并且在其中定义该元素的行为（如生命周期回调函数、属性定义、方法等）。
CustomElementRegistry 则是用于查询、注册、升级和删除自定义元素的全局注册表。可以通过如下方式获取一个 CustomElementRegistry 对象：
const registry = window.customElements;
依赖注入
依赖注入是一种设计模式，它可以使得一个模块（或者组件）的依赖关系由外部来管理和控制。在依赖注入模式下，一个对象不再负责管理其依赖的实例，而是把依赖的实例交由外界来创建和传入。它可以降低模块的耦合度，使得各个组件可以更加独立、可插拔、可维护。
在 Custom Elements 中，依赖注入的实现大致分为两种情况，分别是：
- 组件内部注入依赖（也就是组件内部定义依赖的实例）
在此情况下，我们可以考虑将依赖实例定义为一个静态属性或者是一个 getter 方法：
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ------ --- -------------------- - ------ ------------ - ------ --- ----------- - -- ------------------ - --------------- - --- ------------ - ------ ---------------- - ------------- - -------- ------------------- ----- ------ --- ------------------------- - - ----------- ------------ -- - ---------------------------------- ------- ------- - -- -- --------- - -展开代码
在上面的例子中，我们通过定义一个静态 getter 方法 myService 来实现依赖注入。如果依赖实例还没有创建，则在第一次调用该静态方法时创建该实例。如果依赖实例已经存在，则直接返回该实例。
- 外部传入依赖的引用（也就是组件内部不定义依赖的实例）
在此情况下，我们可以将需要传入组件的依赖实例作为组件构造函数的参数传入：
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ------ --- -------------------- - ------ ------------ - ---------------------- - -------- -------------- - ---------- ------------------- ----- ------ --- ------------------------- - - ----------- ------------ -- - ---------------------------------- ------- ------- - -- -- --------- - -展开代码
在上面的例子中，我们将需要传入组件的依赖实例作为组件构造函数的参数传入，并将其存储在组件实例的一个属性中，以供后续使用。
示例代码
在下面的示例代码中，我们将实现一个简单的自定义组件 my-app，通过该组件来演示依赖注入的实现。
-- -------------------- ---- ------- -- --------- ----- ----------- - --------- - ------ --- ----------------- -- - ------------- -- - --------------- -------- -- ------ --- - - -- ------- ----- ----- ----- ------- ----------- - ------ --- -------------------- - ------ ------------ - -- ----------------- ------ --- ----------- - -- ------------------ - --------------- - --- -------------- - ------ ---------------- - ------------- - -------- ------------------- ----- ------ --- ------------------------- - - ----------- ------------ ---- ------------------- -- - ----- ------------------- - -- --------------- ----- --------- - --- -------------- ----- ---- - ----- -------------------- --------------------------------------------------- - ----- - ---------------------------------- ------- ------- - -- --------- --- ---------- - -- -- --------- - - -- --- ---- - -- ------- ----- -------------------------------------- -------展开代码
在上面的示例代码中，我们演示了两种实现依赖注入的方式，分别是：
- 组件内部注入依赖的实例，采用静态 getter 方法的方式；
- 外部传入依赖的实例，采用组件构造函数参数的方式。
在实际开发中，我们可以根据具体的实现场景来选择合适的方式来实现依赖注入，从而让组件更加灵活、可扩展和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca8769e46428fe9e2c8601
