简介
Web 应用程序的界面构建是其中一个最基本的部分。而传统 Web 开发只有 HTML、CSS 和 JavaScript，无法做到更高级别的抽象，使得组件化复用成为一件非常困难的事情。而随着 Web Components 规范被提出，我们可以使用 Custom Elements 来实现真正的组件化复用，将页面结构、样式和行为从代码中解耦出来，形成一份通用的组件资源，再把这些组件拼接起来构成我们的 Web 页面。
Custom Elements 是 Web Components 的一部分，它提供了使用自定义元素扩展 HTML 的能力。我们可以使用它来创建一个自己的 HTML 元素，其中既包含了功能的 JavaScript 代码，也包含了样式和模板。
本文将深入探讨如何使用 Custom Elements，在 Web 应用程序中实现更高级别的抽象。
自定义元素的基础
在使用 Custom Elements 前，我们需要对它提供的基础 API 有一些了解。
customElements.define()
使用自定义元素我们需要先定义它，这可以通过调用 customElements.define() 方法来实现。
customElements.define('my-element', MyElementClass)第一个参数是自定义元素的名称，必须由连字符分隔的 minuscule 命名。
第二个参数是具体对应的实现类。实现类必须继承自 HTMLElement 或其子类，以便自定义元素的正确呈现和行为。
constructor() 方法
定义后，就可以使用自定义元素了。当一个该自定义元素第一次出现在文档中的时候，constructor() 方法将被调用。这时我们可以在此做一些初始化的工作，比如初始化一些属性值和监听事件。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- ------
--------- - ------- ----------
-- ----
------------ - ----------------------------
-
------------- -
------------------ ---- -----------
-
-如果希望在定义时指定属性，可以使用 connectedCallback() 方法。
connectedCallback() 方法
connectedCallback() 方法被调用时，custom element 已经被加入到了文档的 DOM 中，正式对外可见了。那么我们可以在这里实现一些挂载到元素上的行为，比如渲染模板、事件监听等。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-
------------------- -
----- -------- - -----------------------------------
------------------ - -
--------- ---------------------------------
--
--------------------------------------------------------------
-
-disconnectedCallback() 方法
disconnectedCallback() 方法在 custom element 从文档移除时被调用。此处我们可以做一些善后工作，比如清理定时器和取消监听器等。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
--------------- - -------------- -- -
-- ---
-- ------
-
---------------------- -
-------------------------------
-
-observedAttributes() 方法
observedAttributes() 方法用于观察 custom element 上的属性变化，并在属性变化时执行某些操作。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
------------------------------ --------- --------- -
-------------------- --- ------- ---- ----------- -- --------------
-
-在调用 observedAttributes() 方法时，需要使用 static 修饰符，表示该方法是静态方法。返回一个属性名称数组，用于通知浏览器哪些属性应该被观察和监听变化。
attributeChangedCallback() 方法
当被观察指定的属性值发生变化时，attributeChangedCallback() 方法将被调用。
自定义元素的应用
Custom Elements 最常见的应用场景就是实现复杂多层级的组件。我们将编写一个 example-counter 组件来演示 Custom Elements 的应用。
示例代码
-- -------------------- ---- -------
----- -------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-- ------
---------- - --
-- ----
----- -------- - -----------------------------------
------------------ - -
---- -------------
----------- ----- --- ----- ------------------------------------
------- ------------- ---------------------------
------- ------------- -------------------------------
------
--
--------------------------------------------------------------
-- ----
--------------------------------------------------- - --------------------------
----------------------------------------------------- - ----------------------------
-
----------- -
---------- -- --
------------------------------------------------- - -----------
-
------------- -
---------- -- --
------------------------------------------------- - -----------
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- ------- -- -------- --- --------- -
---------- - -----------------
------------------------------------------------- - -----------
-
-
-
---------------------------------------- ----------------
-- ----
----- -------------- - ------------------------------------------
------------------------------------ ---
------------------------------------------说明
在上面这个示例中，我们先定义了一个 ExampleCounter 类，该类实现了自定义元素基础 API：constructor()、connectedCallback()、disconnectedCallback()、observedAttributes()、attributeChangedCallback()。它有一个 value 属性和一些操作它的方法，还包含一个简单的模板和一些事件监听器。
最后我们可以通过调用 customElements.define() 来注册 ExampleCounter 类为 example-counter 自定义元素，在应用时只需要在 DOM 中添加 example-counter 的标签，即可显示出实现组件的效果。
<example-counter value="0"></example-counter>
结论
Custom Elements 是 Web Components 中最为基础的部分，它可以用来扩展 HTML 元素，定义我们自己的标记，并将其行为和样式封装在一起以便在项目中复用。使用 Custom Elements 在页面构建中应用组件化思想，将代码的重用性、可读性，以及可维护性都提升到了更高的层面。它的出现让我们更好的控制界面的交互，让代码更加简单、直观、优美，提升开发效率和代码可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f4b403c5c563ced563cc17