微前端框架篇一,了解qiankun

这篇具有很好参考价值的文章主要介绍了微前端框架篇一,了解qiankun。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

① 前置知识补充

Ⅰ 什么是微前端?

微前端是一种将复杂单体应用拆分为多个小型独立前端应用,然后将这些小应用按需加载并集成到主应用的技术方案。
每个子应用都有自己的 JavaScript 和 CSS 代码。

Ⅱ 什么是JS CSS沙箱?

微前端框架篇一,了解qiankun,大前端uni-app+electron,前端框架,前端,vue,vue.js

Ⅲ 什么是spa单页面应用?

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。所有页面都来回在这张页面上切换。

所以很容易暴漏出来单页面应用的两个缺点。
微前端框架篇一,了解qiankun,大前端uni-app+electron,前端框架,前端,vue,vue.js

单页面SPA的两种路由形式:

Hash与History

本质区别:
Hash:锚点。通过锚点跳到对应位置
History:History栈。通过history.pushState或者history.replaceState向栈内维护信息,并跳转到对应位置。

Ⅳ SystemJS 与 import-html-entry

SystemJS是一个模块加载器,用于在浏览器和Node.js环境中加载JavaScript模块。它提供了动态导入加载模块的功能,使得开发者可以按需加载代码,提高应用程序的性能和响应速度。

import-html-entry 做的就是把如上代码中的 js、css 通过 fetch 拉取出源代码并内嵌到这个 html 中,变为一个包含内嵌 js、css 源码的 html 文件。

微前端框架篇一,了解qiankun,大前端uni-app+electron,前端框架,前端,vue,vue.js

  1. SystemJS 不仅是个模块加载工具更是有一套标准的模块规范,single-spa 赖 SystemJS 规范通过JS Entry 实现微应用、微模块的加载。
  2. import-html-entry只支持 umd 的 js 文件,qiankun 通过 import-html-entry解析 html 模板分析资源 实现 HTML Entry 的方式加载 微应用。

Ⅴ 现有的微前端方案

1.iframe
iframe大家都很熟悉,通过iframe实现的话就是每个子应用通过iframe标签来嵌入到父应用中,iframe具有天然的隔离属性,各个子应用之间以及子应用和父应用之间都可以做到互不影响。但是iframe保护性太强了,导致了很多问题

  • url不同步,如果刷新页面,iframe中的页面的路由会丢失。
  • 全局上下文完全隔离,内存变量不共享。
  • UI不同步,比如iframe中的页面如果有带遮罩层的弹窗组件,则遮罩就不能覆盖整个浏览器,只能在iframe中生效。
  • 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

比如我们新建个html,里面用iframe嵌入一个200*200的element-ui页面

当我们登陆element-ui,并且打开table页面后,刷新整体html页面。element-ui又会回到主页

html的内存与iframe中的不共享

我打开element-ui的loading,只能在200*200的区域显示,整体html没法显示

并且慢


2.single-spa

微前端框架篇一,了解qiankun,大前端uni-app+electron,前端框架,前端,vue,vue.js

3.qiankun

微前端框架篇一,了解qiankun,大前端uni-app+electron,前端框架,前端,vue,vue.js

② 了解single-spa 微前端框架

为啥要了解single-spa,是因为qiankun 是一个基于 single-spa 的微前端。由single-spa优化而来的库

single-spa 微前端框架主要就完成了一件事:就是在 url 变化的时候,加载、卸载对应的子应用

微前端框架篇一,了解qiankun,大前端uni-app+electron,前端框架,前端,vue,vue.js



single-spa 长期开发后,会遇到的问题:

微前端框架篇一,了解qiankun,大前端uni-app+electron,前端框架,前端,vue,vue.js

③ 了解qiankun框架


1. 打包逻辑的问题

一般我们会结合 SystemJS 来用,简化加载的逻辑,但是依然要知道子应用有哪些资源要加载,子应用打包逻辑变了,这里加载的方式就要跟着变

能不能把这个加载过程给自动化了呢?

比如我根据 url 加载子应用的 html,然后解析出其中的 JS、CSS,自动去加载。

qiankun 就是按照这个思路来解决的:

它会加载入口 html,解析出 scripts、styles 的部分,单独去加载,而其余的部分,会做一些转换之后放到 dom 里。 (HTML Entry)



2. JS、CSS 沙箱

子应用之间肯定要实现隔离,不能相互影响,也就是要实现 JS 和 CSS 的隔离。single-spa 没有做这方面的处理,而 qiankun 实现了这个功能。

JS 的隔离也就是要隔离 window 这个全局变量,其余的不会有啥冲突,本来就是在不同函数的作用域执行的。

qiankun 实现 window 隔离有三种思路:

  • 快照,加载子应用前记录下 window 的属性,卸载之后恢复到之前的快照
  • diff,加载子应用之后记录对 window 属性的增删改,卸载之后恢复回去
  • Proxy,创建一个代理对象,每个子应用访问到的都是这个代理对象

