工程化与框架系列(35)--前端微服务架构实践

前端微服务架构实践 🏗️

引言

随着前端应用规模的不断扩大,微服务架构在前端领域的应用越来越广泛。本文将深入探讨前端微服务架构的实现方案、最佳实践和相关工具。

微服务架构概述

前端微服务架构主要包括以下方面:

  • 应用拆分:基于业务域的应用拆分策略
  • 独立部署:各个微应用的独立开发、构建和部署
  • 运行时集成:微应用的加载、通信和生命周期管理
  • 共享资源:公共依赖、组件库、工具函数等的共享策略
  • 统一管理:路由、状态、权限等的统一管理方案

微服务架构实现

微前端容器

// 微前端容器类
class MicroFrontendContainer {private static instance: MicroFrontendContainer;private apps: Map<string, MicroApp>;private config: ContainerConfig;private constructor() {this.apps = new Map();this.config = {sandbox: true,prefetch: true,isolation: 'iframe',timeout: 3000};}// 获取单例实例static getInstance(): MicroFrontendContainer {if (!MicroFrontendContainer.instance) {MicroFrontendContainer.instance = new MicroFrontendContainer();}return MicroFrontendContainer.instance;}// 注册微应用registerApp(appConfig: MicroAppConfig): void {const app = new MicroApp(appConfig);this.apps.set(appConfig.name, app);// 预加载配置if (this.config.prefetch) {this.prefetchApp(app);}}// 启动微应用async startApp(name: string): Promise<void> {const app = this.apps.get(name);if (!app) {throw new Error(`App ${name} not found`);}try {// 加载微应用资源await this.loadApp(app);// 创建沙箱环境const sandbox = this.createSandbox(app);// 挂载微应用await this.mountApp(app, sandbox);// 初始化通信this.initCommunication(app);} catch (error) {console.error(`Failed to start app ${name}:`, error);throw error;}}// 停止微应用async stopApp(name: string): Promise<void> {const app = this.apps.get(name);if (!app) {throw new Error(`App ${name} not found`);}try {// 卸载微应用await this.unmountApp(app);// 清理沙箱this.cleanupSandbox(app);// 清理资源this.cleanupResources(app);} catch (error) {console.error(`Failed to stop app ${name}:`, error);throw error;}}// 预加载微应用private async prefetchApp(app: MicroApp): Promise<void> {try {const resources = await this.loadResources(app.config.entry);app.setResources(resources);} catch (error) {console.warn(`Failed to prefetch app ${app.config.name}:`, error);}}// 加载微应用资源private async loadApp(app: MicroApp): Promise<void> {if (app.isLoaded()) {return;}const resources = app.getResources() || await this.loadResources(app.config.entry);await this.injectResources(resources);app.setLoaded(true);}// 加载资源private async loadResources(entry: string): Promise<AppResources> {const response = await fetch(entry);const html = await response.text();return {scripts: this.extractScripts(html),styles: this.extractStyles(html),templates: this.extractTemplates(html)};}// 注入资源private async injectResources(resources: AppResources): Promise<void> {// 注入样式await Promise.all(resources.styles.map(style => this.loadStyle(style)));// 注入脚本await Promise.all(resources.scripts.map(script => this.loadScript(script)));}// 创建沙箱环境private createSandbox(app: MicroApp): Sandbox {if (this.config.isolation === 'iframe') {return new IframeSandbox(app);} else {return new JsSandbox(app);}}// 挂载微应用private async mountApp(app: MicroApp,sandbox: Sandbox): Promise<void> {const mountPoint = document.querySelector(app.config.container);if (!mountPoint) {throw new Error(`Mount point ${app.config.container} not found`);}// 执行生命周期钩子await app.beforeMount();// 在沙箱中执行挂载await sandbox.mount(mountPoint);// 更新应用状态app.setMounted(true);// 执行生命周期钩子await app.afterMount();}// 卸载微应用private async unmountApp(app: MicroApp): Promise<void> {if (!app.isMounted()) {return;}// 执行生命周期钩子await app.beforeUnmount();// 移除DOMconst container = document.querySelector(app.config.container);if (container) {container.innerHTML = '';}// 更新应用状态app.setMounted(false);// 执行生命周期钩子await app.afterUnmount();}// 清理沙箱private cleanupSandbox(app: MicroApp): void {const sandbox = app.getSandbox();if (sandbox) {sandbox.cleanup();}}// 清理资源private cleanupResources(app: MicroApp): void {const resources = app.getResources();if (resources) {// 移除样式resources.styles.forEach(style => {const element = document.querySelector(`link[href="${style}"]`);element?.remove();});// 移除脚本resources.scripts.forEach(script => {const element = document.querySelector(`script[src="${script}"]`);element?.remove();});}}// 初始化应用间通信private initCommunication(app: MicroApp): void {const eventBus = EventBus.getInstance();// 注册应用通信处理器app.setMessageHandler(message => {eventBus.emit(`${app.config.name}:message`, message);});// 监听其他应用消息this.apps.forEach(otherApp => {if (otherApp !== app) {eventBus.on(`${otherApp.config.name}:message`,message => {app.postMessage(message);});}});}
}// 微应用类
class MicroApp {private loaded: boolean = false;private mounted: boolean = false;private resources: AppResources | null = null;private sandbox: Sandbox | null = null;private messageHandler: MessageHandler | null = null;constructor(public config: MicroAppConfig) {}// 生命周期钩子async beforeMount(): Promise<void> {await this.invokeLifecycle('beforeMount');}async afterMount(): Promise<void> {await this.invokeLifecycle('afterMount');}async beforeUnmount(): Promise<void> {await this.invokeLifecycle('beforeUnmount');}async afterUnmount(): Promise<void> {await this.invokeLifecycle('afterUnmount');}// 调用生命周期函数private async invokeLifecycle(name: string): Promise<void> {const lifecycle = (window as any)[`${this.config.name}:${name}`];if (typeof lifecycle === 'function') {await lifecycle();}}// 状态管理isLoaded(): boolean {return this.loaded;}setLoaded(loaded: boolean): void {this.loaded = loaded;}isMounted(): boolean {return this.mounted;}setMounted(mounted: boolean): void {this.mounted = mounted;}// 资源管理getResources(): AppResources | null {return this.resources;}setResources(resources: AppResources): void {this.resources = resources;}// 沙箱管理getSandbox(): Sandbox | null {return this.sandbox;}setSandbox(sandbox: Sandbox): void {this.sandbox = sandbox;}// 消息通信setMessageHandler(handler: MessageHandler): void {this.messageHandler = handler;}postMessage(message: any): void {this.messageHandler?.(message);}
}// 沙箱基类
abstract class Sandbox {constructor(protected app: MicroApp) {}abstract mount(container: Element): Promise<void>;abstract cleanup(): void;
}// iframe沙箱
class IframeSandbox extends Sandbox {private iframe: HTMLIFrameElement | null = null;async mount(container: Element): Promise<void> {this.iframe = document.createElement('iframe');this.iframe.src = 'about:blank';this.iframe.style.width = '100%';this.iframe.style.height = '100%';this.iframe.style.border = 'none';container.appendChild(this.iframe);// 注入资源到iframeawait this.injectResources();}cleanup(): void {this.iframe?.remove();this.iframe = null;}private async injectResources(): Promise<void> {if (!this.iframe) return;const resources = this.app.getResources();if (!resources) return;const doc = this.iframe.contentDocument;if (!doc) return;// 注入样式resources.styles.forEach(style => {const link = doc.createElement('link');link.rel = 'stylesheet';link.href = style;doc.head.appendChild(link);});// 注入脚本for (const script of resources.scripts) {await new Promise((resolve, reject) => {const scriptElement = doc.createElement('script');scriptElement.src = script;scriptElement.onload = resolve;scriptElement.onerror = reject;doc.head.appendChild(scriptElement);});}}
}// JS沙箱
class JsSandbox extends Sandbox {private proxy: Window | null = null;async mount(container: Element): Promise<void> {// 创建代理对象this.proxy = new Proxy(window, {get: (target, property) => {// 处理特殊属性if (this.isProtected(property)) {return target[property as keyof Window];}// 返回沙箱中的值return (this.app as any)[property];},set: (target, property, value) => {// 禁止修改保护属性if (this.isProtected(property)) {return false;}// 设置值到沙箱(this.app as any)[property] = value;return true;}});// 在沙箱环境中执行代码this.executeInSandbox(() => {const resources = this.app.getResources();if (!resources) return;// 执行脚本resources.scripts.forEach(script => {const scriptElement = document.createElement('script');scriptElement.src = script;container.appendChild(scriptElement);});});}cleanup(): void {this.proxy = null;}private executeInSandbox(code: Function): void {if (!this.proxy) return;// 保存原始windowconst originalWindow = window;// 替换为代理对象(window as any) = this.proxy;try {// 执行代码code();} finally {// 恢复原始window(window as any) = originalWindow;}}private isProtected(property: string | symbol): boolean {// 保护的全局属性列表const protectedProps = ['window','document','location','history'];return protectedProps.includes(property.toString());}
}// 事件总线
class EventBus {private static instance: EventBus;private handlers: Map<string, Set<Function>>;private constructor() {this.handlers = new Map();}static getInstance(): EventBus {if (!EventBus.instance) {EventBus.instance = new EventBus();}return EventBus.instance;}on(event: string, handler: Function): void {if (!this.handlers.has(event)) {this.handlers.set(event, new Set());}this.handlers.get(event)?.add(handler);}off(event: string, handler: Function): void {this.handlers.get(event)?.delete(handler);}emit(event: string, data?: any): void {this.handlers.get(event)?.forEach(handler => {handler(data);});}
}// 接口定义
interface ContainerConfig {sandbox: boolean;prefetch: boolean;isolation: 'iframe' | 'js';timeout: number;
}interface MicroAppConfig {name: string;entry: string;container: string;props?: Record<string, any>;
}interface AppResources {scripts: string[];styles: string[];templates: string[];
}type MessageHandler = (message: any) => void;// 使用示例
const container = MicroFrontendContainer.getInstance();// 注册微应用
container.registerApp({name: 'app1',entry: 'http://localhost:3001',container: '#app1'
});container.registerApp({name: 'app2',entry: 'http://localhost:3002',container: '#app2'
});// 启动微应用
await container.startApp('app1');// 停止微应用
await container.stopApp('app1');

最佳实践与建议

