郑州高端网站建设怎么样,小白做电商从什么做起,长沙网站建设网站推广微信营销,WordPress 5.2.1一、无界微前端框架概述
无界微前端框架是由腾讯团队推出的#xff0c;旨在解决现有微前端方案中存在的问题#xff0c;如适配成本高、样式隔离困难、运行性能不佳、页面白屏、子应用通信复杂、子应用保活机制缺乏等。
技术实现
无界微前端的核心技术是基于Web Component…一、无界微前端框架概述
无界微前端框架是由腾讯团队推出的旨在解决现有微前端方案中存在的问题如适配成本高、样式隔离困难、运行性能不佳、页面白屏、子应用通信复杂、子应用保活机制缺乏等。
技术实现
无界微前端的核心技术是基于Web Components容器 iframe沙箱。通过这种方式它可以实现以下目标
成本低无论是主应用还是子应用使用成本都相对较低。速度快子应用首屏打开速度较快且运行速度快。原生隔离通过Web Components实现了严格的样式隔离而JavaScript则运行在iframe中保证了代码的隔离。功能强大支持子应用保活、子应用嵌套、多应用激活、应用共享等功能。
二、代码实例
下面是一个简单的代码示例展示如何使用无界框架加载一个微应用
主应用配置
假设您的主应用使用的是React或Vue您可以这样配置无界
// main.js
import Wujie from wujiejs/wujie;const wujie new Wujie({container: #app, // 主容器的选择器apps: [{name: app1, // 微应用名称entry: //localhost:8080, // 微应用入口URLactiveRule: /app1 // 激活规则}]
});wujie.start();子应用配置
子应用需要做一些简单的配置以便被无界识别
!-- app1/index.html --
!DOCTYPE html
html langen
headmeta charsetUTF-8titleApp1/titlescript srcwujiejs/wujie/client.js/script
/head
bodydiv idroot/divscript// 注册子应用window.__WUJIE__.registerApp(app1);/script
/body
/html三、子应用通信
无界微前端框架通过多种机制来简化子应用之间的通信确保通信既简单又高效。
通信机制
无界提供了以下几种通信机制
Window.postMessage: 利用浏览器原生的 postMessage API 来实现跨iframe通信。EventBus: 通过事件总线机制子应用可以注册事件监听器并且发送事件到其他子应用或主应用。Props传递: 主应用可以通过props向子应用传递数据。
通信示例
使用 postMessage 发送消息
假设有一个子应用 app1 和一个主应用app1 向主应用发送消息
// 在子应用 app1 中发送消息
window.parent.postMessage({ type: CUSTOM_EVENT, payload: Hello from app1! }, *);// 在主应用中监听消息
window.addEventListener(message, function(event) {if (event.origin http://localhost:8080) { // 确保来源正确if (event.data.type CUSTOM_EVENT) {console.log(Received message:, event.data.payload);}}
});使用 EventBus 发送事件
假设有一个事件总线子应用可以通过它发送和接收事件
// 在子应用 app1 中注册事件监听器
window.__WUJIE__.on(CUSTOM_EVENT, function(data) {console.log(Received event:, data);
});// 在主应用或其他子应用中发送事件
window.__WUJIE__.emit(CUSTOM_EVENT, { message: Hello from main app! });使用 Props 传递数据
主应用可以向子应用传递数据
// 主应用配置
const wujie new Wujie({container: #app,apps: [{name: app1,entry: //localhost:8080,activeRule: /app1,props: {message: Hello from the main app!}}]
});// 子应用 app1 接收数据
console.log(window.__WUJIE__.getProps().message); // 输出 Hello from the main app!四、与qiankun的对比
与另一款流行的微前端框架 qiankun 相比无界在子应用通信方面有以下优势
更灵活的通信方式无界提供了多种通信方式包括 postMessage、EventBus 和 Props 传递而 qiankun 主要依赖于 postMessage 和一些扩展API。更高的安全性无界通过 iframe 沙箱提供更强的安全隔离这有助于保护子应用不受恶意代码的影响。更精细的控制无界提供了更细粒度的控制选项例如可以控制子应用何时加载和卸载这对于优化性能和资源管理非常重要。
总结
无界微前端框架通过提供多样化的通信机制简化了子应用之间的通信流程使得开发人员可以轻松地构建出高度可扩展且维护性良好的微前端应用。与 qiankun 相比无界在通信灵活性和安全性方面具有显著优势。
