使用 Custom Elements 创建可复用的 UI 组件

在构建复杂的 Web 应用程序时，UI 组件可以是提高开发速度和可维护性的关键。在过去，如果您想要创建可复用的 UI 组件，您必须使用框架或库如 React 或 Angular 等来创建它们。但是现在，在 Web 标准的支持下，您可以使用 Custom Elements API 来创建跨浏览器和跨框架的可复用 UI 组件。

Custom Elements 简介

Custom Elements 是 Web 标准中的一部分，它允许开发人员创建自定义 HTML 元素和组件。使用 Custom Elements，您可以创建自己的标记，如 <my-element> 或 <awesome-button>，这些标记将包含自定义行为和样式，并可重复使用在您的应用程序中。

要创建 Custom Element，您需要定义一个 JavaScript 类，并使用 customElements.define 方法注册它。注册 Custom Element 后，您可以在 HTML 中使用该元素，就像使用任何其他 HTML 元素一样。

下面是一个简单的示例，其中创建了一个 button 的 Custom Element：

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.addEventListener('click', () => {
      alert('你点击了自定义按钮！');
    });
  }
}

customElements.define('my-button', MyButton);

现在，您可以在 HTML 中使用 <my-button> 元素，就像使用 <button> 元素一样。此外，您可以使用自定义属性和方法来更改元素的属性和行为。

创建可复用 UI 组件

使用 Custom Elements 创建可复用的 UI 组件的最佳方法是将其拆分为多个 Custom Elements。每个 Custom Element 都应该是一个独立的功能组件，而且应该具有自己的样式和行为。

以下是一个可重用的模态窗口组件示例，该模态窗口由三个 Custom Elements 组成：<modal-window>、<modal-header> 和 <modal-body>。

<modal-window>
  <modal-header>
    <h3 slot="title">这是标题</h3>
    <button slot="close-button">×</button>
  </modal-header>
  <modal-body>
    <p>这是模态窗口的内容。</p>
  </modal-body>
</modal-window>

在这里，<modal-window> 是主要的 Custom Element，它包含一个头和一个主体。<modal-header> 元素包含一个标题和一个关闭按钮。<modal-body> 元素包含模态窗口的内容。

以下是每个 Custom Element 的 JavaScript 代码：

class ModalWindow extends HTMLElement {
  constructor() {
    super();

    // 添加样式
    this.attachShadow({ mode: 'open' }).innerHTML = `
      <style>
        /* 模态窗口样式 */
        .modal {
          display: none;
          position: absolute;
          z-index: 1;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgba(0, 0, 0, 0.4);
        }
        
        /* 内容框样式 */
        .modal-content {
          background-color: #fff;
          margin: 10% auto;
          padding: 20px;
          border: 1px solid #888;
          width: 80%;
          height: auto;
        }
      </style>
      <div class="modal">
        <div class="modal-content">
          <slot name="header"></slot>
          <slot name="body"></slot>
        </div>
      </div>
    `;

    // 显示/隐藏模态窗口
    this.toggleModal = () => {
      const modal = this.shadowRoot.querySelector('.modal');
      modal.style.display = modal.style.display === 'none' ? 'block' : 'none';
    };
  }

  connectedCallback() {
    // 添加模态窗口按钮的事件监听器
    this.addEventListener('click', this.toggleModal);
  }

  disconnectedCallback() {
    // 删除事件监听器
    this.removeEventListener('click', this.toggleModal);
  }
}

class ModalHeader extends HTMLElement {
  constructor() {
    super();

    // 添加样式
    this.attachShadow({ mode: 'open' }).innerHTML = `
      <style>
        /* 标题样式 */
        .title {
          margin: 0;
        }

        /* 关闭按钮样式 */
        .close-button {
          border: none;
          background-color: transparent;
          color: #666;
          font-size: 1.6em;
          font-weight: bold;
          float: right;
          cursor: pointer;
        }
      </style>
      <slot name="title"></slot>
      <button class="close-button" slot="close-button">×</button>
    `;
  }

  connectedCallback() {
    // 添加关闭按钮的事件监听器
    const closeButton = this.shadowRoot.querySelector('.close-button');
    closeButton.addEventListener('click', () => {
      this.closest('modal-window').toggleModal();
    });
  }

  disconnectedCallback() {
    // 删除事件监听器
    const closeButton = this.shadowRoot.querySelector('.close-button');
    closeButton.removeEventListener('click', () => {
      this.closest('modal-window').toggleModal();
    });
  }
}

class ModalBody extends HTMLElement {
  constructor() {
    super();

    // 添加样式
    this.attachShadow({ mode: 'open' }).innerHTML = `
      <style>
        /* 模态窗口内容样式 */
        .content {
          margin: 0;
        }
      </style>
      <div class="content">
        <slot></slot>
      </div>
    `;
  }
}

有了这些 Custom Elements，您可以很容易地在您的应用程序中使用它们，而不必关心底层实现。

总结

使用 Custom Elements API 是创建可重用 UI 组件的好方法，可以让您在没有框架或库的情况下创建自己的组件。如果您打算使用 Custom Elements 来创建您自己的组件，您需要了解 JavaScript 类、Web 标准和 Shadow DOM 的中高级概念。在上面的示例中，我们演示了如何创建一个模态窗口组件，其中使用了 Custom Elements API 和 Shadow DOM，以演示 Custom Elements 的基本概念和技巧。

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