前言
在前端开发中，表单联动是一项非常常见的任务。一般情况下，我们可以通过 JavaScript 直接操纵 DOM 元素来实现表单联动。但是，这种做法往往比较繁琐，且可能会导致代码混乱。如果您使用 Custom Elements，就可以轻松地实现表单联动，将代码组织更加清晰和易于维护。
Custom Elements 是什么
Custom Elements 是 Web Components 规范中的一部分。它允许您定义自定义 HTML 元素，并编写与之相关的 JavaScript 代码。
通过 Custom Elements，您可以构建出一个全新的组件系统来扩展 HTML 语言，而不必使用一堆框架和库（如 jQuery）。这样做可以让您的代码更加标准化，更容易复用，也不会造成性能上的低下。
实现表单联动的技巧
下面，我们将介绍如何使用 Custom Elements 实现表单联动。
分离 DOM 元素和逻辑
对于要实现表单联动的组件，我们需要分离 DOM 元素和逻辑。具体来讲，我们需要写两个类：
- DOM 元素类： 该类负责定义 Custom Element 并提供 HTML 和 CSS 样式。这个类通常是轻量级的，只关注如何展示元素。
- 逻辑类： 该类负责处理组件的内部行为和与 DOM 交互。这个类可能会更重一些，但具有更好的可重用性。
下面让我们来看一下示例代码：
-- -------------------- ---- -------
---- ----- ---
--------- ------------ --------------------------
---- --- ---------- ---
----- ------- ------- ----------- -
------------------- -
--------------
-
-------- -
----- ---- - -
----------------------------
------ ----------- -------------------- --
--
----- --- - -
----- -
------- --- ----- -----
-------------- ----
-------- ----
---------- -------
-
--
-------------- - -----
-------------------------------------------------
-------------------------------------------
-
--- --------- -
------ -----------------------------
-
--- ------- -
------ ---------------------------
-
-
--------------------------------- ---------在这个例子中，我们先定义了一个 my-input 元素，然后通过 class MyInput 定义了该元素的行为。其中，render 方法负责生成 HTML 和 CSS 样式，并将它们添加进 Custom Element 中。注意，我们还定义了 binding 和 label 属性以获取 Custom Element 的属性。
使用 CustomEvent 和 dispatchEvent 方法
在 Custom Elements 中，我们可以采用 CustomEvent 和 dispatchEvent 方法来实现事件的触发，从而实现表单联动。
-- -------------------- ---- -------
---- ------ ---
------------ -----------------------------
--------- --------------------------
---- --- ---------- ---
----- ---------- ------- ----------- -
------------------- -
--------------
-
-------- -
----- ---- - -
----------------------------
------- ---------------------
------- ---------------------------
------- ----------------------------
------- -----------------------------
---------
--
----- --- - -
------ -
------- --- ----- -----
-------------- ----
-------- ----
---------- -------
-
--
-------------- - -----
-------------------------------------------------
-------------------------------------------
------------------------------- - -- -
----- ----- - --- ----------------------------- -
------- - ------ ---------- -
---
--------------------------
---
-
--- --------- -
------ -----------------------------
-
--- ------- -
------ -------------------------- -- ---
-
-
----- ------- ------- ----------- -
------------------- -
--------------
--------------------------------------- - -- -
---------- - ---------------
---
-
-------- -
----- ---- - -
----------------------------
------ ----------- -------------------- --
--
----- --- - -
----- -
------- --- ----- -----
-------------- ----
-------- ----
---------- -------
-
--
-------------- - -----
-------------------------------------------------
-------------------------------------------
-
--- --------- -
------ -----------------------------
-
--- ---------- -
----- ----- - ----------------------------
----------- - ----
-
--- ------- -
------ -------------------------- -- ---
-
-
--------------------------------- ---------
------------------------------------ ------------在这个例子中，我们定义了 binding-change 事件，并在下拉列表的 change 事件中触发该事件，这样就可以知道下拉列表的值已经发生了变化。而在文本框中，我们通过 addEventListener 来监听 binding-change 事件，当该事件被触发时，我们可以获取到相关的信息（即下拉列表的值），并将其赋值给文本框组件。
结论
通过上面的示例，我们可以看到 Custom Elements 是一个非常方便、灵活的技术，可以帮助我们更好地组织和复用代码，同时能够实现复杂的表单联动等功能。只要你熟悉了 Custom Elements 的基础知识，你就可以更好地使用它来快速构建出好的 Web 组件系统。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671f32862e7021665efc4706