当前位置： 首页 > news >正文

微服务实践和总结

news 2026/5/16 5:56:26

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 标签。我们可以从 中拿到子应用的线上入口地址

相关文章：

微服务实践和总结

H5原生组件web Component Web Component 是一种用于构建可复用用户界面组件的技术&#xff0c;开发者可以创建自定义的 HTML 标签&#xff0c;并将其封装为包含逻辑和样式的独立组件&#xff0c;从而在任何 Web 应用中重复使用。 <!DOCTYPE html> <html><head…...

编程日记 2024/7/27 4:14:16

Spring Boot中的策略模式：优雅地处理不同商品类型的订单

引言 在开发复杂的业务系统时&#xff0c;我们经常会遇到需要根据不同条件执行不同逻辑的情况。例如&#xff0c;在电商平台中&#xff0c;可能需要根据商品的不同类型&#xff08;如电子产品、服装、食品等&#xff09;来执行不同的业务逻辑&#xff0c;比如不同的库存管理、…...

编程日记 2024/7/27 4:10:13

django_创建菜单（实现整个项目的框架，调包）

文章目录 前言代码仓库地址在线演示网址启动网站的时候出现错误渲染路径的一些说明文件结构网页显示一条错误路由顺序js打包出现问题的代码函数没有起作用关于进度开发细节显示不了图片梳理一下函数调用的流程修改一些宽度参数classjs 里面的一些细节让三个按钮可以点击设置按钮…...

编程日记 2024/7/27 4:09:12

最新全新UI异次元荔枝V4.4自动发卡系统源码

简介&#xff1a; 最新全新UI异次元荔枝V4.4自动发卡系统源码 更新日志&#xff1a; 1增加主站货源系统 2支持分站自定义支付接口 3目前插件大部分免费 4UI页面全面更新 5分站可支持对接其他分站产品 6分站客服可自定义 7支持限定优惠 图片&#xff1a; 会员中心截图&…...

编程日记 2024/7/27 4:05:08

PyTorch安装CUDA标准流程（可解决大部分GPU无法使用问题）

最近一段时间在研究PyTorch中的GPU的使用方法&#xff0c;之前曾经安装过CUDA&#xff0c;不过在PyTorch中调用CUDA时无法使用。考虑到是版本不兼容问题&#xff0c;卸载后尝试了其他的版本&#xff0c;依旧没有能解决问题&#xff0c;指导查阅了很多资料后才找到了解决方案。 …...

编程日记 2024/7/27 4:03:05

C++从入门到起飞之——初始化列表类型转换static成员 全方位剖析！

&#x1f308;个人主页&#xff1a;秋风起&#xff0c;再归来~&#x1f525;系列专栏&#xff1a;C从入门到起飞 &#x1f516;克心守己&#xff0c;律己则安 目录 1、初始化列表 2、 类型转换 3. static成员 4、完结散花 1、初始化列表 • 之前我们实现构造函数…...

编程日记 2024/7/27 3:59:02

PHP框架简介

PHP是一种广泛使用的开源脚本语言&#xff0c;主要用于Web开发&#xff0c;它可以创建动态交互式Web页面。而PHP框架则是一套用于开发Web应用程序的工具和库的集合&#xff0c;它可以帮助开发者更高效地编写PHP代码&#xff0c;提高开发速度和代码的可维护性。 理解PHP框架&am…...

编程日记 2024/7/27 3:57:00

微信小程序-粘性组件

再次完善&#xff1a;将区域设置为粘性时&#xff0c;会脱离原有文档&#xff0c;使得出现下方页面突然遮盖一部分&#xff0c;不平滑 解决&#xff1a;给出一个新的空白区域&#xff0c;宽高与粘性区域一致&#xff0c;wx:if 控制其显示 /****************/ 后续补充&#…...

编程日记 2024/7/27 3:55:58

微服务注册中心

目录 1.微服务的注册中心 1.1 注册中⼼的主要作⽤ 1.2 常⻅的注册中⼼ 2.nacos简介 2.1 nacos实战⼊⻔ 2.2.1 搭建nacos环境 2.2.2 将商品微服务注册到nacos 3.服务调⽤Ribbon⼊⻔ 3.1 Ribbon概述 3.1.1 什么是Ribbon 3.1.2 Ribbon的主要作⽤ 3.2.2 ⼯程改造 4.服务…...

编程日记 2024/7/27 3:54:58

HDU1032——The 3n + 1 problem，HDU1033——Edge，HDU1034——Candy Sharing Game

