在 Web 开发过程中，我们透过构建自定义元素来改善和扩充网页中的知识。在这些自定义元素中，我们可以使用 class 来实现多态性和框架化编程，以此提高代码的可复用性和可维护性。但是，对于 Custom Elements 中的 class 继承，你是否有过困扰？本文将详细介绍 Custom Elements 中的 class 继承。
什么是 Custom Elements？
Custom Elements 是 Web Components 中的一个重要标准，让我们能够自定义 HTML 标签并在其内部添加自己的功能。使用 Custom Elements，我们可以封装我们的 HTML、CSS 和 JavaScript 代码，提高组件的可复用性和可维护性，同时也使我们的代码更为可读和易于理解。Custom Elements 标准由浏览器原生支持，无需借助任何第三方库或框架就可以进行开发。除此之外，Custom Elements 还能够和其他 Web Components 标准协同使用，如 Shadow DOM 和 HTML Templates 等。
class 继承在 Custom Elements 中的应用
在 Custom Elements 中，我们使用 class 来定义一个新的自定义元素，这个新的元素可以继承自 HTML 标准元素或其他自定义元素。class 继承不仅能够为 Custom Elements 中的元素带来更多的属性和方法，同时还可以在多个 Custom Elements 之间共享代码。一个简单的 class 继承的例子如下：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
------------------------ --------
---------- - ----------- ------------
-
-
--------------------------------------- ---------------在上述代码中，CustomElement 继承自 HTMLElement，当 CustomElement 被实例化时，它将创建一个 Shadow DOM 并将 'Hello, World!' 插入到 Shadow DOM 中。
除此之外，class 继承还可以实现多态性和框架化编程。我们可以为 Custom Elements 定义基类，然后通过继承来创建不同的子类并为子类添加不同的行为。这样可以极大地简化我们的代码，提高代码的可维护性。比如，我们可以定义一个基类 CustomButton，它定义了所有按钮共有的属性和方法。
class CustomButton extends HTMLElement {
onClick() {
console.log('Button clicked.');
}
//...
}然后，我们可以为每个不同的按钮类型创建一个子类，如下所示：
-- -------------------- ---- -------
----- ------------ ------- ------------ -
---------- -
----------------- -------------
-
-----
-
----- ------------ ------- ------------ -
---------- -
------------------- -------------
-
-----
-在上述代码中，我们定义了两个子类，SubmitButton 和 CancelButton，它们都继承自 CustomButton。由于 SubmitButton 和 CancelButton 继承了 CustomButton 中的属性和方法，我们不再需要为每个按钮类型都编写相同的代码，而是可以在基类中写好通用的代码，然后在子类中对其进行特化。这样做的另一个好处在于，我们可以在编写代码的过程中使用基类 CustomButton，并在运行时根据当前按钮的类型动态加载子类 SubmitButton 或 CancelButton，从而实现真正意义上的多态性。
总结
Custom Elements 中的 class 继承是实现代码复用和维护的关键技术之一。通过 class 继承，我们可以极大地简化代码，并使代码更易于理解和维护。在活用 Custom Elements 中的 class 继承时，我们需要遵循一些开发原则，如“单一职责原则”、“里氏替换原则”等。掌握了这些原则，我们将能够更加熟练地使用 class 继承，从而更好地构建和维护我们的自定义元素。
示例
下面是一个完整的示例代码，它演示了如何在 Custom Elements 中使用 class 继承：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ----- -------------------
-------
-------------- -
-------- ------
------- --- ----- -----
-------- -----
------- -----
-
--------
-------
------
---------------------------------
-------------------------------
-------------------------------
--------
----- ------------- ------- ----------- -
------------- -
--------
------------------------ --------
---------- - ----------- -------------
-
-
----- ------------ ------- ----------- -
------------------- -
-------------- - ---------- - -------------------------- - ------------
------------------------------------------------------ -- -- -
---------------
---
-
--------- -
------------------- -----------
-
-
----- ------------ ------- ------------ -
--------- -
------------------- ------ -----------
-
-
----- ------------ ------- ------------ -
--------- -
------------------- ------ -----------
-
-
--------------------------------------- ---------------
-------------------------------------- --------------
-------------------------------------- --------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6460febf968c7c53b028b4fa