无界架构分析

前言

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

无界生态

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

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

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

无界架构

无界目录结构

|- packages
  |- wujie
  |- wujie-vue2
  |- wujie-vue3
  |- wujie-react

依赖关系如图：

整体架构设计

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

无界适配层

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

无界核心层

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

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

保活模式

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

重建模式

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

总结

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

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

如果觉得本文有帮助 记得点赞三连哦 十分感谢！

系列链接