农村四月闲人少,勤学苦攻把名扬。这篇文章主要讲述#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系列 ——自定义组件的生命周期】~
推荐阅读
- #yyds干货盘点#three.js源码解读-EventDispatcher
- #yyds干货盘点#swagger定位问题?式
- Redis列表list字符类型详解#yyds干货盘点#
- Linux 防火墙是什么,你需要它吗( | Linux 中国)
- 「2022」打算跳槽的,必知的 WEB 安全面试题
- 「2022」打算跳槽涨薪,必问面试题及答案 -- vue3 篇
- #yyds干货盘点# HCIE-Security Day11(初步学习防火墙双机热备和VGMP概念)
- #yyds干货盘点# JetPack | Hilt-依赖注入框架上手指南
- #yyds干货盘点#spring-cloud-kubernetes官方demo运行实战