1. 水瓶男人阁首页
  2. 健身

jiewu（公务）

投稿用户 • • 健身 • 阅读 40

qiankun？这次我选了wujie！写在最前：本文面向对无界和微前端有一定了解的人群，不再对微前端的概念和无界的基础使用方式做解释说明前言头条上搜wujie，那么大眼一看，好像全都是介绍的，并没有几个落地方案的分享。正好我上个月把部门内三个业务系统

qiankun？这次我选了wujie！

写在最前：

本文面向对无界和微前端有一定了解的人群，不再对微前端的概念和无界的基础使用方式做解释说明

前言

头条上搜wujie，那么大眼一看，好像全都是介绍的，并没有几个落地方案的分享。正好我上个月把部门内三个业务系统用wujie整合了一下，记录成文章和大家分享一下。（为什么不用qiankun？qiankun之前做了好多次了，这次想尝个鲜~）

背景说明

笔者部门内有三个管理系统，技术栈分别是：

A： Vue2 Webpack4 ant-design-vue@1.7.8：该项目是部门内“司龄”最长的，从部门成立之初起，所有的业务都堆在里边。

B： Vue3 Webpack5 ant-desgin-vue@3.2.20：由于业务目标不清晰以及前端开发各自为战，部分需求被拆出来了一个单独的项目进行开发，但实际上然并卵。

C： Vue3 Vite2 ant-design-vue@3.2.20：为了响应领导“统一前端UI规范”和“低代码降本增效”的号召，这个项目应运而生，使用JSON Scheme渲染列表页 手写Form表单的形式开发需求。

没错，就是3个纯业务向的管理系统。对接我们部门的大部分业务人员，日常都至少需要操作3个系统，甚至有些人还会用到别的部门的系统，甚至有的人习惯打开多个浏览器tab页来回切换对比同个页面的数据。。。poor guy。。。浏览器密密麻麻的全是tab页。。。

契机

某天，发生了如下对话：

领导：业务部门老大说，系统间来回切换太麻烦了，有没有办法解决这个问题？我：有，微前端。领导：之前XXX不是用qiankun做过吗，问题很多，不了了之了。我：我看过他的代码，没有什么大问题，都是一些细节方面的小bug，而且还有别的微前端方案可以选择。领导：行，你安排一下，尽快上线我：好的。（ 打工人被安排任务就是这么朴实，无华，且枯燥。。。）

为什么选择无界？

（此处省略万字长文对比分析qiankun、micro app、single-app…)

直接摆出站在个人角度以及团队技术、业务背景下选择无界的原因：

喜欢吃螃蟹：之前有过多次qiankun的落地经验，直接上qiankun，一点都不酷。（第一次了解到无界是22年的10月份左右，彼时的无界还在beta版，想尝尝鲜。况且就算使用无界出了岔子，也有信心能cover住）子应用改造，侵入程度低：就像文档中宣传的那样，我用公司的项目跑demo，除去登录态的因素外，基本可以说是0改动接入，当时脑海中只有2个字—-牛X！（当然，仅仅这样接入，离上生产的标准还相距甚远；而且最后我还是选择了类似qiankun根据宿主应用动态选择layout的布局方案，改造成本也可以说是不算低了，这个暂且按下不表）方便独立开发、部署：与第2点相似但又不同：现有的项目有独立的域名、部署方案、且在生产环境已经稳定运行，在保留这些基础的前提下，无界的iframe方案算是最理想的出路（另外也有一点私心，如果生产环境的无界挂了，业务人员可以直接使用老的域名访问独立的子应用进行业务操作，毕竟出了生产事故是要通报批评的）

综上所述，确实没经过太多深思熟虑，想用就用，干就完了

jiewu（公务）

正常情况下，主应用判断url参数做跳转的逻辑不管放在哪里，都存在目标子应用未加载完成的可能性。

（如果你说每个子应用component的afterMount事件里都写一遍，fine，你赢了）

这个时候，只需要对无界的eventBus稍作改动，即可满足需求：

