在 Web 开发中，表格是一个重要的数据展示方式。但是，通常情况下我们需要自己手写一些表格组件，用来满足项目需求的特殊需求。而这个过程可能比较繁琐且重复。在使用 Custom Elements 的情况下，可以快速构建出自定义的、可编辑的表格组件。
Custom Elements 简介
Custom Elements 是 W3C Web 组件标准的一部分，它允许开发者创建自定义的 HTML 元素。这些元素可以拥有自己的属性和方法，从而可以更灵活地控制元素的行为和样式。这个标准大力推荐使用 ES6 的 class 语法来定义元素类。如果你不熟悉 ES6 的 class，强烈建议你先去学习一下。
通过继承 HTMLElement 创建自定义元素
要使用 Custom Elements 插件来创建自定义元素，需要继承 HTMLElement 类并实现一些必要的方法。
这里，我们新建一个 DataGrid 类，继承自 HTMLElement。同时，我们需要在类的构造函数中调用 super 方法以创建继承自 HTMLElement 类的实例。
class DataGrid extends HTMLElement {
constructor() {
super();
}
}此时，我们就成功的创建了一个自定义元素。
添加生命周期回调函数
除了继承自 HTMLElement 类外，我们还需要实现一些生命周期回调函数。
Custom Elements 标准规定，一个自定义元素的生命周期包括四个阶段：
- connectedCallback：当自定义元素第一次被插入到文档 DOM 时，被调用。
- disconnectedCallback：当自定义元素从文档 DOM 中删除时，被调用。
- attributeChangedCallback：当自定义元素中的属性被增加、删除或修改时，被调用。
- adoptedCallback：当自定义元素被移动到新文档时，被调用。
通常情况下，我们至少需要实现 connectedCallback 和 attributeChangedCallback 方法。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
-
------------------- -
--------------
-
-------------------------- -
--------------
-
-------- -
-- ------
-
-在上述代码中，我们实现了 connectedCallback 和 attributeChangedCallback 方法，并调用了 render 方法。这个方法会在组件生命周期内，根据组件的状态来渲染组件内容。
自定义元素的属性和方法
Custom Elements 的另一个重要功能，是它允许我们定义自己的属性和方法。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
---------- - ---
-
------------------- -
--------------
-
-------------------------- -
--------------
-
--- ----------- -
---------- - ------
-
--- ------ -
------ -----------
-
-------- -
-- ------
-
-在上述代码中，我们定义了一个 data 属性。通过 set 和 get 方法，我们可以更好的控制这个属性。同时，我们还可以在 render 方法中，通过调用 data 来获取 data 属性的值。
接下来，我们需要实现表格的渲染逻辑。
表格的渲染逻辑
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
---------- - ---
-
------------------- -
--------------
-
-------------------------- -
--------------
-
--- ----------- -
---------- - ------
-
--- ------ -
------ -----------
-
-------- -
----- ------ - ---------------------------
----- ----- - --------------------------------
----- ----- - --------------------------------
----- ----- - --------------------------------
----- --------- - -----------------------------
----------------------- -- -
----- -- - -----------------------------
------------ - -------
--------------------------
---
-----------------------------
-------------------------
------------------------- -- -
----- --- - -----------------------------
----------------------- -- -
----- -- - -----------------------------
------------ - -------------
--------------------
---
-----------------------
---
-------------------------
----- ------------- - ----------------------------
-- --------------- -
--------------------------------
-
------------------------
-
-在上述代码中，我们实现了一个简单的表格渲染逻辑。渲染逻辑中，我们将表头作为第一行插入到表格中，然后通过遍历数据中的每一项数据，将数据渲染到表格行中。
同时，我们在渲染的最后做了一个特殊的处理。如果在组件中，表格已经被渲染过了，我们先移除已有的表格，再添加新的表格内容。
实现表格内容的编辑
在前面的代码中，我们通过对 data 属性的设置，来达到表格内容的修改。但是，在一些情况下，我们还需要实现更复杂的编辑功能。
可以通过一些开源的表格编辑库来实现表格的高级编辑功能，例如 handsontable。这个库在使用上比较麻烦，需要花费一些时间来学习和调试。
在这里，我们使用一种简单的表格修改方式。其实现方式如下：
首先，在 table 渲染完成后，我们需要为每个表格单元格添加可编辑的 input 元素，使用 input 元素来接受用户的输入。
然后，我们为 input 元素绑定一个 onblur 事件处理函数，当 input 失去焦点时，我们将 input 中的值赋值给 _data 数组中的对应项，并重新渲染表格。
最后，需要在 input 元素的 onkeydown 事件中，处理回车按键。这个功能很重要，因为我们希望用户能够使用键盘快捷键，快速修改表格内容。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
---------- - ---
-
------------------- -
--------------
-
-------------------------- -
--------------
-
--- ----------- -
---------- - ------
-
--- ------ -
------ -----------
-
---------------------- --------- ----------- -
----- ----- - --------------------------------
----------- - ------
------------------------------ ------- -- -
----- ----- - -------------------
-------------------------------- - ------
--------------
---
--------------------------------- ------- -- -
-- ---------- --- -------- -
--------------------
-
---
------ ------
-
-------- -
----- ------ - ---------------------------
----- ----- - --------------------------------
----- ----- - --------------------------------
----- ----- - --------------------------------
----- --------- - -----------------------------
----------------------- -- -
----- -- - -----------------------------
------------ - -------
--------------------------
---
-----------------------------
-------------------------
------------------------- ------ -- -
----- --- - -----------------------------
----------------------- -- -
----- -- - -----------------------------
----- ----- - ---------------------------------- ------ --------
----------------------
--------------------
---
-----------------------
---
-------------------------
----- ------------- - ----------------------------
-- --------------- -
--------------------------------
-
------------------------
-
-将元素注册到自定义标签
最后一步，我们需要将自定义元素注册到自定义标签中，这样才可以在 HTML 中使用这个元素。
通过使用以下代码，我们可以实现自定义元素的注册：
customElements.define("data-grid", DataGrid);这行代码告诉浏览器，我们希望使用 data-grid 这个标签来表示 DataGrid 类的实例。
示例代码
完整的代码如下：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
---------- - ---
-
------------------- -
--------------
-
-------------------------- -
--------------
-
--- ----------- -
---------- - ------
-
--- ------ -
------ -----------
-
---------------------- --------- ----------- -
----- ----- - --------------------------------
----------- - ------
------------------------------ ------- -- -
----- ----- - -------------------
-------------------------------- - ------
--------------
---
--------------------------------- ------- -- -
-- ---------- --- -------- -
--------------------
-
---
------ ------
-
-------- -
----- ------ - ---------------------------
----- ----- - --------------------------------
----- ----- - --------------------------------
----- ----- - --------------------------------
----- --------- - -----------------------------
----------------------- -- -
----- -- - -----------------------------
------------ - -------
--------------------------
---
-----------------------------
-------------------------
------------------------- ------ -- -
----- --- - -----------------------------
----------------------- -- -
----- -- - -----------------------------
----- ----- - ---------------------------------- ------ --------
----------------------
--------------------
---
-----------------------
---
-------------------------
----- ------------- - ----------------------------
-- --------------- -
--------------------------------
-
------------------------
-
-
---------------------------------- ----------结论
通过使用 Custom Elements，我们可以快速地创建出一些自定义的、可编辑的表格组件。虽然这个组件的功能非常基础，但是它可以作为其他组件的基础，快速地构建出更高级的组件。同时，它也可以作为学习 Custom Elements 标准的入门实例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6711f8c0ad1e889fe201eb09