目录 HDU1032——The 3n 1 problem 题目描述 运行代码 代码思路 HDU1033——Edge 题目描述 运行代码 代码思路 HDU1034——Candy Sharing Game 题目描述 运行代码 代码思路 HDU1032——The 3n 1 problem 题目描述 Problem - 1032 运行代码 #include <iostr…...

编程日记 2024/7/27 3:53:56

内网对抗-隧道技术篇防火墙组策略HTTP反向SSH转发出网穿透CrossC2解决方案

知识点&#xff1a; 1、C2/C2上线-CrossC2插件-多系统平台支持 2、隧道技术篇-应用层-SSH协议-判断&封装&建立&穿透 3、隧道技术篇-应用层-HTTP协议-判断&封装&建立&穿透隧道技术主要解决网络通讯问题&#xff1a;遇到防火墙就用隧道技术&#xff0c;…...

编程日记 2024/7/27 3:51:55

实战案例：如何用ChatGPT生成适合不同领域的高质量文章

随着人工智能技术的快速进展&#xff0c;制作高质量文章已变得轻而易举。尤其是OpenAI推出的ChatGPT&#xff0c;极大地简化了写作任务。接下来&#xff0c;本文将通过具体案例&#xff0c;详解如何利用ChatGPT撰写不同领域的高品质文章。 背景&#xff1a;光辉AI交流-免费问答…...

编程日记 2024/7/27 3:48:51

多线程案例-单例模式

单例模式是设计模式之一&#xff0c;能保证某个类在程序中只存在唯一一份实例&#xff0c;而不会创建出多个实例 单例模式的具体实现方法有很多&#xff0c;最常见的是 “饿汉” 和 “懒汉” 两种。 饿汉模式 class Singlenton{private static Singlenton instance new Sin…...

编程日记 2024/7/27 3:45:48

P6 优化篇 - 数据折线图可视化步骤

增加新页面, 则需要在 page.json里面增加页面信息 2.添加目录, 和路径 同时也要添加目录了 , 新建目录LineChart , 添加文件LineChart.vue 4.LineChart.vue 直接复制黏贴 <template><view class"container"><!-- 图表显示区域 --><view cla…...

编程日记 2024/7/27 3:44:46

优选算法之二分查找（上）

目录 一、二分查找 1.题目链接&#xff1a;704. 二分查找 2.题目描述&#xff1a; 3.算法流程&#xff1a; 4.算法代码&#xff1a; 二、在排序数组中查找元素的第一个和最后一个位置 1.题目链接&#xff1a;34. 在排序数组中查找元素的第一个和最后一个位置 2.题目描述…...

编程日记 2024/7/27 3:42:45

JavaScript(16)——定时器-间歇函数

开启定时器 setInterval(函数,间隔时间) 作用&#xff1a;每隔一段时间调用这个函数&#xff0c;时间单位是毫秒 例如&#xff1a;每一秒打印一个hello setInterval(function () { document.write(hello ) }, 1000) 注&#xff1a;如果是具名函数的话不能加小括号&#xf…...

编程日记 2024/7/27 3:40:42

VUE中的重点*

1.MVC 和 MVVM的区别&#xff1f; MVC&#xff1a;M&#xff08;model数据&#xff09;、V&#xff08;view视图&#xff09;&#xff0c;C&#xff08;controlle控制器&#xff09; 缺点是前后端无法独立开发&#xff0c;必须等后端接口做好了才可以往下走&#xff1b; 前端没…...

编程日记 2024/7/27 3:38:40

rabbitmq生产与消费

一、rabbitmq发送消息 一、简单模式 概述 一个生产者一个消费者模型 代码 //没有交换机&#xff0c;两个参数为routingKey和消息内容 rabbitTemplate.convertAndSend("test1_Queue","haha");二、工作队列模式 概述 一个生产者&#xff0c;多个消费者&a…...

编程日记 2024/7/27 3:32:34

spring-boot3.x整合Swagger 3 (OpenAPI 3) +knife4j

1.简介 OpenAPI阶段的Swagger也被称为Swagger 3.0。在Swagger 2.0后&#xff0c;Swagger规范正式更名为OpenAPI规范&#xff0c;并且根据OpenAPI规范的版本号进行了更新。因此&#xff0c;Swagger 3.0对应的就是OpenAPI 3.0版本&#xff0c;它是Swagger在OpenAPI阶段推出的一个…...

编程日记 2024/7/27 3:31:33

SM2隐式证书用户公私钥生成python代码实现

GMT0130-2023具体描述基于SM2算法的隐式证书公钥机制&#xff0c;这里尝试Python代码实现密钥生成部分功能&#xff0c;具体如下&#xff0c;椭圆曲线计算实现使用python第三方包gmssl。 #生成用户私钥Da和公钥Pa&#xff0c;其中Da&#xff08;tAdA)mod N&#xff0c;Pa可以直…...

