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

结束语

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

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

~

~ 本文完,感谢阅读!

~

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

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

相关推荐
阅读 +