Less than 1 minute
Less than 1 minute
Less than 1 minute
技术方案 | 特点 | 通信方式 | 优点 | 缺点 |
---|---|---|---|---|
基于Web Components | 使用 Web Components的四个主要技术: Custom Elements、Shadow DOM、HTML Templates、HTML Imports。 将前端应用程序拆分为多个Web Components。 |
CustomEvent | 标准化技术,具有广泛的浏览器支持 高内聚、低耦合,易于维护和扩展良好的封装性和隔离性 Shadow DOM 天生的作用域隔离 |
需要一定的学习成本来掌握Web Components的使用 浏览器兼容性问题 可能需要额外处理不支持全局样式和JavaScript的共享 修改样式困难 |
基于自定义元素和Shadow DOM | 使用自定义元素封装微前端应用, 并使用Shadow DOM提供隔离性。 |
高内聚、低耦合,易于维护和扩展良好的封装性和隔离性 支持自定义元素和Shadow DOM的浏览器兼容性较好 |
需要一定的学习成本来掌握自定义元素和Shadow DOM的使用 不支持全局样式和JavaScript的共享可能受到浏览器 |
|
基于iframe | 使用iframe将每个微前端应用嵌入到主框架中,实现隔离。 | postMessage | 简单、快速 实现良好的隔离性,避免样式和全局变量的冲突 支持跨域通信 |
性能开销较大,因为每个iframe都是独立的浏览器上下文 难以共享资源,如全局状态、数据等页面刷新和导航问题 用户体验差:弹窗只能在 iframe中,在内部切换刷新会丢失状态 |
基于微服务网关路由分发 | 使用微服务网关作为微前端应用的代理和调度器, 根据请求转发到不同的微前端应用。 |
支持跨域请求和API网关功能 可以实现统一的身份认证和权限管理 灵活性强,支持多种微前端技术 |
实现复杂,需要配置和维护微服务网关 对网络通信有较高要求可能增加额外的性能开销 |
|
基于单页面应用(SPA) | 通过在主框架中配置路由, 根据路由加载不同的微前端应用。 |
简单易用,适用于SPA架构 支持全局状态和数据共享 易于集成第三方库和框架 |
隔离性较差,样式和全局变量可能冲突 对SPA架构有依赖,不适合传统多页面应用 需要处理路由冲突和嵌套问题兼容性的限制 |
|
Module fedearation | webpack5 的模块联邦机制 | 通过模块联动将组件打包导出 共享模块的方式通信< |
无 CSS 沙箱和 JS 沙箱 需要 webpack5 |
About 20 min
Vue 后台管理项目
核心技术:
项目规范、JSON 配置化组件库、Git流程规范、权限系统、OnlyOffice 在线编辑和协同文档、富文本编辑、流程引擎
About 3 min
在封装 axios 之前,先了解一下 axios 特性和功能,了解为什么需要封装 axios。
axios 功能特性
Axios 是一个基于 promise 网络请求库,作用于node.js
和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http
模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
About 11 min
现状
当前版本回滚没有任何流程化管理模式,使用最原始的分支管理和 git 命令直接回滚
当前回滚版本流程:
以某系统为例,目前生产服对应 prod 分支代码,测试服对应 test 分支代码,(master 为保护分支,定期将 prod 代码合并到 master)假如生产服某个版本出现重大问题,需要回滚,通过以下 Git 操作流程回滚:
- 使用
git checkout prod
切换到 prod 分支,使用git log
查看提交记录; - 创建新的回滚分支:基于发现bug的版本号或提交ID,从prod分支上创建一个新的回滚分支,命名为rollback_xxx(xxx为对应的版本号或提交ID)。
- 查找到需要回滚的提交记录 hash 值,复制提交记录 hash 值;
- 使用命令
git reset --hard <commit-hash>
强制回滚,也可以使用git revert <commit-hash>
去除提交记录(两个命令区别可以参考文章:git 回滚); - 强制推送到远程分支:
git push --force origin <branch-name>
; - 执行命令
npm run build
重新构建并上传当前分支代码;
About 9 min
React15 的生命周期
constructor()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillMount()
componentWillUpdate()
componentDidUpdate()
componentDidMount()
render()
componentWillUnmount()
About 11 min
Babel 编译结果
Babel 可以通过特定的插件(如 @babel/plugin-transform-react-jsx
)将 JSX 语法转换为 React.createElement
调用,例如:
<div>
< img src="avatar.png" className="profile" />
<Hello />
</div>
About 3 min
React DOM 的渲染采用 render 方法
虚拟 DOM 转成 真实 DOM 流程
创建虚拟 DOM
假设需要渲染如下真实 DOM:
<ul id="list">
<li class="item">Item1</li>
<li class="item">Item2</li>
<li class="item">Item3</li>
</ul>
About 6 min