共计 3292 个字符,预计需要花费 9 分钟才能阅读完成。
前言
何谓”生命周期“?顾名思义,生命周期就是指一个物体从产生前到沦亡后的整个过程,当然,不同物体的生命周期具体阶段划分可能不太一样。
咱们在应用前端组件框架的时候,都晓得每个组件都有各自的生命周期,明确了组件生命周期后,开发者就能够在组件的不同生命周期执行不同的代码逻辑,从而达到治理组件的作用。
为了使 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> | |
<h1>Custom Elements 生命周期 </h1> | |
<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="./other.html"></iframe> | |
<script src="./square.js"></script> | |
<script src="./index.js"></script> | |
</body> | |
<!--other.html--> | |
<body> | |
<h1> 这是 other.html</h1> | |
</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 square's 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 square's 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 的应用场景较少,这个须要留神。
~
~ 本文完,感激浏览!
~
学习乏味的常识,结识乏味的敌人,塑造乏味的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王 ,我的公众号是『编程三昧』,欢送关注,心愿大家多多指教!
正文完
发表至: javascript
2022-02-13