一般常用的还是第三种 Proxy 的思路


qiankun 实现 CSS 的隔离有两种思路:

  • 严格的样式隔离模式,为每个微应用的容器包裹上一个 shadow dom 节点,从而确保微应用的样式不会对全局造成影响
  • 实验性的方式,通过动态改写 css 选择器来实现,可以理解为 css scoped 的方式



3.应用间的状态管理

多个子应用、子应用和主应用之间自然有一些状态管理的需求,qiankun 也实现了这个功能。

  • 主应用里做全局状态的初始化定义子应用获取全局状态的方法 getGlobalState 和全局状态变化时的处理函数 onGlobalStateChange
  • 子应用里可以通过参数拿到 global state 的 get、set 方法:

蚂蚁官方文章文章来源地址https://www.toymoban.com/news/detail-814041.html

到了这里,关于微前端框架篇一,了解qiankun的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用uni-app框架中uni.chooseAddress()接口,获取不到用户收货地址

    在我们使用uni-app框架或微信原生开发微信小程序时,使用到 uni.chooseAddress(OBJECT) 接口获取用户收货地址时,无法跳转到收货地址页面获取。 打印接口返回信息,显示 \\\"chooseAddress:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json\\\" 等内容,意思是此API接口需要

    2024年02月12日
    浏览(55)
  • 前端vue uni-app自定义精美海报生成组件

    在当前技术飞速发展的时代,软件开发的复杂度也在不断提高。传统的开发方式往往将一个系统做成整块应用,一个小的改动或者一个小功能的增加都可能引起整体逻辑的修改,从而造成牵一发而动全身的情况。为了解决这个问题,组件化开发逐渐成为了一种趋势。通过组件

    2024年02月14日
    浏览(63)
  • uni-app前端H5页面底部内容被tabbar遮挡

    在用uniapp写小程序的时候,底部有一部分内容没显示出来,被底部的tabbar遮挡住了 给最外部的view设置样式 padding-bottom: var(--window-bottom) ,如下 参考1 参考2 使用 uni-app 框架开发的一个项目,发现 H5 端页面底部的内容被导航栏(Tabbar)遮挡,小程序端可以正常显示。 查阅资料

    2024年02月04日
    浏览(65)
  • 微信小程序开发学习笔记《17》uni-app框架-tabBar

    博主正在学习微信小程序开发,希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档 运行如下的命令,基于master分支在本地创建tabBar子分支,用来开发和tabBar相关的功能: 在 pages目录中,创建首页(home)、分类(cate)、购物车(cart)、我的(my)这4个

    2024年02月20日
    浏览(72)
  • uni-app框架看这五款组件库就够了

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。 uni-app的生态比较丰富,有自己的插件市场,蛮多开发者都推出了自己的组

    2024年02月02日
    浏览(55)
  • 前端vue uni-app仿美团下拉框下拉筛选组件

    在前端Web开发中,下拉筛选功能是一种非常常见的交互方式,它可以帮助用户快速选择所需的选项。本文将介绍如何利用Vue.js和uni-app框架来实现一个高效的下拉筛选功能。通过使用这两个强大的前端框架,我们可以轻松地创建具有响应式用户操作的下拉筛选组件。 首先,我

    2024年02月09日
    浏览(48)
  • 基于uni-app框架的习惯养成小程序 毕业设计源码32209

    赠送源码-毕业设计:express习惯养成小程序 https://www.bilibili.com/video/BV1WC4y117x2/?vd_source=72970c26ba7734ebd1a34aa537ef5301 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,

    2024年02月04日
    浏览(43)
  • 微信小程序原生框架转Uni-App:你需要知道的一切

    博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的博客👦🏻 《java 面试题大全》 🍩惟余辈才疏学浅,临摹之作或有不妥之处,还请读者海涵指正。☕🍭 《MYSQL从入门到精通》数据库是开发者必会基础之一~ 🪁 吾期望此文有资助于尔,即使粗浅难及深广,亦备添少许微薄

    2024年02月09日
    浏览(61)
  • VUE(uni-app框架)开发微信小程序③-显示隐藏

    uni-app控制显示隐藏的方式有两种,【v-if】 和   【v-show】 v-if:通过控制虚拟dom树的节点来达到控制式样的显示和隐藏,当参数为false的时候,该节点被删掉,当为true的时候则显示。 v-show:通过css样式中的dispaly:none来控制元素的显示和隐藏 代码如下: 显示效果如下:  通

    2024年02月16日
    浏览(58)
  • 【第三趴】uni-app页面搭建与路由配置(了解工程目录结构、学会搭建页面、配置路由并成功运行)

    聚沙成塔——每天进步一点点,大家好我是几何心凉,不难发现越来越多的前端招聘JD中都加入了uni-app 这一项,它也已经成为前端开发者不可或缺的一项技能了,所以凉哥为大家推出 聚沙成塔【45天玩转uni-app】 专栏,帮助大家对 uni-app 进行学习和理解,uni-app可以通过一套代

    2024年02月02日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包