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><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 elementsquare = 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 attributessquare.setAttribute("l", random(50, 200));square.setAttribute("c", `rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`);
};remove.onclick = function () {// Remove the squaredocument.body.removeChild(square);update.disabled = true;remove.disabled = true;add.disabled = false;
};update.onclick = function () {// Randomly update square's attributessquare.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 的使用场景较少，这个需要注意。

~: 本文完，感谢阅读！

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

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

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

React 深入系列４：组件的生命周期
文:徐超,<React进阶之路>作者授权发布,转载请注明作者及出处 React 深入系列4:组件的生命周期 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助 ...
简单了解Vue的自定义组件与生命周期
Vue的自定义组件定义格式 Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板 }) 代码解析(详细解释在注解 ...
.net组件开发系列之武术系列武术招数控件生命周期与控件事件机制
.net组件开发系列之武术系列武术招数控件生命周期与控件事件机制一.控件生命周期先回述上篇,可能表述没有不清晰,也可能跨度大了点,好的,我们来一个循序渐进过程,大家都知道,武术都有招术的,先出什 ...
【微信小程序】组件的生命周期及自定义组件
文章目录组件的生命周期自定义组件的生命周期函数执行顺序组件常用的生命周期函数 lifetimes节点组件所在页面的生命周期函数 pageLifetimes节点自定义组件创建自定义组件创 ...
react学习笔记(4)组件的生命周期(运行阶段和销毁阶段)以及事件处理函数
1.组件的生命周期接着(2)中的组件生命周期 1.运行阶段运行阶段有5个步骤: componentWillReceiveProps: 父组件修改属性触发,可以修改新属性,修改状态. shouldC ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
React 初探 [五] React 组件的生命周期
说起生命周期,最先接触的是Andorid 开发中 Activity 和 Fragment 的生命周期,再者是Vue 组件,那么今天要梳理的是React 组件的生命周期,可见对生命周期的理解和掌握对组件 ...
组件的生命周期，小程序如何引入第三方ui框架
笔记组件开发的三要素 properties //相当于vue中的props接收属性 triggerEvent//相当于vue中是$emit slot//和vue是类似的slot 1.可以通关slot ...
jquery 监听td点击事件_VUE @hook浅析（监听子组件的生命周期钩子） - 古兰精
一.前言接触hook是从webhook开始接触的,webhook是git的一个扩展服务,可以在仓库接收到push/commit事件并发送http request至一个开发者可以自定义的URL.通过这 ...

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

前言

Custom Elements 生命周期划分

生命周期回调函数的使用

结束语

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

最新文章

热门文章