基于 Custom Elements 构建可重用的 Web Components

Web Components 是一种新型的 Web 技术，它允许开发者创建可重用的自定义 HTML 元素。Custom Elements 是 Web Components 技术核心的一部分，需要注意的是，Custom Elements API 使用的是 ES6 的 class 语法。

在这篇文章中，我们将介绍如何使用 Custom Elements 构建可重用的 Web Components，并讨论为什么 Web Components 是一个令人兴奋的技术。我们还将创建一个自定义的音乐播放器作为示例。

什么是 Custom Elements

Custom Elements 允许开发者创建自定义 HTML 元素并且定义其行为。开发者可以使用 class 去定义一个新的元素，通过元素的生命周期，向元素添加事件，添加 Shadow DOM，并根据需要配置元素的属性。

以下是一个简单的 Custom Elements 示例：

class CustomElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = 'Hello, Custom Element!';
  }
}

window.customElements.define('custom-element', CustomElement);

在上面的示例中，我们定义了一个名为 Custom Element 的新元素，其中重写了 connectedCallback 方法。当该元素被添加到文档时，浏览器会调用 connectedCallback 方法并将其内容设置为“Hello, Custom Element!”。

要使用自定义元素，需要定义一个自定义元素名称并将其注册到 Custom Elements 中。在示例中，我们使用 window.customElements.define 方法注册 Custom Element 元素。

创建可重用的 Web Components

Custom Elements 具有与普通 HTML 元素相同的方法。开发者可以向自定义元素添加属性、样式和事件，并且可以实现复杂的行为逻辑，如元素的生命周期、属性变更等。

下面是一个自定义音乐播放器的示例：

class CustomAudioPlayer extends HTMLElement {
  static get observedAttributes() {
    return ['src'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const audioElement = document.createElement('audio');
    this.shadowRoot.appendChild(audioElement);
    audioElement.addEventListener('play', () => {
      this.isPlaying = true;
      this.render();
    });
    audioElement.addEventListener('pause', () => {
      this.isPlaying = false;
      this.render();
    });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, _, newValue) {
    if (name === 'src') {
      this.shadowRoot.querySelector('audio').setAttribute('src', newValue);
      this.render();
    }
  }

  get isPlaying() {
    return this.getAttribute('is-playing') === 'true';
  }

  set isPlaying(val) {
    if (val) {
      this.setAttribute('is-playing', 'true');
    } else {
      this.removeAttribute('is-playing');
    }
  }

  render() {
    const audioElement = this.shadowRoot.querySelector('audio');
    const playButton = document.createElement('button');
    if (this.isPlaying) {
      playButton.textContent = 'Pause';
      audioElement.play();
    } else {
      playButton.textContent = 'Play';
      audioElement.pause();
    }
    playButton.addEventListener('click', () => {
      this.isPlaying = !this.isPlaying;
    });
    this.shadowRoot.appendChild(playButton);
  }
}

window.customElements.define('custom-audio-player', CustomAudioPlayer);

在上面的示例中，我们使用 Custom Elements 创建了一个自定义音乐播放器。该元素的 observedAttributes 静态方法，定义了当属性变化时将会被观察的列表（在本例中是 src 属性）。此外，我们使用 constructor 方法在 Shadow DOM 中添加了一个音频元素，并设置 play 和 pause 事件侦听器。在 connectedCallback 方法中，我们调用 render 方法以确保资源正常渲染。

当 src 属性变化时，我们使用 attributeChangedCallback 方法更新 src 属性，并再次调用 render 方法以确保正确渲染自定义元素。

为了使 Web Components 可复用，我们还可以添加参数、附加样式并将元素注册到某个自定义命名空间中。这些都是自定义元素的常规 CSS 控制方法。

使用 Custom Elements

要使用 Custom Elements，只需在 HTML 中添加一个新的标记，该标记引用 Custom Elements 的自定义元素名称即可。在上面的音乐播放器示例中，我们定义了 custom-audio-player 元素，因此使用以下方式将其添加到 HTML 文档中：

<custom-audio-player src="example.mp3"></custom-audio-player>

在大多数情况下，Custom Elements 可以像任何其他 HTML 元素一样使用，并且遵循相同的 HTML、CSS 和 JavaScript 最佳实践。

总结

Web Components 提供了一种可重用、可维护且强大的重用组件的方式。Custom Elements 是 Web Components 技术核心的一部分，它使我们可以轻松地创建自定义 HTML 元素。通过使用 Custom Elements，开发者可以轻松创建可重用的自定义元素，并摆脱依赖第三方框架的束缚。此外，Web Components 允许开发者使用新的类和语法，来构建更为复杂、更为灵活的应用程序。本文提供了一个使用 Custom Elements 的音乐播放器示例，以演示 Custom Elements 技术的实际应用。

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