怎么看网站用的什么程序做的,wordpress分类目录层级,网站栏目建设评活动,企业解决单身问题方案前言
在前面Web Components系列文章的插槽中#xff0c;我们使用直接在body中写入html标签的形式来承载shadowDOM中的元素#xff0c;这么做会使标签在DOM多渲染一次#xff0c;不仅降低了性能#xff0c;还使标签直接暴露在页面中#xff0c;遵循组件的可重用性、隔离性…前言
在前面Web Components系列文章的插槽中我们使用直接在body中写入html标签的形式来承载shadowDOM中的元素这么做会使标签在DOM多渲染一次不仅降低了性能还使标签直接暴露在页面中遵循组件的可重用性、隔离性和封装性Web Components提供了一种模板标签template。它可以在DOM文档中定义模板然后可以通过JavaScript动态地填充和显示这些模板达到html组件封装的效果。
为什么使用模版 组件化开发人员可以将页面的不同部分封装为独立的组件使得代码更加模块化、可维护性更强。 可重用性 开发者可以定义一次模板然后在多个地方重复使用它而不必每次都编写相同的HTML和样式代码。 隔离性 每个模版标签都拥有其自己的作用域这意味着在一个模板中定义的样式和变量不会影响其他模板或全局作用域有助于避免命名冲突和其他不必要的影响。 封装性通过模版我们可以封装和隐藏组件的内部细节。外部代码只需要与模板中的公开接口交互而不需要关心内部实现。 提升性能 使用模板可以避免在页面加载时立即生成复杂的DOM结构从而提高初始加载性能。模板可以在需要时才填充和渲染减少不必要的资源消耗。
聊点题外的DocumentFragment可跳过
在之前的一篇实现mini-vue的文章中我们使用了标签碎片这个api了解到通过fragment创建的DOM节点不会直接渲染在真实的DOM中这点与templates标签类似。
DocumentFragment是什么它是一个轻量级的虚拟DOM容器通过它可以在内存中创建和操作DOM元素而不会影响外层的真实DOM。
使用DocumentFragment有什么好处当我们在真实DOM中频繁的操作真实DOM的属性或者样式时会使DOM不断的回流重绘十分影响网页性能。此时DocumentFragment就显得十分重要了通过fragment我们可以将对DOM的频繁操作在虚拟DOM中进行最后再将结果一次性放置真实DOM中提高性能和效率
更多的知识点在后续可能会写篇文章深入了解关于DocumentFragment就先讲这么多主要目的是为了更好的理解模版标签
模版的用法
言归正传在真实Dom中通过template/template来定义一个模版它可以包含htmlcss和js等等可以把它当成是一个私有的html页面。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML Templates/title
/headbodytemplate idmy-templatestyle/* 样式 */div {font-size: 20px;color: lightcoral;}/stylediv idcontent!-- 内容 --/divscriptdocument.querySelector(#content).textContent content/script/template
/body/html
虽然在html中使用template标签并不会在页面加载时渲染但是可以在需要时进行动态填充和渲染。
模板操作
通过template.content可以拿到模板标签的DOM内容接着使用document.importNode或者element.append将模板中的DOM添加到对应的真实DOM中思考下面的代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML Templates/title
/headbodydiv idtarget/divtemplate idmy-templatestyle/* 样式 */div {font-size: 20px;color: lightcoral;}/stylediv idcontent!-- 内容 --/divscriptdocument.querySelector(#content).textContent content/script/templatescriptconst temp document.querySelector(#my-template)const target document.querySelector(#target)target.append(temp.content)/script
/body/html
CustomElementsShadowDOMHTML Templates解锁完全体
前摇了这么久终于来到了template的核心用法结合之前的自定义标签和影子DOM我们可以解锁进阶用法或者说前面的标签都是刻意的避开了模板标签的写法参考下面的代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML Templates/title
/headbodymy-custom-element/my-custom-elementtemplate idmy-templatestyle/* 样式 */div {font-size: 20px;color: lightcoral;}/stylediv idcontent!-- 内容 --/divscript// 脚本ele.shadowRoot.querySelector(#content).textContent content/script/templatescriptconst temp document.querySelector(#my-template)const elemName my-custom-element;const ele document.querySelector(elemName);class MyCustomElement extends HTMLElement {constructor() {super();this.attachShadow({ mode: open });this.shadowRoot.appendChild(temp.content);}}customElements.define(elemName, MyCustomElement);/script
/body/html
可以看到template中的内容不会直接渲染在DOM中而是通过影子DOM的方式添加到自定义标签中它有自己的标签结构及样式需要注意的是script标签并不会被隔离它仍然相当于在全局的作用域下。解决方案有两个
使用IIFE在script中使用立即执行函数来限制标签的作用域使其只在标签内部生效
script(function () {const test test// 只在当前作用域下生效console.log(test);// test})()
/script
使用module给script标签加上typemodule的属性使标签以模块化脚本的形式存在
script typemoduleconst test test// 只在当前作用域下生效console.log(test);// test
/script
至此我们就基于CustomElementsShadowDOMHTML Templates完成了一个完整的Web Components组件的实现
写在最后
文章主要介绍了如何使用HTML Templates在Web组件中实现模板的隔离和私有化。文章提供了关于模板的基本用法、操作方法以及如何结合其他技术来实现高度隔离和封装的组件。
感谢你看到最后如果觉得文章不错的话给个三连鼓励一下吧谢谢
相关代码
myCode: 基于js的一些小案例或者项目 - Gitee.com
参考文章
修改文档document
模板元素
浅析MVVM原理实现一个mini-vue_阿宇的编程之旅的博客-CSDN博客
