深入剖析自定义组件的生命周期：Web Components 系列（七）

前端

2024-01-08 04:58:34

在构建交互式 web 应用时，可重用性是一个至关重要的因素。Web Components 为我们提供了通过封装 HTML、CSS 和 JavaScript 逻辑来创建自定义元素的强大手段，从而实现卓越的可重用性。

生命周期回调：控制组件的诞生与消亡

为了增强 Custom Elements 的灵活性，引入了生命周期回调函数。这些函数允许开发者定义在组件生命周期的不同阶段要执行的方法。

组件生命周期主要包含以下阶段：

created: 当组件首次创建时触发。
attached: 当组件被附加到 DOM 时触发。
detached: 当组件从 DOM 中删除时触发。
attributeChangedCallback: 当组件的属性发生变化时触发。

通过利用这些回调函数，开发者可以对组件的行为进行精细的控制，确保其在不同的使用场景下都能正常运行。

增强组件的可定制性：attributeChangedCallback

attributeChangedCallback 是生命周期回调函数中最强大的一个。它允许开发者在组件的属性发生变化时执行自定义逻辑。

例如，考虑一个简单的计数器组件。我们可以定义一个名为 count 的属性，并在 attributeChangedCallback 中更新计数值：

class Counter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'count') {
      this.count = parseInt(newValue);
    }
  }
}

通过这种方式，我们可以轻松地通过设置 count 属性来动态更新组件的状态，从而实现高度的可定制性。

实战案例：进度条组件

让我们以一个实际例子来说明生命周期回调的强大功能。我们构建一个进度条组件，其进度可以通过 progress 属性进行控制：

<progress-bar progress="50"></progress-bar>

该组件的 JavaScript 代码如下：

class ProgressBar extends HTMLElement {
  constructor() {
    super();
    this.progress = 0;
  }

  connectedCallback() {
    this.updateProgress();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'progress') {
      this.progress = parseInt(newValue);
      this.updateProgress();
    }
  }

  updateProgress() {
    this.style.width = `${this.progress}%`;
  }
}