网站空间的地址,wordpress新打开空白页,网站原创内容优化,建设网站作业目录 引言
演变过程
概述
使用方式
创建标签
定义标签
使用标签
获取标签
异步定义标签
升级标签
完整案例
结语
相关代码
参考文章 引言
随着项目体量的增大#xff0c;组件化和模块化的优势也愈发明显了#xff0c;构建可重复使用、独立、可互操作的组件变得…目录 引言
演变过程
概述
使用方式
创建标签
定义标签
使用标签
获取标签
异步定义标签
升级标签
完整案例
结语
相关代码
参考文章 引言
随着项目体量的增大组件化和模块化的优势也愈发明显了构建可重复使用、独立、可互操作的组件变得尤为重要在JS中我们可以通过class和函数对代码解耦使某段代码可以复用。在TS中我们也可以通过模块对代码进行模块化开发在HTML页面中同样有一种技术可以实现独立的、可复用的组件这便是本篇文章讲到的Web Components
Web Components主要包括Custom Elements、Shadow DOM、HTML Templates和JavaScript这四部分在后文及后续的文章中我会详细展开说说
演变过程
在熟悉web组件之前我们可以了解一下早期的开发人员如何进行业务组件复用的
聊聊我使用过的三种复用方式
一是使用JQ的load()进行ajax请求将结果渲染到某个div或者组件中以我原先公司的页面为例子可以将图中画框的部分分别在多个html页面中实现然后使用JQ进行请求加载到主页的标签中达到组件化效果此时如果要传递参数则可以通过url或者共用localstorage等形式共享状态 这样做确实可以将某个页面或者标签模块进行复用但是缺点也很明显一是页面加载是异步的需要通过ajax请求html文件的形式完成二是传参的方式仅限于query的方式复杂的参数支持率较为薄弱
第二种是Iframe的方式这种方式和jq的load类似同样拥有独立上下文可以在当前环境使用自己的CSS和JS并且在加载时独立于主页面。当然这么做的缺点也是有的和load函数一样它的页面单独加载和渲染多出了性能开销以及异步加载问题
最后一种是使用JS的代码进行动态HTML拼接介于其强大的兼容性动态HTML拼接在早期的前端开发中被广泛使用并且能够在绝大多数浏览器上良好运行比如
function createCustomTag(tagName, text, attributes) {var tag tagName;for (var attr in attributes) {if (attributes.hasOwnProperty(attr)) {tag attr attributes[attr] ;}}tag text / tagName ;return tag;
}
这么做的好处是兼容性高 灵活性强原生JS即可支持但是其缺点是使JS语法以及CSS样式的隔离变得困难代码可读性和可维护性降低最终也被摒弃。
那么回到新生代的web components它能解决什么问题又有什么注意点感兴趣的话就接着往下看吧
概述
自定义元素Custom Elements在许多框架和UI组件中广泛使用比如elementUI el-xxx/el-xxxvantvan-xxx /等。开发者可以通过创建自定义的HTML元素使其在页面中表现和使用类似于内置的HTML元素。开发者通过自定义元素创建自定义的HTML元素使其在页面中表现和使用类似于内置的HTML元素它是通过 JavaScript 创建一个自定义元素类并通过继承HTMLElement类来定义其行为和样式。
使用方式
创建标签
首先是创建标签通过继承HTMLElement类的方式来创建自定义标签的行为和样式。
在构造函数中可以进行自定义标签的初始化工作例如设置默认属性、添加事件监听器等
class MyCustomElement extends HTMLElement {constructor() {super();this.textContent my-custom-element// 自定义元素被创建时的初始化逻辑}
}
此外自定义标签类可以包含以下几种函数
连接回调connectedCallback自定义元素被插入到DOM树中时调用断开回调disconnectedCallback自定义元素从DOM树中删除时调用移动回调adoptedCallback当自定义元素被移动到新文档时调用属性变化回调attributeChangedCallback自定义元素的属性被添加、删除或修改时调用静态属性observedAttributes指定attributeChangedCallback要监听哪些属性的数组
使用示例可以参考以下代码具体效果及用法会在后文贴出
class MyCustomElement extends HTMLElement {constructor() {super();// 自定义元素被创建时的初始化逻辑this.textContent my-custom-element}connectedCallback() {// 元素被插入到DOM时调用console.log(元素被插入到DOM);}disconnectedCallback() {// 元素从DOM中移除时调用console.log(元素从DOM中移除);}adoptedCallback() {// 元素被移动到新文档时调用console.log(元素移动到新文档);}attributeChangedCallback(attrName, oldValue, newValue) {// 元素的属性被添加、删除或修改时调用console.log(${attrName}属性的旧值${oldValue}新值${newValue});}// 或使用静态属性代替get方法static get observedAttributes() {// 指定要监听的元素的属性数组return [name, date];}
}
定义标签
在创建标签后我们需要通过customElements.define来定义一个自定义标签
customElements.define(my-custom-element, MyCustomElement)
tips需要注意的是创建的标签的中间必须带 - 短横线与原生标签隔开比如custom-element而像customElement-customElementcustomElement-这几种是无法作为自定义名称使用的。
define函数可以传入三个参数第三个可选参数是ElementDefinitionOptions这个参数在使用自定义元素继承时才会用到当我们定义一个自定义元素时可以选择让它继承自内置的 HTML 元素。参考下面的代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleCustomElements/title
/headbodybutton ismy-custom-button/buttonscriptcustomElements.define(my-custom-button, class extends HTMLButtonElement {constructor() {super()this.textContent 按钮;}connectedCallback() {this.addEventListener(click, () console.log(点击了))}}, { extends: button })// 继承自原生的按钮标签/script
/body/html
需要注意的是 自定义标签类同样需要继承于对应的HTML标签类比如HTMLButtonElement其次在标签中使用时需要增加is属性相当于是对button进行拓展
使用标签
使用自定义元素的方式有两种分别是通过document.createElement(my-custom-element)和直接在页面中使用my-custom-element/my-custom-element标签这和原生语法一致只需要把常用的divaspan等标签换成自定义的标签即可
bodymy-custom-elementmy-custom-element/my-custom-elementscriptconst ele document.createElement(my-custom-element)ele.textContent my-custom-elementdocument.body.appendChild(ele)/script
/body
获取标签
通过customElements.get(elemName)可以获取标签为elemName的自定义标签类如果在定义之前获取则显示未定义
console.log(customElements.get(elemName));// undefined
customElements.define(elemName, MyCustomElement)
console.log(customElements.get(elemName).name);// class MyCustomElement extends HTMLElement {...}
异步定义标签
使用customElements.whenDefined(elemName)函数可以在标签定义时触发回调函数
setTimeout(() {customElements.define(elemName, MyCustomElement)
}, 1000)
customElements.whenDefined(elemName).then(console.log)// class MyCustomElement
console.log(customElements.get(elemName));// undefined
升级标签
升级标签的目的是将自定义标签ele和自定义标签的构造函数或类MyCustomElement进行绑定使标签ele可以访问类MyCustomElement的属性及方法。通过customElements.upgrade(ele)函数可以对自定义标签进行升级操作
class MyCustomElement extends HTMLElement {bgColor redconstructor() {super();}
}
const elemName my-custom-element
const ele document.createElement(elemName)
customElements.define(elemName, MyCustomElement)
console.log(Reflect.ownKeys(ele), ele.bgColor);// [] undefined
customElements.upgrade(ele);// 升级ele使其与自定义标签类绑定也就是说可以访问MyCustomElement的属性及方法
console.log(Reflect.ownKeys(ele), ele.bgColor);// [bgColor] red
完整案例
最后我们结合上面的知识点实现一个完整的自定义标签的示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleCustomElements/title
/headbodyiframe src./temp.html width100 height100/iframescriptconst elemName my-custom-elementconst ele document.createElement(elemName)const iframeEle document.querySelector(iframe)class MyCustomElement extends HTMLElement {bgColor redconstructor() {super();// 自定义元素被创建时的初始化逻辑this.textContent elemName}connectedCallback() {// 元素被插入到DOM时调用console.log(元素被插入到DOM);}disconnectedCallback() {// 元素从DOM中移除时调用console.log(元素从DOM中移除);}adoptedCallback() {// 元素被移动到新文档时调用console.log(元素移动到新文档);}attributeChangedCallback(attrName, oldValue, newValue) {// 元素的属性被添加、删除或修改时调用console.log(${attrName}属性的旧值${oldValue}新值${newValue});}// 或使用静态属性代替get方法static get observedAttributes() {// 指定要监听的元素的属性数组return [name, date];}}customElements.whenDefined(elemName).then(() {const tempBox iframeEle.contentDocument // 获取iframe的domdocument.body.appendChild(ele)// 元素被插入到DOMele.setAttribute(name, elemName)// name属性的旧值null新值my-custom-elementele.setAttribute(date, date)// date属性的旧值null新值dateele.setAttribute(name, my-custom-element2)// name属性的旧值my-custom-element新值my-custom-element2ele.remove()// 元素从DOM中移除// 元素移动到新文档通过iframe进行举例tempBox.body.appendChild(tempBox.adoptNode(ele))// 元素被插入到DOM})// 异步检查自定义标签定义标签定义时触发该函数console.log(customElements.get(elemName));// 获取自定义标签此时未定义console.log(ele instanceof MyCustomElement); // falseiframeEle.onload () {setTimeout(() {// 加个setTimeout明显一点customElements.define(elemName, MyCustomElement)console.log(Reflect.ownKeys(ele), ele.bgColor);// [] undefinedcustomElements.upgrade(ele);// 升级ele使其与自定义标签类绑定也就是说可以访问MyCustomElement的属性及方法console.log(Reflect.ownKeys(ele), ele.bgColor);// [bgColor] redconsole.log(ele instanceof MyCustomElement);// trueconsole.log(customElements.get(elemName).name);// MyCustomElement 获取自定义标签此时已定义}, 1000);}/script
/body/html
上述代码展示了一个简单的自定义元素的定义和使用过程包括自定义元素的构造函数、移动、生命周期回调方法以及属性变化回调方法的使用以及customElements中的几种方法
结语
Custom Elements允许我们创建自定义的HTML元素使其在页面中表现和使用类似于内置的HTML元素。我们可以通过继承HTMLElement类来定义自定义元素的行为和样式并在构造函数中进行初始化工作。通过类的机制我们可以达到复用自定义元素的目的。后面的系列文章我会基于其强大的Api与Shadow DOM和HTML Templates实现组件化效果敬请期待。
文章到这也就结束了感谢你的阅读如果觉得文章对你有帮助的话还望三连支持一下作者感谢
相关代码
WebComponents/CustomElements.html · 阿宇的编程之旅/myCode - Gitee.com
参考文章
Web components
Web Component - Web API 接口参考 | MDN
