微前端(wujie)-2.架构分析.md

无界架构分析

前言

本篇从架构角度分析无界的组成和模块划分,以及各个模块的职责和交互关系,我们对整体架构有了一个大概的了解,后续的文章会对各个模块进行详细的分析,如有错误,欢迎指正。

无界生态

无界提供了四个包,分别是wujie, wujie-vue2,wujie-vue3wujie-react

  • wujie是无界的核心包,提供了无界的核心能力
  • wujie-vue2是无界的vue2版本,提供了vue2的适配能力
  • wujie-vue3是无界的vue3版本,提供了vue3的适配能力
  • wujie-react是无界的react版本,提供了react的适配能力

以上四个包共同组成了无界的生态,其中后面三个包都是为了适配不同框架做的适配包,在我们实际业务使用时,只需要使用对应的适配包即可完成无界的接入。

无界架构

无界目录结构

复制代码
|- packages
  |- wujie
  |- wujie-vue2
  |- wujie-vue3
  |- wujie-react

依赖关系如图:

整体架构设计

从上述的依赖关系图可以看出,无界的架构是一个典型的分层架构,分为两层,分别是应用层核心层,应用层是无界的适配层,核心层是无界的核心能力层,应用层依赖核心层 wujie-vue2wujie在整个架构中的关系如下图所示:

无界适配层

无界的适配层是针对不同的框架提供的适配能力,目前提供了vue2vue3react的适配能力,适配层的主要职责是基于核心层wujie提供的能力,对不同的框架进行适配,使得无界能够在不同的框架中使用, 在这些适配层的包中,会暴露出一个WuJieApp的组件供我们在不同框架开发的基座中去注册和使用。

无界核心层

wujie(wujie-core)是无界的核心能力层,应用的注册、加载、预加载、卸载、应用间的通信等都是在这个层面实现的,也是无界的精髓所在, 我们以单例模式为入口,一个子应用的生命周期大致如下图所示:

如上图所示,一个子应用的生命周期分为三个阶段,分别是注册阶段运行阶段卸载阶段,其中在运行阶段wujie通过iframe常见js沙箱,通过webComponent创建css沙箱,通过劫持iframe的window以及document对象,是的对iframe的操作作用于webComponent上,同时对Location对象进行劫持,使得子应用的路由变化能够被监听到, 除此之外,无界还提供了重建模式和保活模式,

保活模式

保活模式下,应用得到了缓存,应用的数据以及路由信息不会被销毁,当应用再次被激活时,会直接从内存中恢复,这样做的好处是可以提高应用的二次加载速度,但缺点也是显而易见的,会占用一定的内存空间,如果应用的数据量比较大,笔者也不建议使用保活模式,在实际使用过程中,我们也要结合实际的业务场景,合理的运用保活模式。

重建模式

重建模式与单例模式的区别是,重建模式下,承载dom的容器被销毁,承载js的iframe也会被销毁

总结

上文对无界的整体架构做了一个简单的分析,可能有些地方没有说清楚,如有错误,欢迎指正,无界的架构比较清晰,各个模块的能力边界也划分的很合理,值得我们去学习,后续文章将对无界的各个模块进行详细的分析。

预告:下一篇wujie-vue2刺探,如有兴趣,可关注专栏。

相关推荐
岁月宁静5 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
二宝1525 小时前
黑马商城day4-微服务02
微服务·云原生·架构
心易行者6 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~6 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge6 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再6 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴6 小时前
Lua 模块的完整入门指南
前端·lua
百锦再7 小时前
对前后端分离与前后端不分离(通常指服务端渲染)的架构进行全方位的对比分析
java·开发语言·python·架构·eclipse·php·maven
浪里行舟7 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1238 小时前
CSS易忘属性
前端·css