import WujieVue from "wujie-vue3";import { AppCollection } from "@/constant";import store from '@/store';const { bus }=WujieVue;type EventList="LOGIN_EXPIRED" | "EVENT_NAME1" | "EVENT_NAME2"; // 一些事件类型涉及到公司业务，这里省去了type EventBusInstance={$emit: (e: EventList, params: Record)=> void;$on: (e: EventList, fn: (...args: any[])=> void)=> void;$registerMountedQueue: (app: AppCollection,e: EventList,params: Record)=> void; // 将事件注册到子应用mount成功的的事件队列中$cleanMountedQueue: (app: AppCollection)=> void; // 清空子应用mount事件队列};type Queue={[app in AppCollection]?: any[];};let instance: EventBusInstance | undefined=undefined;export default ()=> {const queue: Queue={};if (!instance) {instance={$emit: (event, params)=> bus.$emit(event, params),$on: (event, fn)=> bus.$on(event, fn),$registerMountedQueue: (app, event, params)=> {const isMounted=store.state.globalState.appMounted[app]; // store中存储了子应用是否mount完成的状态const fn=()=> bus.$emit(event, params); // 子应用已挂载完成可以直接通信if (isMounted) return fn(); if (queue[app] && queue[app]!.length) {queue[app]!.push(fn);} else {queue[app]=[fn];}},$cleanMountedQueue: (app)=> {while (queue[app] && queue[app]!.length) {const fn=queue[app]!.shift();fn();}},};} return instance;};

为每个子应用都维护一个事件队列，主应用通过$registerMountedQueue注册事件时，若对应子应用已经mount完成，则直接emit进行通信；若子应用没有mount完成，则将注册的事件推入队列中。

子应用afterMount钩子中调用$cleanMountedQueue，清空属于自己的事件队列。

目前根据业务需要，只做了这一点封装，后续有可能会继续补充。

当然前边提到的这个场景，肯定还有许多不同的解决方案，根据自己的项目因地制宜才是最重要的。

5.子应用afterMount生命周期

上边第4点已经提到过，子应用afterMount钩子中要做两件事情：

store中保存自己mount完成的状态。调用$cleanMountedQueue清空自己的事件队列。

6.子系统网络请求管理

网络请求管理，主要解决的是跨域问题，分两种：

调用后端服务跨域 如果你的用户鉴权是基于cookie的，那最方便的就是使用无界推荐的方法：将主应用的fetch自定义改写后传给子应用。如果你的用户鉴权是基于JWT或者你使用了其他的http请求库，赶快买上两杯咖啡贿赂一下运维大佬，给子应用对应的服务配置下Response Header，支持主应用域名的跨域资源共享。但是要切记，生产环境不要使用Access-Control-Allow-Origin: *。请求子应用静态资源跨域

刚才为啥要让买两杯咖啡，因为一杯是改后端服务支持跨域，还有一杯是改前端静态资源服务器（比如Nginx）支持跨域。

jiewu（公务）

行吧，第一版先到这里，欢迎真诚交流，但如果你来抬杠？阿，对对对~ 你说的都对~

作者：Elecat
链接：https://juejin.cn/post/7297592806569164810

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 sumchina520@foxmail.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.shpfj.com/23357.html
赞 (0)
投稿用户
0
上一篇 2023年12月18日 pm7:03
下一篇 2023年12月18日 pm7:24

