在 Web 前端开发中，功能与 UI 的分离是一个非常重要的话题，因为它可以让我们更好地维护和管理我们的代码。而 Custom Elements 就是一个非常好的解决方案，它允许我们创建自定义的 HTML 元素，并且可以将它们与我们的 JavaScript 代码分离开来。在本文中，我们将学习如何使用 Custom Elements，以及如何更好地将功能与 UI 分离。
什么是 Custom Elements？
Custom Elements 是一个 Web 标准，它允许开发者创建自定义的 HTML 元素，并且可以通过 JavaScript 代码来控制它们的行为和样式。Custom Elements 通过两个 API 进行管理：CustomElementRegistry 和 HTMLElement。
CustomElementRegistry API 允许我们注册和管理自定义元素：
window.customElements.define('my-custom-element', MyCustomElement);HTMLElement API 定义了自定义元素的行为和样式：
class MyCustomElement extends HTMLElement {
// ...
}如何使用 Custom Elements？
使用 Custom Elements 需要重写 HTMLElement API 的一些方法，以便定义自定义元素的行为和样式。下面是一个简单的例子，展示了如何创建一个自定义元素，并且在其中添加一些基本行为：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
---------------- - ------------------- ----- ------ ---
-------------------------- - -
-------
----- -
-------- ------
-
--------
------------ -------------
--
-
------------------- -
---------------------------- ------------
-
---------------------- -
---------------------------- ---------------
-
------------------------------ --------- --------- -
---------------------------- --------- ------- ------- ---- ----------- -- --------------
-
-
------------------------------------------------- -----------------在上面的例子中，我们定义了一个名为 my-custom-element 的自定义元素，并且重写了 HTMLElement API 中的 constructor、connectedCallback、disconnectedCallback 和 attributeChangedCallback 方法。在 constructor 方法中，我们创建了一个 Shadow DOM，并且对它进行了一些样式的定义。在 connectedCallback 方法中，我们输出了一段信息，表示元素被连接到文档中。在 disconnectedCallback 方法中，我们输出了一段信息，表示元素被从文档中移除。在 attributeChangedCallback 方法中，我们输出了一段信息，表示元素的属性发生了变化。
如何将功能与 UI 分离？
当我们开始使用 Custom Elements 编写代码时，我们往往会面临一个将功能与 UI 分离的问题。例如，在上面的例子中，我们将样式的定义和功能的定义都放到了 MyCustomElement 类中，这会让我们的代码变得非常混乱。所以，我们需要将这两个部分分开来。
下面是一个改进版的 MyCustomElement 类，它将样式和功能分开来：
-- -------------------- ---- -------
------ --------------------------
----- --------------- ------- ----------- -
------------- -
--------
---------------- - ------------------- ----- ------ ---
-------------------------- - -
----- ----------------------------------------- -------------
--
------------- - --------------------------------------------------------------
-
------------------- -
---------------------------- ------------
--------------------
-
---------------------- -
---------------------------- ---------------
-
------------------------------ --------- --------- -
---------------------------- --------- ------- ------- ---- ----------- -- --------------
-- ----- --- -------- -
--------------------
-
-
--- ------- -
------ -------------------------- -- --------
-
--- ------------ -
-------------------------- -------
-
-------------- -
-- ----------- --- ------- -
----------------------------------------------------------------
- ---- -
-------------------------------------------------------------------
-
-
-
------------------------------------------------- -----------------在上面的例子中，我们将样式的定义放到了 my-custom-element.css 文件中，而将对样式的操作放在了 _updateStyle 方法中。在 connectedCallback 方法中，我们调用了 _updateStyle 方法，以便在元素被连接到文档中时更新样式。在 attributeChangedCallback 方法中，我们检查了属性名是否为 theme，以便在主题变化时更新样式。在 get theme 和 set theme 方法中，我们使用了 getAttribute 和 setAttribute 方法，以便统一管理元素的属性。
总结
Custom Elements 是一个非常有用的 Web 标准，它可以让我们更好地维护和管理我们的代码。在本文中，我们学习了如何使用 Custom Elements，以及如何更好地将功能与 UI 分离。通过这些技巧，我们可以编写出更加优美和易于维护的前端代码。
示例代码：https://codepen.io/pen/?template=ExXVrGp
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64942d3e48841e98941b1eb7