HTML 自定义元素 v1 中构造函数和 connectedCallback 的区别

在本文中，我们将介绍 HTML 自定义元素 v1 版本中构造函数和 connectedCallback 方法之间的区别，并提供示例说明。

阅读更多：HTML 教程

构造函数

构造函数是自定义元素在被创建时自动执行的函数。它用于初始化元素的默认状态、创建必要的变量和设置初始属性值。构造函数是在元素的生命周期的早期阶段执行的，并且只执行一次。

以下是一个自定义元素的构造函数示例：

class CustomElement extends HTMLElement {
  constructor() {
    super();
    // 初始化变量和设置初始属性值
    this.count = 0;
    this.setAttribute('name', 'John');
  }
}

在上面的示例中，自定义元素 CustomElement 的构造函数会将 count 变量设置为 0，并将 name 属性设置为 “John”。

connectedCallback

connectedCallback 是当自定义元素首次被插入到文档中时自动执行的方法。它用于执行与元素的 DOM 操作相关的任务，如添加事件监听器、创建子元素等。connectedCallback 方法会在构造函数之后执行，并且只执行一次。

以下是一个自定义元素的 connectedCallback 方法示例：

connectedCallback() {
  // 添加事件监听器
  this.addEventListener('click', this.handleClick);

  // 创建子元素
  const childElement = document.createElement('p');
  childElement.textContent = 'Hello, World!';
  this.appendChild(childElement);
}

在上面的示例中，自定义元素的 connectedCallback 方法会添加一个点击事件监听器，并在元素内部创建一个 <p> 元素，设置其文本内容为 “Hello, World!”。

区别和适用场景

构造函数和 connectedCallback 方法在自定义元素的生命周期中有不同的作用和执行时间。

构造函数主要用于初始化和设置初始属性值，这些操作只需要在元素创建的时候执行一次。因此，构造函数适用于处理那些在整个生命周期中保持不变的操作。

connectedCallback 方法则主要用于执行与元素的 DOM 操作相关的任务，并在元素首次插入到文档中时执行一次。由于 connectedCallback 方法在构造函数之后执行，因此可以使用构造函数中设置的变量和属性。因此，connectedCallback 方法适用于处理那些与元素的 DOM 操作相关且可能会发生变化的任务。

以下是一些适用场景的示例：