You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
以上方法实现的思路还是比较简单的,定义个全局 microApps 数组变量来保存子应用,然后每个子应用分别有个对应的 status 变量来表示该子应用的状态是怎样的,然后进行下一步操作时会根据当前的状态进行对应的下一步操作,以下我们挑选个最“复杂”的方法 createMicroApp 来看下,我们对代码进行了相关注释,还是比较简单的,就不再赘述了。
exportasyncfunctioncreateMicroApp(app: string|AppConfig,appLifecyle?: AppLifecylceOptions){constappConfig=getAppConfigForLoad(app,appLifecyle);constappName=appConfig&&appConfig.name;if(appConfig&&appName){if(appConfig.status===NOT_LOADED||appConfig.status===LOAD_ERROR){// 如果该子应用的当前状态是未加载或加载失败,执行以下逻辑if(appConfig.title)document.title=appConfig.title;// 更新子应用的状态updateAppConfig(appName,{status: LOADING_ASSETS});letlifeCycle: ModuleLifeCycle={};try{// 加载子应用资源lifeCycle=awaitloadAppModule(appConfig);// in case of app status modified by unload eventif(getAppStatus(appName)===LOADING_ASSETS){// 更新子应用配置updateAppConfig(appName,{ ...lifeCycle,status: NOT_MOUNTED});}}catch(err){// 出错,更新子应用配置updateAppConfig(appName,{status: LOAD_ERROR});}if(lifeCycle.mount){// 进行子应用挂载awaitmountMicroApp(appConfig.name);}}elseif(appConfig.status===UNMOUNTED){// 如果当前的子应用是卸载状态执行以下逻辑if(!appConfig.cached){// 加载 js/css 资源awaitloadAndAppendCssAssets(appConfig.appAssets||{cssList: [],jsList: []});}// 进行挂载awaitmountMicroApp(appConfig.name);}elseif(appConfig.status===NOT_MOUNTED){// 如果当前的子应用是没有挂载状态,则进行挂载awaitmountMicroApp(appConfig.name);}else{console.info(`[icestark] current status of app ${appName} is ${appConfig.status}`);}// 返回创建的子应用的信息returngetAppConfig(appName);}else{console.error(`[icestark] fail to get app config of ${appName}`);}returnnull;}
一、前言
在之前《微前端探索》文章中,我们分析了微前端框架 single-spa 和 qiankun 的一些源码、原理等,本文再对社区另外一个微前端框架 icestark 做一个简单整理分析,帮助各位想探索微前端的同学有个感性的认识。
二、 源码目录
icestark 源码的主要目录结构如下所示,主要包括 packages 和 src 两个目录,相关总结整理如下,我们不会一行一行去讲解代码,如果你对某一块很感兴趣,可以自己去 github 上面 clone 代码库,源码还是非常简单易懂的。
三、重要代码整理
1、子应用状态管理
我们学习 single-spa 的时候总结到 single-spa 是一个状态机,负责管理各个子应用的状态。所以 icestark 必然存在这个子应用的状态管理,相关的实现在 src/apps.ts 文件中,其包括以下几个主要过程/方法:
以上方法实现的思路还是比较简单的,定义个全局 microApps 数组变量来保存子应用,然后每个子应用分别有个对应的 status 变量来表示该子应用的状态是怎样的,然后进行下一步操作时会根据当前的状态进行对应的下一步操作,以下我们挑选个最“复杂”的方法 createMicroApp 来看下,我们对代码进行了相关注释,还是比较简单的,就不再赘述了。
2、路由劫持
我们都知道 react、vue、angular 等单应用路由劫持的实现都是:history 路由通过监听 popstate 事件、hash 路由通过监听 hashchange 路由来实现的,那么 icestark 的路由劫持是怎么做的呢,嗯哼,他们也没有变出花来,也是一样的实现原理,代码位置在 src/start.js 文件中,相关源码如下所示
3、沙箱隔离
在微前端容器中,存在多个子应用共有一个 window 对象的情况,如果不进行隔离,可能多个子应用之间会存在互相影响的情况。icestark 基于 Proxy 为每个子应用启用了一个沙箱环境,代码位置在 packages/icestark-sandbox/src/index.js 文件中,相关代码实现如下所示
4、通信
icestark 提供了 event/store 通信,其无非是实现了个简单的 EventEmit 实例,代码位置在 packages/icestark-data/src/event.js 文件中,相关源代码实现逻辑如下,我们进行了些代码注释,就不再赘述。
四、总结
经过以上代码整理分析,我们可以看到,其实 icestark 跟 single-spa、qiankun 这些微前端框架做的事情/原理大同小异,icestark 自己去实现了子应用的状态管理,然后也去实现了沙箱、通信等这些辅助功能。
辛苦整理良久,还望手动点赞鼓励~
博客 github地址为:github.com/fengshi123/blog ,汇总了作者的所有博客,欢迎关注及 star ~
The text was updated successfully, but these errors were encountered: