实践 Custom Elements，打造前端可复用组件库-JavaScript中文网-JavaScript教程资源分享门户

Custom Elements 是 Web Components 技术中的一个核心概念，它允许我们创建自定义 HTML 元素，并在页面上使用它们。通过 Custom Elements，我们可以将一个复杂的组件封装成一个单独的元素，使得在项目中复用这个组件变得非常容易。

本文旨在介绍 Custom Elements 的实践方法，以及如何通过 Custom Elements 打造前端可复用组件库。我们将详细介绍 Custom Elements 的使用方式，并给出实例代码以及学习和指导意义。

Custom Elements 简介

Custom Elements 是 Web Components 技术的核心之一，它允许我们创建自定义的 HTML 元素。通过 Custom Elements，我们可以将一个复杂的组件封装成一个单独的元素，并在项目中复用这个组件。

使用 Custom Elements，我们可以定义一个自定义的 HTML 元素，给它一个名称，定义它的行为和样式，然后在页面上使用这个元素。这个元素会像其他 HTML 元素一样工作，并且可以使用 JavaScript 进行交互。

如何实现 Custom Elements

Custom Elements 的实现依赖于两个 API：CustomElementRegistry 和 HTMLElement。

CustomElementRegistry

CustomElementRegistry 是一个全局对象，它提供了定义和注册自定义元素的方法。我们可以通过它来注册一个新的元素。

下面是一个用 CustomElementRegistry 注册一个自定义元素的例子：

class MyElement extends HTMLElement {
  constructor() {
    super();
    // 在构造函数中，我们可以添加元素的行为和样式
  }
}

window.customElements.define('my-element', MyElement);

在这个例子中，我们定义了一个自定义元素 MyElement，并且将它注册到了 CustomElementRegistry 中，使用名称 my-element。

HTMLElement

HTMLElement 是一个所有 HTML 元素的父类。我们可以自定义一个 HTMLElement 的子类，并在其中添加自定义的行为和样式。

下面是一个自定义元素的示例，它实现了一个简单的计数器：

// javascriptcn.com 代码示例
class CounterElement extends HTMLElement {
  constructor() {
    super();

    this.count = 0;
    this.render();
  }

  render() {
    this.innerHTML = `
      <div>
        Count: ${this.count}
        <button>Increment</button>
      </div>
    `;

    this.querySelector('button').addEventListener('click', () => {
      this.count++;
      this.render();
    });
  }
}

window.customElements.define('my-counter', CounterElement);

在这个例子中，我们定义了一个继承自 HTMLElement 的计数器组件 CounterElement，它有一个 count 属性，以及一个渲染方法 render，用来将组件渲染成 HTML 元素。

在 CounterElement 的构造函数中，我们初始化了 count 的值，并调用了 render 方法。在 render 方法中，我们使用了 innerHTML 属性来将组件渲染成 HTML 元素，并给按钮添加了一个点击事件。

最后，我们将 CounterElement 注册到了 CustomElementRegistry 中，使用名称 my-counter。

如何使用 Custom Elements

使用 Custom Elements 很简单，我们只需要在 HTML 中使用自定义元素名称即可。

下面是一个使用上面定义的计数器组件的例子：

<my-counter></my-counter>

在这个例子中，我们使用了自定义元素名称 my-counter 来创建一个计数器组件。

当我们在页面上使用一个自定义元素时，浏览器会根据名称在 CustomElementRegistry 中查找对应的元素定义，并将其实例化为一个 HTML 元素。然后，浏览器会像对待任何其他 HTML 元素一样对待它，即将其显示在页面上，并执行其中的 JavaScript 代码。

如何打造前端可复用组件库

通过 Custom Elements，我们可以将一个复杂的组件封装成一个单独的元素，并在项目中复用。这使得我们能够更方便地打造前端可复用组件库。

下面是一个简单的示例，展示如何使用 Custom Elements 打造前端组件库：

// javascriptcn.com 代码示例
class ButtonElement extends HTMLElement {
  constructor() {
    super();

    this.addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('button-click', {
        bubbles: true,
        composed: true
      }));
    });

    this.render();
  }

  render() {
    this.innerHTML = `
      <button>${this.getAttribute('label')}</button>
    `;
  }
}

window.customElements.define('my-button', ButtonElement);

在这个例子中，我们定义了一个 ButtonElement 组件，它继承自 HTMLElement，并实现了一个点击事件以及一个渲染方法。

在 ButtonElement 的渲染方法中，我们使用了 getAttribute 方法来获取组件的 label 属性，然后将其插入到 HTML Button 元素中。

在点击事件中，我们使用了 dispatchEvent 方法来触发一个自定义事件 button-click。这个事件是一个 bubbling 事件，并且 composed 属性设置为 true，表示这个事件可以从 Shadow DOM 组成部分逃逸出来，向外传播。

接下来，我们可以在任何页面中使用这个自定义的按钮组件：

<my-button label="OK"></my-button>

在这个例子中，我们使用自定义元素名称 my-button 来创建一个按钮组件，并使用 label 属性来设置按钮的文本。

这个自定义按钮组件已经可以被我们在任何页面上复用了。如果我们想要在这个组件基础上构建更复杂的组件库，可以考虑采用以下策略：

封装响应式布局的组件。可以考虑使用 CSS Grid 或 Flexbox 等技术来封装响应式布局的组件，例如网格组件、表单组件、面板组件等。
封装可交互组件。可以使用 Custom Events 来为组件添加交互性，例如对话框组件、标签组件、提示组件等。
封装兼容性组件。可以使用 Polyfill 技术来创建一些兼容性的组件，例如日期选择器组件、颜色选择器组件、上传组件等。
封装工具组件。可以使用 Custom Elements 来封装一些工具组件，例如搜索框组件、表格排序组件等。

总结

本文介绍了 Custom Elements 的实现方式，以及如何使用 Custom Elements 打造前端可复用组件库。我们详细介绍了 Custom Elements 的使用方法，并给出了实例代码和学习和指导意义。通过本文的介绍，我们了解了如何使用 Custom Elements 来创建自定义组件，并将它们封装成一个单独的元素，以便在项目中复用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651d1f5795b1f8cacd4a3ebd