前端——微前端架构设计与落地

微前端是解决大型前端应用复杂性的有效方案。本文将介绍微前端的核心概念和实现方式。

1 微前端架构模式

// 基于路由的微前端架构constroutes=[{path:'/',component:HomeComponent},{path:'/user/*',component:()=>import('user-micro-app')},{path:'/order/*',component:()=>import('order-micro-app')}]// 应用间通信classMicroAppEventBus{constructor(){this.events={}}on(event,callback){if(!this.events[event]){this.events[event]=[]}this.events[event].push(callback)}emit(event,data){if(this.events[event]){this.events[event].forEach(callback=>callback(data))}}off(event,callback){if(this.events[event]){this.events[event]=this.events[event].filter(cb=>cb!==callback)}}}

2 微前端沙箱隔离

// CSS隔离示例constcreateScopedCSS=(appName,cssContent)=>{returncssContent.replace(/([^{]+)\{([^}]+)\}/g,(match,selector,rules)=>{return`[data-app="${appName}"]${selector}{${rules}}`})}// JavaScript沙箱classJSSandbox{constructor(){this.sandbox={}this.proxy=newProxy(this.sandbox,{get(target,key){// 防止访问真实window对象if(key==='window'||key==='document'){returnthis.proxy}returntarget[key]||window[key]},set(target,key,value){target[key]=valuereturntrue}})}}

15.3 微前端状态管理

// 全局状态管理classGlobalState{constructor(){this.state={}this.listeners={}}setState(key,value){this.state[key]=valuethis.notify(key,value)}getState(key){returnthis.state[key]}subscribe(key,callback){if(!this.listeners[key]){this.listeners[key]=[]}this.listeners[key].push(callback)}notify(key,value){if(this.listeners[key]){this.listeners[key].forEach(callback=>callback(value))}}}constglobalState=newGlobalState()