编程日记 2024/7/27 3:29:31

大厂4年经验Java面试题深入解析（10道）

大厂 4 年经验 Java 面试题深入解析&#xff08;10 道&#xff09; 这篇文章不是面向校招&#xff0c;也不是面向只会背八股的初级候选人&#xff0c;而是针对已经有 4 年左右实际项目经验、准备冲击大厂的 Java 工程师。 大厂面试更看重你是否能把基础原理、线上问题、设计取舍…...

编程新知 2026/5/16 5:03:14

STEMMA继电器模块实战指南：安全连接微控制器与强电设备

1. 项目概述&#xff1a;从微控制器到物理世界的开关如果你玩过Arduino或者树莓派&#xff0c;肯定有过这样的想法&#xff1a;能不能用我写的几行代码&#xff0c;去控制一下家里的台灯、风扇&#xff0c;甚至是鱼缸的氧气泵&#xff1f;这个想法背后&#xff0c;其实是一个经…...

编程新知 2026/5/16 5:01:11

Chunkhound：基于语义块与统一IR的智能代码理解框架解析

1. 项目概述&#xff1a;从“代码块猎犬”到智能代码理解 最近在琢磨一个挺有意思的开源项目&#xff0c;叫 chunkhound/chunkhound 。光看名字&#xff0c;你可能会联想到某种嗅觉灵敏的猎犬&#xff0c;没错&#xff0c;它的定位就是代码世界里的“猎犬”&#xff0c;专门负…...

编程新知 2026/5/16 3:13:14

思源宋体CN终极指南：7种字重免费商用中文字体快速上手完整教程

思源宋体CN终极指南&#xff1a;7种字重免费商用中文字体快速上手完整教程 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 还在为商业项目中文字体版权问题而烦恼吗&#xff1f;思源宋…...

编程新知 2026/5/16 2:52:46

量子计算中的辛基理论与MBQC实现

1. 量子计算中的辛基基础概念在量子计算领域&#xff0c;辛基&#xff08;Symplectic Basis&#xff09;是描述多量子比特系统的重要数学工具。它本质上是一个满足特定对易关系的基组&#xff0c;能够简洁地表示量子态和量子操作。理解辛基需要从有限域上的向量空间开始——具体…...

编程新知 2026/5/16 2:48:35

SPI驱动NeoPixel：硬件时序优化与跨平台控制方案

1. 项目概述&#xff1a;当NeoPixel遇上SPI&#xff0c;一个关于时序的优雅解法玩过智能LED&#xff0c;比如Adafruit的NeoPixel或者国内常见的WS2812B灯带的朋友&#xff0c;大概都体会过那种又爱又恨的感觉。爱的是它单线控制、色彩绚烂&#xff0c;恨的是那娇贵到令人头疼的…...

编程新知 2026/5/16 1:17:42

DLSS Swapper终极指南：5分钟快速上手游戏性能优化神器

DLSS Swapper终极指南&#xff1a;5分钟快速上手游戏性能优化神器 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper 你是否曾为游戏中的DLSS版本过旧而烦恼&#xff1f;是否厌倦了手动下载、替换DLSS文件的繁琐过程&…...

编程新知 2026/5/16 0:01:57

2026企业数字化必看：实在Agent订单数据处理智能助理实战及ERP自动录入教程

进入2026年&#xff0c;全球企业级自动化市场已完成从“流程驱动”向“智能体&#xff08;Agent&#xff09;驱动”的范式转移。根据Gartner与IDC在2025年底发布的联合报告显示&#xff0c;超过85%的500强企业已在其核心业务流程中部署了具备自主决策能力的数字员工。在这一背景…...

编程新知 2026/5/15 23:50:34

HarmonyOS 6 CustomDialog 嵌套弹窗使用文档

文章目录完整代码弹窗嵌套结构1. 弹窗层级关系2. 嵌套实现关键逻辑核心参数与API1. CustomDialog 装饰器2. CustomDialogController 弹窗控制器3. 关闭拦截 onWillDismiss4. 数据双向绑定 Link5. 生命周期管理总结完整代码 // xxx.ets CustomDialog struct CustomDialogExampl…...

编程新知 2026/5/15 22:06:25

260513实训：路由器连接

路由器工作原理&#xff1a; 转发动作&#xff1a;路由器收到数据后&#xff0c;根据目的IP地址查路由器路由表&#xff08;地图&#xff09;转发 路由表&#xff1a;路由器默认会将直连网段加入路由表 查看IP路由表&#xff1a;display ip routing-table 127.0.0.0/8 本地环…...

编程新知 2026/5/15 21:54:17