  1. 应用拆分

    • 基于业务域划分
    • 合理粒度
    • 独立演进
    • 技术栈灵活
  2. 依赖管理

    • 共享依赖
    • 版本控制
    • 构建优化
    • 运行时加载
  3. 通信机制

    • 事件总线
    • 状态共享
    • 数据隔离
    • 安全控制
  4. 部署策略

    • 独立部署
    • 灰度发布
    • 版本控制
    • 回滚机制

总结

前端微服务架构需要考虑以下方面:

  1. 应用拆分和集成策略
  2. 资源加载和性能优化
  3. 应用通信和状态管理
  4. 部署和运维支持
  5. 开发和协作流程

通过合理的微服务架构设计,可以提高前端应用的可维护性和扩展性。

学习资源

  1. 微前端架构设计
  2. 模块联邦实践
  3. 沙箱隔离方案
  4. 性能优化指南
  5. 部署运维实践

如果你觉得这篇文章有帮助,欢迎点赞收藏,也期待在评论区看到你的想法和建议!👇

终身学习,共同成长。

咱们下一期见

💻

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

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

相关文章

OSPF | LSDB 链路状态数据库 / SPF 算法 / 实验

注&#xff1a;本文为 “OSPF | LSDB / SPF ” 相关文章合辑。 LSDB 和 SPF 算法 潇湘浪子的蹋马骨汤 发布 2019-02-15 23:58:46 1. 链路状态数据库 (LSDB) 链路状态协议除了执行洪泛扩散链路状态通告&#xff08;LSA&#xff09;以及发现邻居等任务外&#xff0c;其第三个任…

Android Framework 之了解系统启动流程二

Android Framework 源码阅读系列篇章有&#xff1a; 系统启动流程一之init进程和zygote进程启动分析系统启动流程二之SystemServer进程启动分析 1. SystemServer 进程启动分析 在 系统启动流程一之init进程和zygote进程启动分析 中分析 zygote 进程时&#xff0c;我们知道了…

阿里云企业邮箱出现故障怎么处理?

阿里云企业邮箱出现故障怎么处理&#xff1f; 以下是处理阿里云企业邮箱故障的详细分步指南&#xff0c;帮助您快速定位问题并恢复邮箱正常使用&#xff1a; 一、初步排查&#xff1a;确认故障范围与现象 确定影响范围 全体用户无法使用 → 可能为阿里云服务端故障或网络中断。…

Python----数据分析(Pandas二:一维数组Series,Series的创建,Series的属性,Series中元素的索引与访问)

一、一维数组Series Series&#xff1a;一维数组,与Numpy中的一维array类似。它是一种类似于一维数组的对象&#xff0c;是由一组数据(各种 NumPy 数据类型)以及一组与之相关的数据标签(即索引)组成。 仅由一组数据也可产生简单的 Series 对象&#xff0c;用值列表生成 Series …

小程序配置

注册小程序账号和安装开发工具 参考文档&#xff1a;注册小程序账号和安装开发工具https://blog.csdn.net/aystl_gss/article/details/127878658 HBuilder新建项目 填写项目名称&#xff0c;选择UNI-APP&#xff0c;修改路径&#xff0c;点击创建 manifest.json 配置 需要分别…

前端UI编程基础知识:基础三要素(结构→表现→行为)

以下是重新梳理的前端UI编程基础知识体系&#xff0c;结合最新技术趋势与实战要点&#xff0c;以更适合快速掌握的逻辑结构呈现&#xff1a; 一、基础三要素&#xff08;结构→表现→行为&#xff09; 1. HTML5 核心能力 • 语义化标签&#xff1a;<header>, <nav&g…

【eNSP实战】将路由器配置为DHCP服务器

拓图 要求&#xff1a; 为 office100 和 office200 分别配置地址池 AR1接口配置 interface GigabitEthernet0/0/0ip address 192.168.100.1 255.255.255.0 # interface GigabitEthernet0/0/1ip address 192.168.200.1 255.255.255.0 AR1路由器上创建office100地址池 [AR1…

Stable Diffusion 模型具体如何设置参数?

基础参数设置 随机种子&#xff08;seed&#xff09;&#xff1a;设置一个固定的随机种子值&#xff0c;可以确保在相同文本提示下生成相同的图像。如果设置为-1&#xff0c;则每次生成的图像都是随机的。 num_inference_steps&#xff1a;控制模型推理的步数。步数越多&#…

阿里云服务器购买及环境搭建宝塔部署springboot和vue项目

云服务器ECS_云主机_服务器托管_计算-阿里云 一、前言 对于新手或者学生党来说&#xff0c;有时候就想租一个云服务器来玩玩或者练练手&#xff0c;duck不必花那么多钱去租个服务器。这些云服务厂商对学生和新手还是相当友好的。下面将教你如何快速搭建自己的阿里云服务器&…

ABAP语言的动态编程(4) - 综合案例:管理费用明细表

本篇来实现一个综合案例&#xff1a;管理费用明细表。报表在实际项目中&#xff0c;也有一定的参考意义&#xff0c;一方面展示类似的报表&#xff0c;比如管理费用、研发费用等费用的明细&#xff0c;使用业务比较习惯的展示格式&#xff1b;另一方面正好综合运用前面学习的动…

【Python办公】Excel通用匹配工具(双表互匹)

目录 专栏导读1、背景介绍2、库的安装3、核心代码4、完整代码总结专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题,解放您的双手 🏳️‍🌈 博客主页:请点击——> 一晌小贪欢的博客主页求关注 👍 该系列文章专栏:请点击——>Python办公自动化专…

2025-03-15 吴恩达机器学习2——线性回归模型

文章目录 1 概述1.1 案例1.2 分析 2 代价函数2.1 代价函数公式2.2 理解代价函数2.3 可视化代价函数 3 梯度下降3.1 实现步骤3.2 理解梯度下降3.3 学习率 4 最佳实践4.1 导入数据4.2 代码实现4.3 可视化 1 概述 ​ 线性回归模型是使用最广泛的学习算法&#xff0c;让我们从一个…

Webpack 前端性能优化全攻略

文章目录 1. 性能优化全景图1.1 优化维度概览1.2 优化效果指标 2. 构建速度优化2.1 缓存策略2.2 并行处理2.3 减少构建范围 3. 输出质量优化3.1 代码分割3.2 Tree Shaking3.3 压缩优化 4. 运行时性能优化4.1 懒加载4.2 预加载4.3 资源优化 5. 高级优化策略5.1 持久化缓存5.2 模…

实验篇| CentOS 7 下 Keepalived + Nginx 实现双机高可用

为什么要做双机高可用&#xff1f;‌ 想象一下&#xff1a;你的网站突然宕机&#xff0c;用户无法访问&#xff0c;订单流失、口碑暴跌…&#x1f4b8; ‌双机热备‌就是解决这个痛点的终极方案&#xff01;两台服务器互为备份&#xff0c;724小时无缝切换&#xff0c;保障业务…

C语言【内存函数】详解加模拟实现

目录&#xff1a; 1. memcpy使用和模拟实现 2. memmove使用和模拟实现 3. memset函数的使用 4. memcmp函数的使用 以上函数均包含在一个头文件<string.h>里面 一、memcpy的使用和模拟实现。 memcpy函数介绍&#xff1a; 函数原型&#xff1a; void * memcpy ( void…

Flutter——Android与Flutter混合开发详细教程

目录 1.创建FlutterModule项目&#xff0c;相当于Android项目里面的module库&#xff1b;2.或者编辑aar引用3.创建Android原生项目3.直接运行跑起来 1.创建FlutterModule项目&#xff0c;相当于Android项目里面的module库&#xff1b; 2.或者编辑aar引用 执行 flutter build a…

Windows根据文件名批量在文件夹里查找文件并复制出来,用WPF实现的详细步骤

项目前言 在日常工作和生活中&#xff0c;我们常常会遇到需要从大量文件中根据文件名批量查找特定文件并复制到指定位置的情况。手动一个个查找和复制文件不仅效率低下&#xff0c;还容易出错。使用 Windows Presentation Foundation (WPF) 可以创建一个用户友好的图形界面应用…

matlab 控制系统GUI设计-PID控制超前滞后控制

1、内容简介 matlab164-控制系统GUI设计-PID控制超前滞后控制 可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 4、参考论文 略

【大模型基础_毛玉仁】2.4 基于 Encoder-Decoder 架构的大语言模型

更多内容&#xff1a;XiaoJ的知识星球 目录 2.4 基于 Encoder-Decoder 架构的大语言模型2.4.1 Encoder-Decoder 架构2.4.2 T5 语言模型1&#xff09;T5 模型结构2&#xff09;T5 预训练方式3&#xff09;T5 下游任务 2.4.3 BART 语言模型1&#xff09;BART 模型结构2&#xff0…

AI智能代码疫苗技术,赋能数字化应用内生安全自免疫

“DevSecOps市占率持续领先&#xff0c;IAST探针覆盖率十倍增长&#xff0c;代码疫苗技术已成功帮助上千家行业用户成功抵御‘Log4j2.x’等重大未知漏洞的利用攻击。”子芽在腾讯专访中透露。 这是2021年悬镜安全交出的一张成绩单。悬镜安全是DevSecOps敏捷安全先行者&#xf…