做企业网站制作,北京朝阳区最新通知,wordpress single_post_title,销售外包团队H5原生组件web Component
Web Component 是一种用于构建可复用用户界面组件的技术#xff0c;开发者可以创建自定义的 HTML 标签#xff0c;并将其封装为包含逻辑和样式的独立组件#xff0c;从而在任何 Web 应用中重复使用。
!DOCTYPE html
htmlhead…H5原生组件web Component
Web Component 是一种用于构建可复用用户界面组件的技术开发者可以创建自定义的 HTML 标签并将其封装为包含逻辑和样式的独立组件从而在任何 Web 应用中重复使用。
!DOCTYPE html
htmlheadmeta charsetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1 /titleweb Component原生组件/title/headbodym-button typeprimarywebComponent/m-buttontemplate idm-btnbutton classm-buttonslotDefault/slot/button/templatetemplate idm-btnstyle typetext/css.m-button {width: 100%;border: 1px solid #ebebeb;}/stylediv classm-collapseslot/slot/div/templatescript typetext/javascriptclass MButton extends HTMLElement {constructor() {super()let btnTmpl document.getElementById(m-btn) // 定义模板并获取模板let shadow this.attachShadow({ mode: open }) // 配置 devtools 是否可查看 DOM 结构open / closelet cBtnTmpl btnTmpl.content.cloneNode(true) // copy 模板便于重用cBtnTmpl.querySelector(.m-button).addEventListener(click, this.onClick)shadow.appendChild(cBtnTmpl) // 模板挂载 Shadow DOM}static get observedAttributes() {return [type] // 监控 type 属性是否改变}connectedCallback() {// 组件首次挂载时调用}attributeChangedCallback(key, oldValue, newValue) {// 组件更新时调用key 为属性名oldValue, newValue 为属性值}disconnectedCallback() {// 组件移除时调用}}/script/body
/html
Shadow DOM
Shadow DOM 是 DOM nodes 的附属树。这种 Shadow DOM 子树可以与某宿主元素相关联但并不作为该元素的普通子节点而是会形成其自有的作用域Shadow DOM 中的根及其子节点也不可见。
不使用Shadow DOM
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleWeb Components/titlestyleh1 {font-size: 20px;color: yellow;} /style/headbodydiv/divhello-world/hello-worldh1Hello World! 外部/h1script typemoduleclass HelloWorld extends HTMLElement {constructor() {super();// 关闭 shadow DOM// this.attachShadow({ mode: open });const d document.createElement(div);const s document.createElement(style);s.innerHTML h1 {display: block;padding: 10px;background-color: #eee;}d.innerHTML h1Hello World! 自定义组件内部/h1;this.appendChild(s);this.appendChild(d);}tag hello-worldsay(something) {console.log(hello world, I want to say ${this.tag} ${something})}}window.customElements.define(hello-world, HelloWorld);const hw document.querySelector(hello-world); hw.say(good);/script/body/html使用 Shadow DOM
!DOCTYPE html
html langen
head
meta charsetUTF-8 /
meta nameviewport contentwidthdevice-width, initial-scale1.0 /
titleWeb Components/title
styleh1 {font-size: 20px;color: yellow;
} /style
/head
bodydiv/divhello-world/hello-worldh1Hello World! 外部/h1script typemodule class HelloWorld extends HTMLElement {constructor() {super();this.attachShadow({ mode: open });this.shadowRoot.innerHTML styleh1 {font-size: 30px;display: block;padding: 10px;background-color: #eee;}/styleh1Hello World! 自定义组件内部/h1;}tag hello-worldsay(something) {console.log(hello world, I want to say ${this.tag} ${something})}}window.customElements.define(hello-world, HelloWorld);const hw document.querySelector(hello-world); hw.say(good); /script
/body
/htmlHTML templates 和 slot 元素允许开发者在 HTML 中定义一个模板其中可以包含任意的 HTML 结构、文本和变量占位符。此元素及其内容不会在 DOM 中呈现但仍可使用 JavaScript 去引用它。
微前端
回顾微前端的历史最早的时候我们是利用 iframe 嵌入一个网页这就是微前端的雏形。虽然接入时方便快捷但它也存在一系列缺点如
路由状态丢失刷新一下iframe 的 url 状态就丢失了dom 割裂严重弹窗只能在 iframe 内部展示无法覆盖全局通信非常困难只能通过 postmessage 传递序列化的消息白屏时间太长对于有性能要求的应用来说无法接受
微前端的特点
路由隔离、js隔离、css隔离、预加载机制、通信机制、多微应用激活
import microApp from micro-zoe/micro-app;
microApp.start();export function MyPage () {return (div h1子应用/h1 micro-app nameapp1 // name(必传)应用名称 urlhttp://localhost:3000/ // url(必传)应用地址会被自动补全为http://localhost:3000/index.html baseroute/my-page // baseroute(可选)基座应用分配给子应用的基础路由就是上面的 /my-page/micro-app /div )}
js隔离沙箱
export class SnapShot {
proxy: Window typeof globalThis
constructor () { this.proxy window
}
// 沙箱激活
active () { // 创建一个沙箱快照 this.snapshot new Map() // 遍历全局环境 for (const key in window) { this.snapshot[key] window[key] }
}
// 沙箱销毁
inactive () { for (const key in window) { if (window[key] ! this.snapshot[key]) { // 还原操作 window[key] this.snapshot[key] } } }}
microApp 使用过程中碰到的问题
webpack-dev-server中添加headers解决父应用引入子应用不同域名跨域问题 headers: {Access-Control-Allow-Origin: *,}原理解析
当调用 microApp.start() 后会注册一个名为 micro-app 的自定义 webComponent 标签。我们可以从 中拿到子应用的线上入口地址
