Custom Elements 生命周期详解-JavaScript中文网-JavaScript教程资源分享门户

Web 组件的兴起，有助于提高 Web 开发的灵活性和可复用性。Custom Elements（自定义元素）是一种 Web 组件标准，它允许我们创建自定义元素，使特定的 HTML 内容具有逻辑和样式。Custom Elements 生命周期包括一系列事件和方法，掌握这些生命周期对于创建高质量的 Web 组件至关重要。

什么是 Custom Elements 生命周期

Custom Elements 生命周期是指当我们创建一个自定义元素时，这个元素所遵循的一系列事件和方法。这些事件和方法掌握其顺序和使用方法，是我们创建高质量 Web 组件的基础。

生命周期按顺序分析

constructor()

这个方法是自定义元素的第一个方法，用于在元素创建时进行初始化。如果你需要向你的自定义元素添加属性或设置其他默认值，可以在这里完成。

// javascriptcn.com 代码示例
class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    // add default attributes
    this.setAttribute("name", "John");
    // add event listener
    this.addEventListener("click", this.onClick);
  }

  onClick() {
    console.log("clicked");
  }
}

customElements.define("my-custom-element", MyCustomElement);

connectedCallback()

当自定义元素被添加到文档中时，该方法将被调用。这是自定义元素和其他 DOM 元素之间交互的起点。

class MyCustomElement extends HTMLElement {
  connectedCallback() {
    console.log("connected to the DOM");
  }
}

customElements.define("my-custom-element", MyCustomElement);

disconnectedCallback()

当自定义元素从文档中删除时，该方法将被调用。在此可以进行清理或销毁操作。

class MyCustomElement extends HTMLElement {
  disconnectedCallback() {
    console.log("disconnected from the DOM");
  }
}

customElements.define("my-custom-element", MyCustomElement);

attributeChangedCallback()

当自定义元素属性的值发生变化时，该方法将被调用。我们可以在该方法中检查属性的值，从而根据属性值的更改来更新组件状态。

// javascriptcn.com 代码示例
class MyCustomElement extends HTMLElement {
  static get observedAttributes() {
    return ["name"];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Attribute "${name}" changed from "${oldValue}" to "${newValue}"`);
  }
}

customElements.define("my-custom-element", MyCustomElement);

adoptedCallback()

当自定义元素从一个文档转移到另一个文档时，该方法将被调用。该方法很少被使用，只有在使用 iframe 等特殊技术时才会遇到。
```
class MyCustomElement extends HTMLElement {
  adoptedCallback() {
    console.log("adopted to new document");
  }
}

customElements.define("my-custom-element", MyCustomElement);
```

生命周期执行顺序

Custom Elements 生命周期中的方法执行顺序如下：

constructor()
connectedCallback()
attributeChangedCallback()
disconnectedCallback()
adoptedCallback()

当自定义元素被添加到文档中时，会依次执行 constructor() 和 connectedCallback()。当自定义元素属性的值发生变化时，会依次执行 attributeChangedCallback()。当自定义元素从文档中删除时，会执行 disconnectedCallback()。当自定义元素从一个文档转移到另一个文档时，会执行 adoptedCallback()。

总结

Custom Elements 生命周期为我们在 Web 组件中添加逻辑和状态提供了广泛的支持。掌握这些生命周期，可以帮助我们编写更高质量的组件，提高 Web 应用程序的可重用性和可维护性。

参考代码

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Custom Elements 生命周详解</title>
  </head>
  <body>
    <my-custom-element></my-custom-element>
    <script>
      // define custom element
      class MyCustomElement extends HTMLElement {
        constructor() {
          super();
          // add default attributes
          this.setAttribute("name", "John");
          // add event listener
          this.addEventListener("click", this.onClick);
        }

        onClick() {
          console.log("clicked");
        }

        connectedCallback() {
          console.log("connected to the DOM");
        }

        disconnectedCallback() {
          console.log("disconnected from the DOM");
        }

        adoptedCallback() {
          console.log("adopted to new document");
        }

        attributeChangedCallback(name, oldValue, newValue) {
          console.log(
            `Attribute "${name}" changed from "${oldValue}" to "${newValue}"`
          );
        }
      }

      customElements.define("my-custom-element", MyCustomElement);
    </script>
  </body>
</html>

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