![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微前端
bus_lupe
这个作者很懒,什么都没留下…
展开
-
“use strict“; var _interopRequireDefault = require(“@babel/runtime/helpers/interopRequireDefault“);
import-html-entry原创 2022-07-07 21:27:14 · 807 阅读 · 0 评论 -
7-1 框架发布 - 通过npm发布框架
npm 发布原创 2022-06-18 21:41:21 · 144 阅读 · 0 评论 -
6-13 提高加载性能 - 应用缓存
提高加载性能原创 2022-06-18 10:39:42 · 96 阅读 · 0 评论 -
6-10 全局状态管理 - 全局store
全局状态管理原创 2022-06-18 10:26:44 · 221 阅读 · 0 评论 -
6-9 应用间通信 - 子应用通信
应用2注册test1监听事件,并在回调函数中触发test2监听事件应用1注册test1监听事件,触发test2监听事件原创 2022-06-18 09:49:13 · 78 阅读 · 0 评论 -
6-6应用间通信 - 父子通信
propscustomeventhttps://developer.mozilla.org/zh-CN/docs/Web/API/CustomEventexport class Custom { // 事件监听 on (name, cb) { window.addEventListener(name, (e) => { cb(e.detail) }) } // 事件触发 emit(name, data) { const event = .原创 2022-04-12 23:00:27 · 124 阅读 · 0 评论 -
6-5 css样式隔离
css moduleswebpackshadow dom <div id="box1"></div> <div id="box2"></div> <script> const box1 = document.getElementById('box1') // 开启shadow dom模式 const shadow1 = box1.attachShadow({mod..原创 2022-04-11 22:34:25 · 1850 阅读 · 0 评论 -
5-3 微前端框架-路由拦截
// 重写window的路由跳转export const rewriteRouter = () => { window.history.pushState = patchRouter(window.history.pushState, 'micro_push') window.history.replaceState = patchRouter(window.history.replaceState, 'micro_replace') window.addEventListener('原创 2022-04-05 20:13:37 · 2827 阅读 · 0 评论 -
4-11 子应用接入微前端vue2
修改vue.config.jsmodule.exports = { ... output: { // 把子应用打包成 umd 库格式 commonjs 浏览器,node环境 library: `${packageName}`, libraryTarget: 'umd', }, },};main.js修改main.js暴露bootstrap开始、mount挂载、unmount卸载生命周期import Vue from 'vue'im原创 2022-04-01 23:00:29 · 1675 阅读 · 0 评论 -
4-8 构建后端服务
koa全局安装koa生成器npm install koa-generator -g创建项目koa2 service安装依赖cd servicenpm install执行服务npm run start监听文件改动自动重启npm install supervisor --save-dev修改package.json, 使用supervisor代替node{ "name": "service", "version": "0.1.0", "pri原创 2022-03-30 23:13:43 · 1534 阅读 · 0 评论 -
4-7 自启动子应用脚本
package.json{ "name": "micro-web-project", "version": "1.0.0", "description": "create micro project for myself", "main": "index.js", "scripts": { "start": "node ./build/run.js" }, "author": "yancy", "license": "ISC", "devDependencies原创 2022-03-30 22:38:30 · 201 阅读 · 0 评论 -
3-3 绘制项目架构图
分析需求主子应用的功能主应用注册子应用加载、渲染子应用路由匹配(activeWhen, rules - 有框架判断)获取数据(公共依赖,通过数据做鉴权处理)通信(父子通信,子父通信)子应用的功能渲染监听通信(主应用传递过来的数据)微前端框架子应用的注册有开始内容(应用加载完成)路由更新判断匹配对应的子应用加载子应用的内容完成所有依赖项的执行将子应用渲染在固定的容器内公共事件的管理异常的捕获和报错全局的状态管理的内容沙箱的隔离通信机制服务端的功能提供数据原创 2022-03-28 21:24:59 · 2178 阅读 · 0 评论 -
3-2 技术选型 - 确定技术栈
应用主应用子应用后端服务和发布应用主应用 - vue3vue2子应用实现新能源页面vue3 子应用首页选车react15子应用资讯视频视频详情react16子应用新车排行登录服务端接口Koa实现发布应用express...原创 2022-03-27 16:30:28 · 945 阅读 · 0 评论 -
3-1 微前端实现方式对比
1. Iframe优势:技术成熟支持页面嵌入天然支持运行沙箱隔离、独立运行劣势页面之间可以是不同的域名需要对应的设计一套应用通讯机制,如何监听、传参格式等内容应用加载、渲染、缓存等体系的实现2. web component优势支持自定义元素支持shadow dom,并可通过关联进行控制支持模板template和插槽slot,引入自定义组件内容劣势接入微前端需要重写当前项目生态系统不完善,技术过新容易出现兼容性问题整体架构设计复杂,组件与组件之间拆分过细时,容原创 2022-03-27 16:21:29 · 1324 阅读 · 0 评论 -
2-10 系统重构
系统重构架构不是永恒不变的。架构也是具有生命周期的。也会经历出生、发展、巅峰、衰弱、消亡的过程。什么是重构?对软件内部结构的一种调整。目的是在不改变软件可观察行为的前提下,提高其可理解性,降低其修改成本。实现方式使用一系列重构手法,在不改变软件可观察行为的前提下,调整其结构。重构理念:运用大量微小且保持软件行为的步骤,一步步达成大规模的修改。早期系统优势开发速度快代码复杂度低代码规范都保持完好严格注重开发规范,不会允许危及架构设计的代码产生以上因素导致添加功能难原创 2022-03-27 16:03:41 · 227 阅读 · 0 评论 -
2-7架构前期准备
正确的选择是良好的开端——架构前期准备架构师分类系统架构师应用架构师业务架构师系统架构师从系统的维度,负责整体系统的架构设计主要是基础服务和各系统间协调,着眼全局比如关注负载,可靠性,伸缩,扩展,整体项目切分,缓存应用等方面的基础架构设计应用架构师从应用程序的维度,负责某个应用的技术架构,主要偏业务系统关注理解业务,梳理模型,设计模式,接口,数据交互等方面业务架构师从业务流程的维度,关注某一个行业、业务的领域分析,获取领域模型,最终获得系统的模型。也可以叫业务领域专原创 2022-03-17 21:25:32 · 251 阅读 · 0 评论 -
2-6架构设计的质量-健壮性和稳定性
如何保证架构的质量系统的稳定性定义:当一个实际的系统处于一个平衡的状态时,如果收到外来作用的影响时,系统经过一个多过渡过程仍然能够回到原来的平衡状态,我们称这个系统就是稳定的,否则称系统不要稳定。架构设计的基石。可以更好的实现自我修复。系统的健壮性定义:计算机软件在输入错误、磁盘故障、网络过载或有意攻击情况下,能否不死机、不崩溃,就是该权健健壮性的具体表现。解释:一个系统的容错能力强,运行不易被干扰,安全性好。系统的健壮性的度量标准一个软件可以从错误的输入推断出正确合原创 2022-03-14 23:01:42 · 1957 阅读 · 0 评论 -
2-5软件设计分层
系统级架构应用在整个系统内,如与后台服务如何通信,与第三方系统如何集成。设计前端首要条件:了解前端系统与其他系统之间的关系。关系包括:业务和协作机制。设计后端:只需要规定与后台数据传递的机制。包括:api设计规则,访问授权的一个开放标准(OAuth)跳转token的验证,数据传递cookie等。前端与后端的关系考虑的主要因素是:前后端分离的架构设计。前后端分离架构其实是如何实施技术决策,用于鉴权、API接口管理和设计、API文档管理、Mock的使用、BFF(服务与前端的后端,nodejs).原创 2022-03-14 22:40:33 · 438 阅读 · 0 评论 -
2-3软件设计原则与分层
里氏替换原则List item理解:父类一定能够被子类替换最少知识原则只与你最直接的对象交流理解:低耦合,高内聚应用:做系统设计时,尽量减小依赖关系接口隔离原则一个类与另一个类之间的依赖性,应该依赖于尽可能小的接口理解:不要对外暴露没有实际意义的接口。用户不应该依赖它不需要的接口应用:当需要对外暴露接口时,如果是非必要对外提供,尽量删除。依赖倒置原则高层模块不应该依赖于低层模块,它们应该依赖于抽象。抽象不应该依赖于细节,细节应该依赖于抽象。理解:应该面向接口编程,不应原创 2022-03-11 23:01:34 · 127 阅读 · 0 评论 -
2-2软件设计原则
单一职责原则永远不应该有多于一个原因来改变某个类理解:对于一个类而言,应该仅有一个引起它变化的原因应用:如果一个类拥有了两种职责,那就可以将这个类分成两个类开放封闭原则软件实体扩展应该是开放的,但对于修改应该是封闭的对扩展开放,对修改封闭。可以去扩展类,但不要去修改类应用:当需求有改动,尽量用继承或组合的方式来扩展类的功能,而不是直接修改类的代码。...原创 2022-03-11 22:27:39 · 169 阅读 · 0 评论