思维导图
# 产品底盘
- 集采平台
- OMS
- TMS
- WMS
- BMS
- 可视化大屏
# 话术
- 持续优化 xxx
- 重构了 xxx
- 梳理 xxx，总结 xxx 排查 xxx 问题
- 改进了 xxx 逻辑，性能得到提升
- 通过 xxx 降低了 xxx 至 xxx
- 为了 xxx 重新设计了 xxx
- 为了 xxx 通过 xxx 完成了 xxx
- 通过 xxx 优化了 xxx 为 xxx
- 为了 xxx 将 xxx 应用到了 xxx
- 通过 xxx 提高了 xxx 至 xxx
- 为了 xxx 通过 xxx 将 xxx 集成
- 为了 xxx 通过 xxx 成立了 xxx
# commit 规范
https://juejin.cn/post/6934292467160514567 (opens new window)
# 敏捷开发
https://blog.shenzjd.com/pages/5d8b248d911bd/ (opens new window)
https://blog.csdn.net/csdn15556927540/article/details/90712308 (opens new window)
# git 子模块
https://zhuanlan.zhihu.com/p/372164240 (opens new window)
# 微前端
# single-spa 根据不同路由加载不同字应用
优点
- 子应用独立运行独立部署
- 父应用加载子应用形成 spa 的体验
缺点
- 不够灵活不能动态加载 js 文件
- 样式不隔离
- 全局对象影响 没有沙箱机制
# qiankun
# iframe
切换子应用路由，页面整体刷新导致无法记录状态--体验差
# 报表导入与导出
# 大文件上传
- 将大文件转换成二进制流的形式
- 利用流可以切割的属性，将二进制流切割成多份
- 组装和分割块同等数量的请求块，并行或者串行发出请求
- 带我们监听到所有的请求都成功发出去以后，再给服务器发出一个合并的信号
# 断点续传
https://juejin.cn/post/6844904055819468808#heading-14 (opens new window)
- 为每一个文件切割块添加不同的标识 hash
- 当上传成功之后，服务器记录上传成功的标识
- 下次继续上传的时候从服务器获取已经上传的文件分片 hash，下次上传的时候不需要上传这个分片
- 当我们暂停或者发送失败后，可以重新发送没有上传成功的切割文件
- 最后我们全部上传成功还是给服务器发出一个合并的信号--服务器可以清除所有的分片
- 这里存在服务器历史存储分片过多占用磁盘过大的问题--所以我们可以设置过期时间，定期清除过期的分片，避免资源浪费
# 大数据渲染的下拉列表
https://www.surely.cool/doc/guide (opens new window)
# 实现 select 下拉搜索无限滚动+虚拟列表
# 封装成指令
# 性能优化
- 取得可见区域的可见列表数量
- 取得可见区域的起始数据索引和结束数据索引
- 计算出可见区域对应的数据，让 vuejs 更新
- 把可见区域的 top 设置为起始元素在整个列表中的位置(使用 transform 是为了更好的性能)
# 大数据渲染的 table 虚拟列表以及虚拟滚动条
# 基于 OWTB 业务架构的产品底盘
# 设计和沉淀整套权限控制方案
- 菜单管理
- 角色管理
- 用户管理
- 组织架构
- 系统日志
根据角色动态渲染菜单，以及按钮级别的显隐-封装v-permission指令
# 首屏看板优化
echarts 封装组件重写,冻结或者提取静态 options
mixins 提取公共方法
服务器提前算好五分钟之前的数据
# vuex 数据持久化
把刷新之后需要保留的状态同步到本地储存中
- vuex-persistedstate
https://github.com/robinvdvleuten/vuex-persistedstate (opens new window)
- vuex-persist
https://championswimmer.in/vuex-persist/ (opens new window)
# sf-tech 的 sso 单点登录
利用 cookie 的二级域名可以共享数据的特点来实现单点登录
如果 cookie 过大超过请求数量，只保留必须的用户登录信息 token 和 userInfo
项目的私有信息保存在本地储存
# DevOps
https://www.zhihu.com/question/58702398 (opens new window)
# GitLab CI/CD
https://www.cnblogs.com/cjsblog/p/12256843.html (opens new window)
# 隔离沙箱
https://mp.weixin.qq.com/s/euHJpS6rcRRqVBIPAnbUHA (opens new window)
# node 小工具，根据菜单自动生成页面和相应的 api
https://github.com/eastFang/vue-code-generate (opens new window)
# 表单在线生成
https://github.com/yupk/vue3-code-generator (opens new window)
# jsbridge 原理
https://blog.csdn.net/luofeng457/article/details/108229675 (opens new window)
# 可视化大屏
http://www.youbaobao.xyz/datav-docs/ (opens new window)
# 参考
我先描述一下这个项目的 STAR~
# 首先是 Situation
这个是项目是一个 G 端项目，是基于我们 OWTB 业务架构为 gjjdzb 物资管理提供的一整套系统（可以先声明一下面试完就当没听到这个项目）。
所谓 OWTB 就是 order system manege，也就是订单系统，wms 仓储系统,tms 运输系统,和 bms 结算系统一整套把物资从计划到仓储再到运输到结算的一系列统筹管理的系统。
# 这个业务系统的基本特征包括
- 基于军内网，不和广域网打通，也就是我们广义上来说的离线局域网状态
- 数据来自于 90 年代到现在的台账和各种物资管理老系统，数据杂乱且数据量庞大
- 业务系统复杂庞大，需求管理比较困难
# 所以，基于这样的基本条件下，我们的 task 也集中在以下几点
- 解决生产问题/用户画像收集问题
- 解决数据量巨大产生的性能问题
- 隔离生产/测试环境
- 工作流/项目的管理
- 公共库/模板的沉淀与快速开发
- 各种类的性能优化
# 而我们采取的主要的 Action 就包括
- 开发/测试环境采用 gitlab+docker 的方式进行测试环境的管理及部署，生产环境利用 docker 进行多点部署 ssh+scp+node command 的方式进行维护
- 利用虚拟列表组件 u-table+ztree+webworker 解决大数据列表渲染/大数据树渲染/大数据运算问题
- 部署前端监控及错误日志收集系统完成用户生产错误收集及用户画像收集的任务
- 隔离生产和开发环境的配置，提高开发体验，减少及部署时间，增加开发体验
- 沉淀公共模板和公共库，制定统一开发模板及数据规范，实现快速开发
- 建立敏捷流程，以两周一迭代+四会管理项目，推进项目管理，提高团队效率
- 利用代码审核+一次性通过率+bug 率提高代码质量
# Result
- 沉淀了基础的项目架构，包括封装了团队定制的 cli（封装了公共组件及公共库/eslint 规范/gitlab.yml/docker 镜像/反向代理/webpack/cdn/基础服务等配置），后边新起的项目都用这个 cli 快速搭建
- 推进了前端项目管理，提高了代码质量（bug 率最低的时候大概只有百分之十几）
- 在之前项目基础上，前端性能达标（lighthouse 分数）
- 首屏加载减少至 1M 左右
- 开发体验极大提升，常规页面的开发（crud）大致只需 5 分钟
- 快速定位了生产问题，完成了对用户使用前端环境及前端性能的收集
# 主要考察
一般主要是项目深度+基础+代码编程(还是偏 js 代码能力，另外加一点点算法)
技术栈没关系，不过需要对熟悉的技术栈有比较深入的了解会更好，不是 React 也没关系，这个比较开放，这边会更倾向于跟候选人聊自己擅长的领域
技术比较分散，不同的项目有不同的技术亮点
这个项目是目前比较做的，比较全一点
star 原则
situation 背景 owtb 比较分散
task 任务
完成前端三要素： 1.抽象产品底盘（OWTB) + 可拖拽大屏 2. 全链路监控 3. 质量，效率，性能 4. 建立完善的研发过程管理
需求澄清
代码 review
敏捷开发
action
result