#yyds干货盘点#Web Components系列 ——自定义组件的生命周期

农村四月闲人少，勤学苦攻把名扬。这篇文章主要讲述#yyds干货盘点#Web Components系列 ——自定义组件的生命周期相关的知识，希望能为你提供帮助。

文章图片

前言何谓”生命周期“？顾名思义，生命周期就是指一个物体从产生前到消亡后的整个过程，当然，不同物体的生命周期具体阶段划分可能不太一样。
我们在使用前端组件框架的时候，都知道每个组件都有各自的生命周期，明确了组件生命周期后，开发者就可以在组件的不同生命周期执行不同的代码逻辑，从而达到管理组件的作用。
为了使 Custom Elements 在使用上更加灵活，它也有”生命周期“回调函数，可以让开发者定义好在组件不同生命时期可以被执行的方法。
Custom Elements 生命周期划分在 Custom Elements 的构造函数中，可以指定多个不同的回调函数，它们将会在元素的不同生命时期被调用：

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

生命周期回调函数的使用首先看一下效果：

文章图片

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

< !--index.html--> < head> < style> body padding: 50px; custom-square margin: 15px; iframe width: 100%; height: 250px; overflow: hidden; < /style> < /head> < body> Custom Elements 生命周期 < div> < button class="add"> 追加 Square 到 DOM< /button> < button class="update"> 改变 Square 的属性< /button> < button class="remove"> 移除 Square 元素< /button> < button class="move"> 移动 Square 到 Iframe< /button> < /div> < iframe src="https://www.songbingjia.com/android/other.html"> < /iframe> < script src="https://www.songbingjia.com/android/square.js"> < /script> < script src="https://www.songbingjia.com/android/index.js"> < /script> < /body> < !--other.html--> < body> 这是 other.html < /body>

// square.js function updateStyle(elem) const shadow = elem.shadowRoot; shadow.querySelector("style").textContent = ` div width: $elem.getAttribute("l")px; height: $elem.getAttribute("l")px; background-color: $elem.getAttribute("c"); `; class Square extends HTMLElement static get observedAttributes() return ["c", "l"]; constructor() super(); const shadow = this.attachShadow( mode: "open" ); const div = document.createElement("div"); const style = document.createElement("style"); shadow.appendChild(style); shadow.appendChild(div); connectedCallback() console.log("custom-square 被挂载到页面"); updateStyle(this); disconnectedCallback() console.log("custom-square 从页面被移除"); adoptedCallback() console.log("custom-square 被移动到新页面"); attributeChangedCallback(name, oldValue, newValue) console.log("custom-square 属性值被改变"); updateStyle(this); customElements.define("custom-square", Square);

// index.js const add = document.querySelector(".add"); const update = document.querySelector(".update"); const remove = document.querySelector(".remove"); const move = document.querySelector(".move"); let square; update.disabled = true; remove.disabled = true; function random(min, max) return Math.floor(Math.random() * (max - min + 1) + min); add.onclick = function () // Create a custom square element square = document.createElement("custom-square"); square.setAttribute("l", "100"); square.setAttribute("c", "red"); document.body.appendChild(square); update.disabled = false; remove.disabled = false; add.disabled = true; ; update.onclick = function () // Randomly update squares attributes square.setAttribute("l", random(50, 200)); square.setAttribute("c", `rgb($random(0, 255), $random(0, 255), $random(0, 255))`); ; remove.onclick = function () // Remove the square document.body.removeChild(square); update.disabled = true; remove.disabled = true; add.disabled = false; ; update.onclick = function () // Randomly update squares attributes square.setAttribute("l", random(50, 200)); square.setAttribute("c", `rgb($random(0, 255), $random(0, 255), $random(0, 255))`); ; move.onclick = function () window.frames[0].document.body.appendChild(square);

结束语以上就是 Custom Elements 生命周期回调函数的简单使用示例，希望能对你有所帮助！
Custom Elements 的回调函数中，adoptedCallback 的使用场景较少，这个需要注意。
~
~ 本文完，感谢阅读！
【#yyds干货盘点#Web Components系列 ——自定义组件的生命周期】~