在 Web 前端开发中，很多时候会遇到组件化的需求。而 Custom Elements 就是一种实现组件化的方式，它可以让我们通过自定义 HTML 元素来实现代码重用，提高代码的复用性和可维护性。本文将详细讲解如何通过 Custom Elements 实现代码重用。
什么是 Custom Elements？
Custom Elements 是 Web Components 标准的一部分，它允许我们自定义 HTML 元素，并通过 JavaScript 对其行为进行增强。简单来说，就是可以让我们自己定义一些自定义标签，然后自定义标签在页面中就像原生 HTML 标签一样使用。
如何创建 Custom Elements？
下面是一个简单的例子，展示如何通过 Custom Elements 创建一个自定义标签：
class MyElement extends HTMLElement {
constructor() {
super();
console.log('自定义元素被创建了');
}
}
customElements.define('my-element', MyElement);我们创建了一个名为 MyElement 的 JavaScript 类，并继承了 HTMLElement，这样就可以创建一个自定义元素了。然后我们通过 customElements.define() 方法来注册这个自定义元素，第一个参数是我们想要注册的标签名，第二个参数是自定义元素的类名。
现在，我们就可以在 HTML 页面中使用这个自定义元素了：
<my-element></my-element>
当页面加载完成后，浏览器会自动创建一个 MyElement 实例，并执行其中的 constructor() 方法，控制台会输出 "自定义元素被创建了"。
如何增强 Custom Elements 的行为？
我们除了可以自定义 HTML 标签外，Custom Elements 还允许我们为这些标签增加一些行为，如添加事件监听器、增加属性等。
将上面的示例改造一下，让这个自定义元素点击时输出一段文本：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-------------------------
------------------------------ -- -- -
--------------------------
---
-
-
----------------------------------- -----------这里我们通过 addEventListener() 方法在自定义元素上添加一个 click 事件监听器，当用户点击自定义元素时，就会在控制台输出 "你点击了自定义元素！"。
同样的，我们还可以增加一些自定义属性，使得我们可以在 HTML 中为这个自定义元素传递一些参数：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-------------------------
------------------------------ -- -- -
--------------------------
---
-
------ --- -------------------- -
------ ---------
-
------------------------------ --------- --------- -
--------------- ------- - ----------- -- --------------
-
-
----------------------------------- -----------在这里我们增加了 observedAttributes 和 attributeChangedCallback() 两个方法，用来监听自定义元素属性的变化，当我们在 HTML 中为自定义元素添加或修改 name 属性时，就会在控制台输出 "属性 name 由 oldValue 变为 newValue"。
<my-element name="Peter"></my-element>
这里我们在自定义元素上设置了一个 name 属性，并将其值设为 "Peter"。
我们可以将自己定义的 Custom Elements 封装成可以复用的组件，方便代码的管理和维护。下面是一个简单的动态时钟组件实现：
-- -------------------- ---- -------
----- ----- ------- ----------- -
------------- -
--------
---------------- - -----
------------------------
-------------------
-
------------------ -
----- ---------- - ------------------- ----- ------ ---
----- ----- - --------------------------------
----------------- - -
------ -
-------- ------
---------- -----
------------ --
------------ -----
----------- -------
-
--
----- ------- - ------------------------------
----------------- - --------
------------------------------
--------------------------------
------------- - --------
-
------------- -
---------------- - -------------- -- -
----- --- - --- -------
----- ----- - ------------------------------------- -----
----- ------- - --------------------------------------- -----
----- ------- - --------------------------------------- -----
------------------------- - ---------------------------------
-- ------
-
---------------------- -
--------------------------------
-
-
-------------------------------- -------在这里，我们创建了一个名为 Clock 的自定义元素，并通过 _createShadowDom() 方法在自定义元素中添加了一些样式和 HTML 内容，然后通过 _startClock() 方法使用 setInterval() 实现了一个简单的时钟效果。
现在，我们可以将这个自定义元素封装成一个独立的组件，并在需要的页面上使用：
-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
------
-------------------
-------
-------这样，我们就可以在任何需要时使用这个简单的动态时钟组件了。
总结
Custom Elements 是 Web Components 标准中的一部分，它可以让我们自定义 HTML 元素，并为这些元素添加一些自定义行为，从而实现对 Web 应用程序的模块化和复用。对于 Web 前端开发者来说，Custom Elements 提供了一种简单而有效的方式来重用代码，提高代码的复用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64572778968c7c53b09f8a87