Custom Elements 是一个 Web 组件标准，可以让开发者创建自定义 HTML 标签，带有自己的样式和行为。在这个标准中，开发者可以使用许多现代的 Web 开发技术，如 Shadow DOM、HTML Templates、CSS Variables 等等，但是在这些革新的技术之上，我们还需要一种方法来管理 Custom Elements 的状态。
本文将介绍如何在 Custom Elements 中进行状态管理，同时通过一些实例来展示具体的实现方法。
关于状态管理
什么是状态？在一个应用中，状态代表了应用的数据和用户界面的状态。状态可能包含一些复杂的数据结构和业务逻辑，因此，我们需要一种方法来管理这个状态，并且在整个应用中共享这个状态。
在通常的 Web 开发中，我们可以使用不同的状态管理方案，如 Flux、Redux、Mobx 等等。这些状态管理方案虽然不同，但是都具有以下通用的特点：
- 单一的状态树：整个应用的状态被组织成一个单一的数据源。
- 状态只读：状态只能通过操作来改变，而不能直接修改。
- 纯函数更新：修改状态的函数必须是纯函数，即输入相同的参数，总是返回相同的结果。
在 Custom Elements 中，我们也可以使用类似的状态管理方案，只需要遵循相同的规则。
在 Custom Elements 中进行状态管理，我们需要做以下两个步骤：
- 定义状态：在 Custom Element 类（或原型）中定义状态。
- 更新状态：通过方法或事件来更新状态。
下面我们来看下如何实现。
定义状态
在 Custom Element 中，我们可以使用以下两种方式来定义状态：
- 使用类属性来定义：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ ----------
-
------------- -
--------
----------- - --
-
--- ------- -
------ ------------
-
--- ------------ -
----------- - ------
--------------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
----------- - ---------
--------------
-
-
-------- -
-------------- - ------------ -- ----
-
-
----------------------------------- -----------在上面的代码中，我们定义了 count 这个状态，并使用 attributeChangedCallback 来监听状态变化，以便在状态变化时更新界面。每次更新状态时，会触发 update 这个私有方法，更新界面。
- 使用 WeakMap 来定义：
-- -------------------- ---- -------
----- -------- - --- ----------
----- --------- ------- ----------- -
------------- -
--------
------------------ -
------ --
-- ----
---
-
--- ------------ -
----- ----- - -------------------
----------- - ------
--------------
-
--- ------- -
----- ----- - -------------------
------ ------------
-
-------- -
-------------- - ----------- -- ----
-
-
----------------------------------- -----------在这个例子中，我们使用 WeakMap 存储 Custom Element 的状态信息，并使用 set 和 get 方法来修改和访问状态。
两种方式都可以用来管理 Custom Element 的状态，开发者可以根据实际情况进行选择。
更新状态
在 Custom Element 中，我们可以使用方法或者事件来更新状态。
方法
在 Custom Element 中，我们可以定义类方法来更新状态。例如，我们可以定义 increment 方法来增加状态：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------- - --
-
----------- -
-------------
--------------
-
-------- -
-------------- - ----------- -- ----
-
-
----------------------------------- -----------这样，我们就可以在外部使用 increment 方法来增加 Custom Element 的状态：
<my-element id="counter"></my-element>
<script>
const counter = document.querySelector('#counter');
counter.increment();
</script>事件
我们也可以通过事件来更新 Custom Element 的状态，例如，我们可以定义 increment 事件来增加状态：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------------------ -------------------------
---------- - --
-
--------- -
-------------
--------------
---------------------- --------------------
-
-------- -
-------------- - ----------- -- ----
-
-
----------------------------------- -----------这样，我们就可以在外部使用 addEventListener 方法来监听 Custom Element 的 increment 事件，并在事件回调中修改 Custom Element 的状态：
<my-element id="counter"></my-element>
<script>
const counter = document.querySelector('#counter');
counter.addEventListener('increment', () => {
counter.innerText = counter.count;
});
</script>总结
在本文中，我们介绍了如何在 Custom Elements 中进行状态管理，从定义状态到更新状态。状态管理是应用开发中的重要话题，它可以帮助开发者轻松地管理应用的数据和用户界面状态，让开发更加容易。
虽然在 Custom Elements 中进行状态管理可能需要一些额外的代码，但是通过遵循一些简单的规则，我们可以使用一些现代的 Web 技术来构建更加优雅和可维护的 Custom Elements。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654280cb7d4982a6ebc2e9ef