window.__POWERED_BY_QIANKUN__

简介: window.__POWERED_BY_QIANKUN__

这样一个问题,采用微前端基座模式下,基座去管理所有子应用。子应用必须在基座访问才可显示菜单,单独访问的情况下直接空白

如果是通过缓存状态判断肯定是不安全的

如此我们这里聊一下window.POWERED_BY_QIANKUN

qiankun其中一个注入的全局变量是 window.POWERED_BY_QIANKUN。这个变量是一个布尔类型的值,用于指示当前应用程序是否在 qiankun 容器中运行

const isPoweredByQiankun = window.__POWERED_BY_QIANKUN__;

if (isPoweredByQiankun) {
   
  // 在 Qiankun 容器中运行
  // 执行 Qiankun 提供的一些额外功能
} else {
   
  // 在普通的单独运行模式中
  // 执行应用程序自身的功能
}

子应用中通过运行 window.POWERED_BY_QIANKUN 来判断是否存在去做相关操作
为true的情况下则表示在基座容器中运行,为fasle的情况下则表示不在基座中运行

介绍
window.POWERED_BY_QIANKUN 变量是在应用程序运行时被 Qiankun 微前端框架动态注入到全局作用域中的。
在 Qiankun 框架中,主应用负责加载和启动所有微前端子应用程序。当子应用程序被加载时,Qiankun 框架会自动将 window.POWERED_BY_QIANKUN 变量注入到子应用程序的全局作用域中。这样,在子应用程序中就可以检测到当前应用程序是否在 Qiankun 容器内运行。
在主应用程序中,window.POWERED_BY_QIANKUN 变量是在主应用程序启动时由 Qiankun 框架动态注入到全局作用域中的。这个变量可以用来判断主应用程序是否运行在 Qiankun 容器中。
总之,window.POWERED_BY_QIANKUN 变量是在 Qiankun 微前端框架加载和运行过程中动态注入到全局作用域中的

如果在浏览器控制台中直接输入 window.POWERED_BY_QIANKUN,那么输出的结果应该是 undefined。因为在这种情况下,控制台只是简单地访问全局变量,而并没有执行任何代码来触发 Qiankun 微前端框架对变量的注入操作

如果要测试应用程序是否在 Qiankun 容器中运行,您可以在应用程序的代码中使用 console.log(window.POWERED_BY_QIANKUN) 来输出变量值,或者在控制台中输入 console.log(window.POWERED_BY_QIANKUN)。这样可以确保在应用程序运行时,变量已被正确注入到全局作用域中,并且输出结果也更易于理解和分析

相关文章
|
前端开发
在微前端qiankun中使用Vite你踩坑了吗?(下)
哈喽,我是树酱。之前搭建的微前端体系已经稳步运行将近两年了,最近遇到一些童鞋反馈。之前据说qiankun并不支持Vite打包的应用,那是不是我就无法使用了?
3693 0
在微前端qiankun中使用Vite你踩坑了吗?(下)
|
缓存 资源调度 前端开发
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
3037 0
|
前端开发 开发工具 git
Git报错处理:解决git commit时的lint-staged错误提示。
极好的,你对Git的lint-staged出了一个令人头疼的问题。让我们一起钻研一下,找到一种方法来解决一切。 首先,我们要确定你是在做什么操作时候遇到了问题。lint-staged通常在我们运行 git commit 时启动,它做的工作是在你提交之前运行一些指定的命令检查你的代码。当lint-staged报错,多半是因为检查未通过,或者它试图运行的命令存在问题。 让我们以一种图解的方式来描绘一下这个过程,就像canvas上的画面那样。git正在温柔的将你的修改捆绑起来,准备提交。突然,lint-staged走了出来,并开始盘问着Git,寻找可能的错误。如果lint-staged找到了什么
1257 24
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
3126 9
|
JavaScript 前端开发 容器
微应用框架-----乾坤
微应用框架-----乾坤
|
前端开发 JavaScript 开发者
qiankun(乾坤)微前端框架简介
qiankun(乾坤)微前端框架简介
3926 1
|
缓存 前端开发
React中函数式Hooks之memo、useCallback的使用以及useMemo、useCallback的区别
React中的`memo`是高阶组件,类似于类组件的`PureComponent`,用于避免不必要的渲染。`useCallback` Hook 用于缓存函数,避免在每次渲染时都创建新的函数实例。`memo`可以接收一个比较函数作为第二个参数,以确定是否需要重新渲染组件。`useMemo`用于缓存计算结果,避免重复计算。两者都可以用来优化性能,但适用场景不同:`memo`用于组件,`useMemo`和`useCallback`用于值和函数的缓存。
1048 1
|
缓存 JavaScript 前端开发
qiankun 微应用vue接入到基座
qiankun 微应用vue接入到基座
|
前端开发 JavaScript Java
基于qiankun的微前端最佳实践 -(同时加载多个微应用)
基于qiankun的微前端最佳实践 -(同时加载多个微应用)
5973 0
基于qiankun的微前端最佳实践 -(同时加载多个微应用)
|
JavaScript 测试技术 API
如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
13895 8