如何使用自定义元素构建可复用的 UI 组件库-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会使用一些 UI 组件来构建我们的用户界面。但是，为了满足项目的特定需求，有时候标准的组件库可能无法满足我们的要求。这时候，我们就需要自己编写一些自定义的 UI 组件。

本文将介绍如何使用自定义元素构建可复用的 UI 组件库，并通过实际示例代码来说明其实现方式。

自定义元素

自定义元素是一种 HTML 元素，它的行为和外观可以由开发者自己来定义。自定义元素由两部分组成：标签名和类。标签名是一个自定义的元素名称，其命名规则和 HTML 标签一样，可以由字母、数字和中划线组成。类是一个 JavaScript 类，用于定义自定义元素的行为和外观。

以下是一个自定义元素的示例代码：

// www.javascriptcn.com code example
<my-element></my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      this.innerHTML = 'Hello, World!';
    }
  }

  customElements.define('my-element', MyElement);
</script>

这个示例定义了一个名为 my-element 的自定义元素，它的类是 MyElement。该元素在被添加到 DOM 中时，会自动调用类的 connectedCallback 方法，从而在元素内部添加了一行文本 Hello, World!。

构建自定义 UI 组件库

在构建自定义 UI 组件库之前，我们需要了解几个概念：

属性：自定义元素可以定义属性，用于控制元素的行为和样式。
事件：自定义元素可以触发和监听事件，用于实现元素与外部环境的交互。
Slot：Slot 是一种特殊的元素标记，用于在元素内部预留一个区域，用于插入其他元素。

接下来，我们将通过一个示例来说明如何使用自定义元素来构建可复用的 UI 组件库。

示例：按钮组件

首先，我们创建一个名为 my-button 的自定义元素，用于表示我们的按钮组件。该元素有以下属性：

variant：按钮的样式，可以是 primary、secondary、success、warning、danger 等。
size：按钮的大小，可以是 small、medium、large 等。
disabled：是否禁用按钮。

我们可以使用 class 属性来指定按钮的样式类：

<my-button class="primary small" variant="primary" size="small">Click me</my-button>

按钮组件的 HTML 代码如下：

// www.javascriptcn.com code example
<template id="myButtonTemplate">
  <style>
    :host {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      text-transform: uppercase;
      cursor: pointer;
      outline: none;
      border-radius: var(--my-button-border-radius, 4px);
      padding: var(--my-button-padding, 8px 16px);
      font-size: var(--my-button-font-size, 14px);
      transition: all 0.3s ease;
      user-select: none;
    }

    :host([disabled]) {
      opacity: 0.5;
      cursor: not-allowed;
    }

    :host(.primary) {
      background-color: var(--my-button-primary-color, #42B983);
      color: var(--my-button-primary-text-color, #FFFFFF);
    }

    :host(.secondary) {
      background-color: var(--my-button-secondary-color, #F5F7FA);
      color: var(--my-button-secondary-text-color, #5E6C84);
      border: 1px solid var(--my-button-secondary-border-color, #DFE1E6);
    }

    :host(.success) {
      background-color: var(--my-button-success-color, #37D67A);
      color: var(--my-button-success-text-color, #FFFFFF);
    }

    :host(.warning) {
      background-color: var(--my-button-warning-color, #FFB000);
      color: var(--my-button-warning-text-color, #FFFFFF);
    }

    :host(.danger) {
      background-color: var(--my-button-danger-color, #FF5630);
      color: var(--my-button-danger-text-color, #FFFFFF);
    }

    :host(.small) {
      font-size: var(--my-button-small-font-size, 12px);
    }

    :host(.medium) {
      font-size: var(--my-button-medium-font-size, 14px);
    }

    :host(.large) {
      font-size: var(--my-button-large-font-size, 16px);
    }
  </style>

  <button></button>
</template>

<script>
  class MyButton extends HTMLElement {
    constructor() {
      super();

      // 创建 Shadow DOM 并导入模板
      const shadow = this.attachShadow({ mode: 'open' });
      const template = document.getElementById('myButtonTemplate');
      const clone = document.importNode(template.content, true);
      shadow.appendChild(clone);

      // 获取元素和属性
      this.button = shadow.querySelector('button');
      this.disabled = this.getAttribute('disabled') === 'true';
      this.variant = this.getAttribute('variant') || 'primary';
      this.size = this.getAttribute('size') || 'medium';

      // 绑定事件处理函数
      this.button.addEventListener('click', () => {
        if (!this.disabled) {
          const event = new Event('myButtonClick');
          this.dispatchEvent(event);
        }
      });

      // 更新按钮外观
      this.updateButtonStyle();
    }

    static get observedAttributes() {
      return ['disabled', 'variant', 'size'];
    }

    attributeChangedCallback(attrName, oldValue, newValue) {
      if (oldValue !== newValue) {
        switch (attrName) {
          case 'disabled':
            this.disabled = newValue === 'true';
            break;
          case 'variant':
            this.variant = newValue || 'primary';
            break;
          case 'size':
            this.size = newValue || 'medium';
            break;
        }

        this.updateButtonStyle();
      }
    }

    updateButtonStyle() {
      // 设置样式类
      this.className = `my-button ${this.variant} ${this.size}`;

      // 设置 disabled 属性
      if (this.disabled) {
        this.button.setAttribute('disabled', 'disabled');
      } else {
        this.button.removeAttribute('disabled');
      }
    }

    connectedCallback() {
      // 添加文本内容和 Slot
      const content = this.innerHTML.trim();
      const slot = document.createElement('slot');
      this.button.textContent = content || 'Button';
      this.button.appendChild(slot);
    }
  }

  customElements.define('my-button', MyButton);
</script>

在 my-button 元素的 constructor 方法中，我们创建了一个 Shadow DOM，并导入了一个名为 myButtonTemplate 的 HTML 模板。该模板包含了一个样式表和一个 button 元素，用于实现按钮的样式和行为。

在 connectedCallback 方法中，我们为 button 元素添加了文本内容和一个 Slot，使得在使用该组件时，可以通过插入其他元素来替换默认的文本内容。

在 attributeChangedCallback 方法中，我们监听了属性变化的事件，并根据变化来更新按钮的样式和行为。

最后，在 updateButtonStyle 方法中，我们根据不同的属性值来设置样式类和 disabled 属性，从而实现了按钮组件的动态更新。

我们可以通过以下代码来使用按钮组件：

<my-button>Click me</my-button>

或者使用属性来修改按钮的样式：

<my-button variant="primary" size="small" disabled>Click me</my-button>

通过构建类似按钮组件这样的自定义元素，我们可以方便地构建一些可复用的 UI 组件，并将其打包成库来在多个项目中使用。

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

如何使用自定义元素构建可复用的 UI 组件库

自定义元素

构建自定义 UI 组件库

示例：按钮组件

接着读