ASCII码 ASCII码

Web Components系列(七) ——自定义组件的生命周期

发布于：2022-02-14 10:37:54  栏目：技术文档

生命周期.001

前言

何谓”生命周期“？顾名思义，生命周期就是指一个物体从产生前到消亡后的整个过程，当然，不同物体的生命周期具体阶段划分可能不太一样。

我们在使用前端组件框架的时候，都知道每个组件都有各自的生命周期，明确了组件生命周期后，开发者就可以在组件的不同生命周期执行不同的代码逻辑，从而达到管理组件的作用。

为了使 Custom Elements 在使用上更加灵活，它也有”生命周期“回调函数，可以让开发者定义好在组件不同生命时期可以被执行的方法。

Custom Elements 生命周期划分

在 Custom Elements 的构造函数中，可以指定多个不同的回调函数，它们将会在元素的不同生命时期被调用：

  • connectedCallback：当 Custom Elements首次被插入文档DOM时，被调用。
  • disconnectedCallback：当 Custom Elements 从文档DOM中删除时，被调用。
  • adoptedCallback：当 Custom Elements 被移动到新的文档时，被调用。
  • attributeChangedCallback: 当 Custom Elements 增加、删除、修改自身属性时，被调用。

注意：自定义元素的生命周期回调函数是被使用在它的构造函数中的。

生命周期回调函数的使用

首先看一下效果：

2022-02-12 23.43.06

这里需要注意的是：adoptedCallback 回调只有在将自定义元素移动到新文档（一般是 iframe）中时才会被触发。

代码如下：

  1. <!--index.html-->
  2. <head>
  3.     <style>
  4.         body {
  5.             padding: 50px;
  6.         }
  8.         custom-square {
  9.             margin: 15px;
  10.         }
  12.         iframe {
  13.             width: 100%;
  14.             height: 250px;
  15.             overflow: hidden;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21.     <h1>Custom Elements 生命周期</h1>
  22.     <div>
  23.         <button class="add">追加 Square 到 DOM</button>
  24.         <button class="update">改变 Square 的属性</button>
  25.         <button class="remove">移除 Square 元素</button>
  26.         <button class="move">移动 Square 到 Iframe</button>
  27.     </div>
  28.     <iframe src="./other.html"></iframe>
  29.     <script src="./square.js"></script>
  30.     <script src="./index.js"></script>
  31. </body>
  33. <!--other.html-->
  34. <body>
  35.     <h1>这是 other.html</h1>
  36. </body>
  1. // square.js
  2. function updateStyle(elem) {
  3.     const shadow = elem.shadowRoot;
  4.     shadow.querySelector("style").textContent = `
  5.       div {
  6.         width: ${elem.getAttribute("l")}px;
  7.         height: ${elem.getAttribute("l")}px;
  8.         background-color: ${elem.getAttribute("c")};
  9.       }
  10.     `;
  11. }
  13. class Square extends HTMLElement {
  14.     static get observedAttributes() {
  15.         return ["c", "l"];
  16.     }
  18.     constructor() {
  19.         super();
  21.         const shadow = this.attachShadow({ mode: "open" });
  23.         const div = document.createElement("div");
  24.         const style = document.createElement("style");
  25.         shadow.appendChild(style);
  26.         shadow.appendChild(div);
  27.     }
  29.     connectedCallback() {
  30.         console.log("custom-square 被挂载到页面");
  31.         updateStyle(this);
  32.     }
  34.     disconnectedCallback() {
  35.         console.log("custom-square 从页面被移除");
  36.     }
  38.     adoptedCallback() {
  39.         console.log("custom-square 被移动到新页面");
  40.     }
  42.     attributeChangedCallback(name, oldValue, newValue) {
  43.         console.log("custom-square 属性值被改变");
  44.         updateStyle(this);
  45.     }
  46. }
  48. customElements.define("custom-square", Square);
  1. // index.js
  2. const add = document.querySelector(".add");
  3. const update = document.querySelector(".update");
  4. const remove = document.querySelector(".remove");
  5. const move = document.querySelector(".move");
  6. let square;
  8. update.disabled = true;
  9. remove.disabled = true;
  11. function random(min, max) {
  12.     return Math.floor(Math.random() * (max - min + 1) + min);
  13. }
  15. add.onclick = function () {
  16.     // Create a custom square element
  17.     square = document.createElement("custom-square");
  18.     square.setAttribute("l", "100");
  19.     square.setAttribute("c", "red");
  20.     document.body.appendChild(square);
  22.     update.disabled = false;
  23.     remove.disabled = false;
  24.     add.disabled = true;
  25. };
  27. update.onclick = function () {
  28.     // Randomly update square's attributes
  29.     square.setAttribute("l", random(50, 200));
  30.     square.setAttribute("c", `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`);
  31. };
  33. remove.onclick = function () {
  34.     // Remove the square
  35.     document.body.removeChild(square);
  37.     update.disabled = true;
  38.     remove.disabled = true;
  39.     add.disabled = false;
  40. };
  42. update.onclick = function () {
  43.     // Randomly update square's attributes
  44.     square.setAttribute("l", random(50, 200));
  45.     square.setAttribute("c", `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`);
  46. };
  48. move.onclick = function () {
  49.     window.frames[0].document.body.appendChild(square);
  50. }

结束语

以上就是 Custom Elements 生命周期回调函数的简单使用示例，希望能对你有所帮助！

Custom Elements 的回调函数中，adoptedCallback 的使用场景较少，这个需要注意。

~

~ 本文完，感谢阅读！

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行