微服务实践和总结

H5原生组件web Component

Web Component 是一种用于构建可复用用户界面组件的技术,开发者可以创建自定义的 HTML 标签,并将其封装为包含逻辑和样式的独立组件,从而在任何 Web 应用中重复使用。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>web Component原生组件</title></head><body><m-button type="primary">webComponent</m-button><template id="m-btn"><button class="m-button"><slot>Default</slot></button></template><template id="m-btn"><style type="text/css">.m-button {width: 100%;border: 1px solid #ebebeb;}</style><div class="m-collapse"><slot></slot></div></template><script type="text/javascript">class 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 html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Web Components</title><style>h1 {font-size: 20px;color: yellow;} </style></head><body><div></div><hello-world></hello-world><h1>Hello World! 外部</h1><script type="module">class 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 = `<h1>Hello World! 自定义组件内部</h1>`;this.appendChild(s);this.appendChild(d);}tag = 'hello-world'say(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 lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Components</title>
<style>h1 {font-size: 20px;color: yellow;
} </style>
</head>
<body><div></div><hello-world></hello-world><h1>Hello World! 外部</h1><script type="module"> class HelloWorld extends HTMLElement {constructor() {super();this.attachShadow({ mode: 'open' });this.shadowRoot.innerHTML = `<style>h1 {font-size: 30px;display: block;padding: 10px;background-color: #eee;}</style><h1>Hello World! 自定义组件内部</h1>`;}tag = 'hello-world'say(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>

HTML 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 name='app1' // name(必传):应用名称  url='http://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 标签。我们可以从 中拿到子应用的线上入口地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/875588.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css in js 相比较 css modules 有什么好处?

CSS-in-JS 和 CSS Modules 都是用于管理 React 组件样式的流行方案&#xff0c;它们各有优势。相比 CSS Modules&#xff0c;CSS-in-JS 的主要好处包括: 动态样式&#xff1a;CSS-in-JS 可以轻松创建基于 props 或状态的动态样式&#xff0c;更灵活地处理复杂的样式逻辑。 无需…

【vue3|第18期】Vue-Router路由的三种传参方式

日期:2024年7月17日 作者:Commas 签名:(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释:如果您觉得有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^ 1.01365 = 37.7834;0.99365 = 0.0255 1.02365 = 1377.408…

EtherNet/IP网络基础

EtherNet/IP&#xff08;Ethernet Industrial Protocol&#xff09;是一种用于工业自动化的通信协议&#xff0c;基于以太网技术。它允许设备和控制系统之间进行高效的数据交换和通信。以下是EtherNet/IP网络的基础知识。 1. 什么是EtherNet/IP&#xff1f; EtherNet/IP是由O…

ctfshow SSTI注入 web369--web372

web369 这把request过滤了&#xff0c;只能自己拼字符了 ""[[__clas,s__]|join] 或者 ""[(__clas,s__)|join] 相当于 ""["__class__"]举个例子&#xff0c;chr(97) 返回的是字符 a&#xff0c;因为 97 是小写字母 a 的 Unicode 编码…

go操作aws s3

v2 官方推荐版本&#xff0c;需要go版本>1.20 安装 go get github.com/aws/aws-sdk-go-v2 go get github.com/aws/aws-sdk-go-v2/config go get github.com/aws/aws-sdk-go-v2/service/s3必要参数 bucket: 存储桶的名称 Region: 存储桶所在区域,例us-east-1 accessKey…

PHP运算符

PHP 运算符是用于执行各种操作&#xff08;如算术运算、比较、逻辑运算、字符串连接等&#xff09;的符号。在 PHP 中&#xff0c;运算符的命名主要是基于它们的功能和用法&#xff0c;而不是像变量或函数那样可以自定义名称。以下是一个关于 PHP 运算符的详细教程&#xff0c;…

unity2D游戏开发01项目搭建

1新建项目 选择2d模板,设置项目名称和存储位置 在Hierarchy面板右击&#xff0c;create Empty 添加组件 在Project视图中右键新建文件夹 将图片资源拖进来&#xff08;图片资源在我的下载里面&#xff09; 点击Player 修改属性&#xff0c;修好如下 点击Sprite Editor 选择第二…

Angular由一个bug说起之八:实践中遇到的一个数据颗粒度的问题

互联网产品离不开数据处理&#xff0c;数据处理有一些基本的原则包括&#xff1a;准确性、‌完整性、‌一致性、‌保密性、‌及时性。‌ 准确性&#xff1a;是数据处理的首要目标&#xff0c;‌确保数据的真实性和可靠性。‌准确的数据是进行分析和决策的基础&#xff0c;‌因此…

【目标检测】非极大值抑制(Non-Maximum Suppression, NMS)步骤与实现

步骤 置信度排序&#xff1a;首先根据预测框的置信度&#xff08;即预测框包含目标物体的概率&#xff09;对所有预测框进行降序排序。选择最佳预测框&#xff1a;选择置信度最高的预测框作为参考框。计算IoU&#xff1a;计算其他所有预测框与参考框的交并比&#xff08;Inter…

【数据结构】建堆算法复杂度分析及TOP-K问题

【数据结构】建堆算法复杂度分析及TOP-K问题 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;数据结构 文章目录 【数据结构】建堆算法复杂度分析及TOP-K问题前言一.复杂度分析1.1向下建堆复杂度1.2向上建堆复杂度1.3堆排序复杂度 二.TOP-K问…

深度学习1-简介

人工智能&#xff08;AI&#xff09;旨在打造模仿智能行为的系统。它覆盖了众多方法&#xff0c;涵盖了基于逻辑、搜索和概率推理的技术。机器学习是 AI 的一个分支&#xff0c;它通过对观测数据进行数学模型拟合来学习决策制定。这个领域近年来迅猛发展&#xff0c;现在几乎&a…

前端地位蹭蹭蹭Up!!!

作者&#xff1a;溪饱鱼 链接&#xff1a;juejin.cn/post/7283642910301192244 顺便吆喝一句&#xff0c;如果你本科学历&#xff0c;对技术大厂有向往&#xff0c;对前后端测试岗位有兴趣&#xff0c;不对大厂外包有100%的排斥&#xff0c;可以看看这里&#xff0c;薪酬待遇确…

Ruby语言详解

Ruby语言详解 Ruby&#xff0c;作为一种简单快捷的面向对象脚本语言&#xff0c;自20世纪90年代由日本人松本行弘&#xff08;Yukihiro Matsumoto&#xff09;开发以来&#xff0c;便以其独特的魅力和强大的功能赢得了全球开发者的青睐。Ruby不仅继承了Perl、Smalltalk、Eiffe…

​ ​【Linux】-----工具篇(多模式编辑器vim介绍及配置)

目录 认识常用三种模式 基本操作 Ⅰ、进入/打开vim Ⅱ、模式转换 Ⅲ、退出vim 命令集 Ⅰ、命令模式下 移动光标 删除文字 复制 替换 撤销 批量化注释 批量化去注释 Ⅱ、底行模式下 列出行号 跳转至指定行 查找字符 保存文件 退出vim 查看文件 分屏操作 vim的简…

论文阅读:面向自动驾驶场景的多目标点云检测算法

论文地址:面向自动驾驶场景的多目标点云检测算法 概要 点云在自动驾驶系统中的三维目标检测是关键技术之一。目前主流的基于体素的无锚框检测算法通常采用复杂的二阶段修正模块,虽然在算法性能上有所提升,但往往伴随着较大的延迟。单阶段无锚框点云检测算法简化了检测流程,…

CUE-云原生配置语言

CUE 是一种服务于云化配置的强类型配置语言&#xff0c;由 Go team 成员 Marcel van Lohiuzen 结合 BCL 及多种其他语言研发并开源&#xff0c;可以说是 BCL 思路的开源版实现CUE 是一种服务于云化配置的强类型配置语言&#xff0c;由 Go team 成员 Marcel van Lohiuzen 结合 B…

AI OS

一&#xff0c;概念 AI OS, 或AI for OS&#xff0c;也就是近一年来伴随着人工智能的热度而衍生出的一个新的概念 - 人工智能操作系统。 为什么提出AI OS的概念&#xff1f; 这是因为人工智能技术的发展势头太过迅猛&#xff0c;尤其在深度学习、大模型等AI技术的突破后&…

微信小程序:vant-weapp 组件库、css 变量

vant-weapp 组件库 前往 vant-weapp 官网 npm 使用限制&#xff1a;不支持依赖于 Node.js 内置库、浏览器内置对象、C 插件 的包。 安装 vant-weapp # 通过 npm 安装 npm i vant/weapp -S --production# 通过 yarn 安装 yarn add vant/weapp --production# 安装 0.x 版本 npm i…

Mac环境报错 error: symbol(s) not found for architecture x86_64

Mac 环境Qt Creator报错 error: symbol(s) not found for architecture x86_64 错误信息 "symbol(s) not found for architecture x86_64" 通常是在编译或链接过程中出现的问题。这种错误提示通常涉及到符号未找到或者是因为编译器没有找到适当的库文件或函数定义。 …

powe bi界面认识及矩阵表基本操作 - 1

powe bi界面认识及矩阵表操作 1. 界面认识1.1 选择数据源1.2 选择相关表及点击加载1.3 表字段显示位置1.4 表属性按钮位置1.5 界面布局按钮认识 2. 矩阵表基本操作2.1 选择矩阵表2.2 创建矩阵表2.3 设置字体大小2.4 行填充&#xff1a;修改高度2.5 列宽&#xff1a;设置列的宽度…