相关推荐

  • windshield（汽车车窗护罩）

    单词联想roofproofhoofspoofreef英/ri?f/美/ri?f/全球(英国)n.礁，暗礁，礁脉；（尤指含金的）矿脉；缩帆部，帆的可收缩部v.收帆，卷起缩帆部；缩短，收进（中桅，船首斜桁）roof英/ru?f/美/ru?f/全球(美国)n.屋顶，车顶；（洞穴、矿井等的）顶部；口腔顶部，上腭；住处，栖身之处；（价格或工资

    健身 2024年1月22日
    46
  • 街舞动作（舞蹈动作技巧） 健身

    街舞动作（舞蹈动作技巧）

    快速上手街舞的小技巧街舞是一种充满激情和自由的舞蹈形式，它的独特风格吸引了许多年轻人的喜爱。然而，对于初学者来说，掌握街舞的技巧可能会感到有些困难。不用担心！下面我将分享一些快速上手街舞的小技巧，帮助你迅速进入街舞的世界。学习基本步伐：在开始学习任何舞蹈之前，首先要掌握基本的步伐。对于街舞来说，这包括一些基础动作，如步伐、旋转和跳跃等。通过反复练习这些

    2024年1月17日
    41
  • 李涛photoshop教程（图像处理软件教学） 健身

    李涛photoshop教程（图像处理软件教学）

    非常完整的pS基础教程2020年了，一套非常完整的ps基础教程是非常容易找到的。关于ps基础的学习，更多的是知易行难。下面是我推荐的ps基础教程，全部免费，完整版。1、敬伟全套教程共202集，每一集3-5分钟，讲解非常透彻，对小白非常友好，很容易就能听懂。2、祁连山PhotoshopCS6全套教程1

    2024年1月16日
    50
  • 游泳池热（热水游泳） 健身

    游泳池热（热水游泳）

    游泳馆满池的水是怎样加热的？武汉的夏天，气温高的可怕，很多市民因此去游泳馆游泳以此来降温，泡在清凉的游泳池里，或许是降暑最好的享受了。游泳不仅能降低炎症风险，还能预防心脏动脉粥样硬化等疾病，可谓好处多多。但是大家可能不知道的

    2024年1月8日
    40
  • 巴西艳星（拉美性感） 健身

    巴西艳星（拉美性感）

    我了解的巴西十大绝色女星排行榜，有你心中的那个吗？你用你的调皮捣蛋，将虚空填满，因为你毫无目的，很多人会爱上你。人种多样，热情开朗，喜好直白，蜂腰肥臀，亮黄球衣等都是巴西的标签，其实这些只是表象，巴西的的美人大多“以胖为美”，她们不喜欢过于瘦的身材，也不会为了减肥而节食。每个人心中都有一个巴西，都有属于自己的风景。小编扒一扒自己知道的那些性感撩人

    2023年12月7日
    48

  • 爬山的好处（登山的益处）

    你觉得登山对身体有什么好处吗？经常爬山锻炼可以促进肌肉的蛋白质合成，使肌肉变得坚韧有力。爬山可以改善大脑的血液供应，减轻神经系统的疲劳和精神压力，提高睡眠质量。对登山预防心脑血管疾病有明显效果。爬山可以清除沉积在血管壁上的胆固醇，预防动脉硬化。爬山可以提高呼吸肌的力量，保持肺组织的弹性，提高肺的通气和换气功能，增加吸氧能力，提高全身各器官的代谢水平！经常爬山运动增

    健身 2023年12月13日
    46
  • 跑步瘦身（燃脂减肥） 健身

    跑步瘦身（燃脂减肥）

    学会几个跑步技巧，让你燃脂效率翻倍，更快瘦下来原创内容，擅自搬运者必究！跑步是一项门槛比较低的运动项目，很多人健身会从跑步开始。跑步如果能够坚持下来，你的心肺功能会有所提升，这个时候可以驾驭住更高强度的训练，运动能力会得到明显的提升。跑步后不要马上洗澡或者坐着休息，而需要进行拉伸训练放松，拉伸腿部肌群，这样可以避免肌

    2024年1月17日
    55
  • 游泳衣什么牌子好（时尚游泳装品牌推荐） 健身

    游泳衣什么牌子好（时尚游泳装品牌推荐）

    2023游泳包Top5品牌推荐：游泳包哪个牌子好？3.361°游泳包361°是一家历史悠久的运动品牌，以高品质、时尚的运动装备和配件，深受广大运动爱好者的追捧。今天，我们这里有一款非常实用的休闲包——361°游泳健身干湿分离包20L。这款包可适用于男女成人，可拎可挎，还可以当做单肩手提包，非常方便实用。该包采用高品质材质，具有防水性能，不怕潮湿，同时它的干湿分离

    2024年1月8日
    39
  • 家用健身器材价格（家庭健身器材价格查询） 健身

    家用健身器材价格（家庭健身器材价格查询）

    W元左右就可置办全套健身器材！家用健身房最值得入手的刚需3件套创作说明：最近准备把家里的地下室收拾出来，打造一个简易版家庭健身房。装修时总想搞个华丽丽的的客厅和投影看电影，实际上忙碌的工作让我都不会下去看一眼，渐渐的都变成了堆放杂物的地方。为什么选择这款机器？1、必须是自有工厂品牌FANATICS是上海三飞旗下的高端品牌，健身业内人士估计都知道三飞，2000年就开始做

    2023年12月10日
    46
  • 蛙泳手脚配合慢动作（蛙泳技巧练习慢动作） 健身

    蛙泳手脚配合慢动作（蛙泳技巧练习慢动作）

    基础蛙泳第四课：蛙泳手腿配合之前我们详细的讲了蛙泳腿部动作和手臂动作，但是蛙泳是一个需要手腿合力完成的泳姿，所以手腿之间的配合和时机就非常重要。一个好的蛙泳配合节奏可以减少前进中的阻力。值得注意的是，在基础蛙泳动作中，并不是同时同手同脚做动作的，要掌

    2024年1月8日
    43