在前端开发中，我们经常需要开发各种组件，如按钮、表格、弹窗等，以及组件之间的相互嵌套和交互。使用传统的开发方式，组件之间的耦合度往往很高，难以复用和维护。而 Custom Elements 正是解决这个问题的利器。
什么是 Custom Elements
Custom Elements 是 Web Components 技术的一部分，它允许我们在浏览器中创建自定义的 HTML 元素，并可以通过 JavaScript 实现这些元素的行为。使用 Custom Elements 可以有效地实现解耦，将组件的 HTML、CSS 和 JavaScript 集成在一个自定义元素中，使得各个组件之间独立开发、维护和测试。
如何使用 Custom Elements
使用 Custom Elements 需要了解两个东西——customElements 和 HTMLElement。
- customElements.register(tagName, class);
这个方法用于注册一个自定义元素，接收两个参数：tagName 表示元素标签名，class 表示元素的实现类。例如：
class MyButton extends HTMLElement { // ... } customElements.define('my-button', MyButton);
- HTMLElement 的生命周期
当我们创建一个自定义元素时，浏览器会自动调用 HTMLElement 的各个生命周期函数。其中较为常用的有以下几个：
- connectedCallback()：元素被添加到文档树时调用。
- disconnectedCallback()：元素从文档树中移除时调用。
- attributeChangedCallback()：元素的某个属性值被修改时调用。
- adoptedCallback()：元素被移动到新的 document 时调用。
解耦的实现方法
使用 Custom Elements 可以将组件的 HTML、CSS、JavaScript 集成在一个自定义元素中，使得各个组件之间独立开发、维护和测试。以下是一些解耦的实现方法：
- 通过属性传递数据
在定义组件时，我们可以为组件添加属性（例如：message），然后在组件实现类中通过 this.getAttribute('message') 获取属性值，从而实现在组件外部传递数据的目的。例如：
-- -------------------- ---- ------- ----- -------- ------- ----------- - ------------- - -------- ----- ------- - ----------------------------- ----- ------ - ------------------------ --------- ---------------- - - --------------------------- -- - - ---------------------------------- ----------展开代码
然后在 HTML 中使用 <my-button></my-button> 即可创建一个带有文本内容为 "Click me!" 的按钮。
- 通过插槽实现组件的嵌套
自定义元素可以包含插槽（slot），通过插槽可以在元素内部嵌套其他元素。例如：
-- -------------------- ---- ------- ----- -------- ------- ----------- - ------------- - -------- ----- ------ - ------------------------ --------- ---------------- - - ---- --------------- ------------- ------ -- - - ---------------------------------- ----------展开代码
然后在 HTML 中使用 <my-dialog>Some text</my-dialog> 即可创建一个带有文本内容为 "Some text" 的 Dialog 组件。
- 通过事件实现组件之间的通信
使用事件可以实现不同自定义元素之间的解耦和通信。例如：
<my-button id="btn">Click me!</my-button> <my-dialog id="dialog"></my-dialog>
const btn = document.getElementById('btn'); const dialog = document.getElementById('dialog'); btn.addEventListener('click', () => { dialog.dispatchEvent(new CustomEvent('open')); }); dialog.addEventListener('open', () => { console.log('Dialog opened!'); });
点击按钮时，会触发自定义事件 open，从而打开 Dialog 组件。
示例代码
以下是一个完整的 Custom Elements 示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- -------- ------------ ------- ------ ---------- -------------- ----------------- ----------------------- -------- ----- -------- ------- ----------- - ------------- - -------- ----- ------- - ----------------------------- ----- ------ - ------------------------ --------- ---------------- - - --------------------------- -- -------------------------------------------------------- -- -- - ---------------------- ---------------------- --- - - ---------------------------------- ---------- ----- -------- ------- ----------- - ------------- - -------- ----- ------ - ------------------------ --------- ---------------- - - ---- --------------- -------------- ------------- ---------------------- ------ -- -------------------------------------------------------- -- -- - ---------------------- ---------------------- --- - - ---------------------------------- ---------- ----- --- - ------------------------------------ ----- ------ - ------------------------------------ ----------------------------- -- -- - -------------------- - -------- --- -------------------------------- -- -- - -------------------- - ------- --- --------- ------- -------展开代码
该示例代码演示了使用 Custom Elements 实现了一个按钮和一个弹窗组件，并实现了按钮点击时弹窗的打开与关闭。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b981e7306f20b3a67ed50f
