Custom Elements 实践：如何使用 JavaScript 实现标签列表组件
随着 web 应用复杂性的提升，前端组件化开发的重要性越来越凸显。Custom Elements 是一项在 Web 标准中的新技术，它允许开发者自定义 HTML 元素，将其转化为可复用的 UI 组件，从而提高开发效率和组件复用性。本文将介绍如何使用 Custom Elements 技术实现一个标签列表组件。
一、什么是 Custom Elements？
Custom Elements 是 Web Components API 的一部分，可以让开发者定义自己的 HTML 元素，通过 JavaScript 来控制元素的行为和样式。在 Custom Elements 规范中，元素被称为 "custom element"，定义一个 custom element 的方式非常简单，只需要继承 HTMLElement 类并实现相应方法即可。
Custom Elements API 提供了多个方法和事件，包括：
constructor: 构造函数，在元素实例化时被调用，用来初始化元素。
connectedCallback: 连接回调函数，在元素被添加到文档树时被调用。
disconnectedCallback: 断开回调函数，在元素从文档树中移除时被调用。
attributeChangedCallback: 属性变化回调函数，在元素的属性变化时被调用。
observedAttributes: 观察属性，用来指定需要观察的属性。
二、实现标签列表组件
下面我们将通过一个实例来演示如何使用 Custom Elements 技术实现一个标签列表组件。
目标：实现一个标签列表组件，支持添加、删除标签，以及点击标签实现选中效果。
- 创建 HTML 标签
首先我们需要创建一个 HTML 标签来作为组件的容器，并在容器中添加一些标签。这里我们使用 div 元素作为容器，并在其中添加一些 span 元素来表示标签。
<div class="tag-list"> <span class="tag">JavaScript</span> <span class="tag">CSS</span> <span class="tag">HTML</span> </div>
注意：在创建自定义元素时，我们需保证自定义元素的名称中含有横杠，例如 tag-list 等。
- 创建 Custom Element
接下来我们可以使用 JavaScript 代码来创建 Custom Element，实现组件功能。首先需要定义一个类，并继承自 HTMLElement。
-- -------------------- ---- -------
----- ------- ------- ----------- -
------------- -
--------
-
------------------- -
-- -----------
-
---------------------- -
-- ------------
-
------------------------------ --------- --------- -
-- ---------
-
------ --- -------------------- -
------ ---------
-
-在上面的代码中，继承自 HTMLElement 的类 TagList 代表了我们定义的自定义元素的类，然后重写了 constructor、connectedCallback、disconnectedCallback、attributeChangedCallback 和 static get observedAttributes 方法。其中，constructor 方法用来初始化组件对象，connectedCallback 方法在组件被添加到文档树时执行，并在此后通过 this.appendChild 方法将组件的 HTML 模板添加到组件的根元素中。attributeChangedCallback 方法在观察的属性发生变化时被调用，我们可以在此方法中处理属性变化的逻辑。最后一个 static get observedAttributes 方法用于指定需要观察的属性列表。
- 定义组件的 HTML 模板
接下来我们需要在 connectedCallback 方法中定义组件的 HTML 模板，并将其添加到组件的根元素中。
-- -------------------- ---- -------
------------------- -
----- -------- - -
-------
---- -
-------- -------------
------- ----
-------- ----
------- --- ----- -----
------- --------
-
--------- -
------ ----
------------- ----
-
--------
---- -----------------------
--
-------------- - ---------
---------------
-在上面的代码中，我们将标签列表组件的 HTML 模板定义成了一个字符串，并在此模板中定义了组件的样式。然后通过 this.innerHTML 方法将模板添加到组件的根元素中，并将 this._render 方法调用该方法用于渲染标签列表。
- 实现标签列表的渲染和点击效果
最后，我们需要在 TagList 类中实现标签列表的渲染和点击效果。我们可以通过定义一个 _render 方法来实现标签列表的渲染逻辑，并调用该方法实现组件的初始化渲染。代码如下：
-- -------------------- ---- -------
--------- -
----- ------- - --------------------------------
----- ---- - --------------------------
----------------------------- -- -
----- ----- - -------------------------------
--------------- - ----
---------------------------
------------------------------- -- -- -
-----------------------------------
---
---------------------------
---
-在上面的代码中，我们首先通过 querySelector 方法获取到组件的根数组 tagList 对象，然后获取到组件的 tags 属性，并通过 split 将其转化为数组。接着我们遍历数组，对于每一个标签，我们创建一个 span 元素，并设置标签的文本和样式，然后为标签添加点击事件监听器，在点击时切换样式。最后我们将标签添加到 tagList 上即可实现标签列表的渲染。
完整代码如下：
-- -------------------- ---- -------
----- ------- ------- ----------- -
------------- -
--------
-
------------------- -
----- -------- - -
-------
---- -
-------- -------------
------- ----
-------- ----
------- --- ----- -----
------- --------
-
--------- -
------ ----
------------- ----
-
--------
---- -----------------------
--
-------------- - ---------
---------------
-
---------------------- -
-
------------------------------ --------- --------- -
-- ----- --- ------- -
-----------------------
-
-
------ --- -------------------- -
------ ---------
-
--------- -
----- ------- - --------------------------------
----- ---- - --------------------------
-- ------ -
----------------- - ---
----------------------------- -- -
----- ----- - -------------------------------
--------------- - ----
---------------------------
------------------------------- -- -- -
-----------------------------------
---
---------------------------
---
-
-
-
--------------------------------- ---------三、使用标签列表组件
要想在页面中使用刚刚实现的标签列表组件，我们只需要在 HTML 页面中引用该组件，并声明其标签名称即可。
-- -------------------- ---- -------
--------- -----
------
------
---------- ---- -----------------
-------
------
--------- --------------------------------------
------- ---------------------------
-------
-------在上面的代码中，我们在 body 标签中添加了一个自定义元素 tag-list，并为其设置了 tags 属性。最后通过 script 标签引入 tag-list.js 文件，从而完成了标签列表组件的引用和使用。
四、总结
通过以上实例，我们可以看到，Custom Elements 是一个非常有用的 Web 组件化技术，它让我们可以轻松地实现自定义 HTML 元素，并将其封装成为可复用的 UI 组件。在实际开发中，我们可以使用 Custom Elements 来扩展 HTML 元素的功能，实现更加复杂的 UI 组件，从而提高代码的复用性和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517fc6995b1f8cacd020493