Custom Elements 出现的缘由探析-JavaScript中文网-JavaScript教程资源分享门户

在过去的几年中，Web 组件化变得越来越流行。许多前端框架和库都依赖于组件系统以提高开发速度和代码可维护性。随着 Google 推出的 Polymer 开始使用 Web Components，许多开发人员开始关注这一技术。在 Web 组件的核心技术之一 Custom Elements 出现前，Web 组件也并非没有技术实现。

Custom Elements 是 Web Components API 的四个主要组成部分之一，其他三个组成部分分别是 Shadow DOM、HTML Templates 以及 HTML Imports。其中，Custom Elements 可以让开发者自定义新的 HTML 元素，使其拥有自己的属性和行为。Custom Elements 出现的缘由探析正是由此引出的。

Web 组件现状

在 Custom Elements 出现之前，Web 组件仍然存在许多限制。Web 组件的实现可以借助以下技术：

ES6 classes 或 Prototype
HTML Templates
影子 DOM

在这些技术之间进行组合和使用可以创建非常灵活和功能强大的 Web 组件，但是这些做法都没有为开发者提供一个使用类似于原生 HTML 元素的方式来使用这些 Web 组件的解决方案。

例如，要使用一个使用 HTML 标准属性的自定义的 Web 组件时，开发者可能需要编写许多 JavaScript 代码来处理这一特性。而且，如果有多个开发者通过使用不同方法来实现组件的类定义，那么组件的实现是混乱、不可维护且难以跨项目共享的。

这些是 Custom Elements 的出现的原因，它旨在为 Web 组件提供标准化的 API。

Custom Elements 为什么重要

Reflective DOM API 使得 HTML 元素的 API 扩展变得不现实（例如为原生元素添加新的属性和方法），而 Custom Elements 提供了一个创建新的 HTML 元素的标准方式。在 Custom Elements 中，API 扩展采用扩展 HTML 元素的方式定义新的元素。

除了 API 扩展，Custom Elements 还会大大简化 Web 组件的开发。Custom Elements 规范公开了一个重要的构造函数（constructor），该构造函数在将自定义元素插入到文档时调用。这使得开发人员可以轻松地为他们的自定义元素提供默认行为或设置其他“必需”属性。

在 Custom Elements 中定义元素时，可以指定继承的原生元素或其他现有元素，然后扩展其行为。这种扩展机制使得开发者可以快速创建自定义元素，同时还可以使用原生元素的性质。

最后，Custom Elements 的出现还有助于推动 Web 标准的发展。早期的 Web Components 规范存在某些争议，但 Custom Elements 在较晚的时间引入了标准化的自定义元素方法。由于 Custom Elements 规范的引入是 Android、Chrome、Safari 和 Opera 浏览器统一支持之后，使得其他的 Web Components 规范成为可能。

Custom Elements 的重要组件

要使用 Custom Elements，需要两个重要的组件：customElements 实例和自定义类。

customElements

customElements 对象是所有 Custom Elements 有关实例和类注册的接口。您必须首先检查自定义元素是否已定义，然后才能创建其实例。为此，您可以使用以下方法：

if (!window.customElements.get('my-element')) {
  window.customElements.define('my-element', MyElement);
}

自定义类

自定义类是 Custom Elements 的主要组件。它们可以是 ES6 类（class）或构造函数模式。

-- -------------------- ---- -------
-- --- ---
----- --------- ------- ----------- -
  ------------- -
    --------
  -
-
------------------------------------------ -----------
-- --------
-------- ----------- -
  ----- -- - ------------------------------ --- -----------
-
------------------- - ------------------------------------ -
  ------------ - ------ ---------- ------------- ---- -
---
------------------------------------------ -----------

总结

Web 组件已然成为前端开发中不可或缺的部分，Custom Elements 的出现也极大的简化了组件开发者的工作量。学习 Custom Elements 还需要了解 Shadow DOM、HTML Templates、HTML Imports 等 Web Components API 的知识。在将来，更多的工作将依赖于 Web 组件和 Custom Elements 的使用。如果您还不熟悉 Custom Elements，现在就开始学习它，这将有助于您在应对将来的编码挑战中具有更强的竞争力！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64681149968c7c53b08492ad