厦门大数据安全开放平台
2019年8月 ~ 2020年11月
我是中途参与到其中，并担任前端负责人角色，在刚接触项目时，
面临的问题：
没有做异常处理：接口请求出现异常时没有任何信息反馈
命名混乱：变量、文件、页面访问路径命名风格不一致
项目管理混乱：图片资源无规则存放，存在很多相同和相似代码，没有做封装
后端接口混乱：接口返回的数据格式不统一
设计图没有规范：比如颜色值各种各样，尺寸设定没有规律
解决方案：
- 网络层封装：对网络请求库做一层业务封装，分为普通异常和特殊异常：普通异常直接弹窗显示错误信息，特殊异常是针对特殊状态码做异常处理，与后端约定好一些特殊状态码，做针对性的处理。对于业务开发人员无需自己处理异常情况。
- 开发路由自动化程序和模板生成器：无需再手动配置路由，由程序自动生成，保障访问路径风格统一。页面文件由模板生成器生成，保障文件命名风格统一。制定一套代码规范，为变量命名提供参考。
- 制定项目规范：为文件存放位置提供参数，并定期检查。在做任务拆解的时候分出组件封装任务，对相同和相似的代码做封装或重构。
- 制定接口结构规范：与后端开发人员共同制定规范，并在接口定义阶段参与接口评审。
- 制定设计规范：与设计师共同制定设计规范，比如制定主题色、尺寸选定规则，并不断完善规范体系。
随着业务的增长，逐渐形成了一条业务线，现在已经有 8 个子系统了，每个系统看似风格各不一样，但实际只是外框不一样，内部（也就是页面）的东西其实是差不多的。为了能够复用同一套系统，引入了布局组件和布局属性的概念。
布局组件：放在路由层和页面层之间，主要做三件事：
- 公共布局开发
- 数据初始化
- 权限控制
布局属性：用于页面组件向布局组件传递数据，解决不同页面公共区域的差异性。
整个项目开发下来，印象最深的有两个问题：
- 开发路由自动化程序的时候，最早是采用 Webpack 的
require.context获取所有文件数据再去生成路由配置，结果发现编译速度变慢了，运行起来首屏时间也变长了。经研究发现，原来是懒加载失效了，我去读取所有文件，就意味着我把所有文件都加载了一遍，就没有懒加载而言了。解决方案是自己开发一个独立于 Webpack 的 NodeJS 程序去读取文件，实时生成路由配置文件。也就是说这事不能在运行时操作，而是放在编译时操作。 - 起初三人团队开发，由我分配任务。分配的方式是按照页面分配，一人分一些。比如同事 A 分配详情页和审批页，同事 B 分配列表页面。看似没什么问题，结果却出乎我意料。同事 A 到处复制粘贴，自己去找到已有的一些相似页面，然后复制粘贴改一改。自己手上有两个相似的，也都是复制粘贴改一改。而同事 B 又是另外一种风格，完全不管已有的东西，自己重新造了一套轮子自己用，导致项目很多相同的页面却有很多种不同风格的代码。解决方案是不能给他们太开放性的任务，分配任务的时候应该更具体化，明确跟他说这个页面用哪几个组件开发，或者这边有个相似页面拿去封装一下，又或者直接给组件开发任务，再有一个人专门去组装成页面。
开放平台成果可视化大屏
2020年3月 ~ 2020年5月
面临的问题：
- 每个页面都是全屏动画，动画性能问题面临挑战，不确定最终效果能否流畅运行
- 之前的项目架构存在严重的性能问题
- 没有动画开发方面的技术沉淀，从零开始弄
- 我的团队成员没有动画开发方面的经验
- 项目周期短，给的时间并不多
主要从三个方面考虑：
- 项目架构重新设计：分析之前的架构存在的问题，针对性的设计。保障项目最基本的的性能不出问题。
- 开发动画库：总结动画开发的规律，提炼出一套开发理论，配合上我开发的动画库，能有效降低开发门槛。让我在团队成员能更快上手，同时也能更好的积累技术沉淀。
- 充分利用设计师资源：与设计师一起预研一套AE转代码的方案，让设计也能参与到页面开发上。解决项目周期短，时间不够用的问题。
这项目让我认识到了几点：
- 如果设计师能了解到我们的开发过程，设计出来的设计稿能让我们开发事半功倍。
- 有些工具类虽简单，却能带来巨大的收益。也许在你眼里是再正常不过的知识，但在别人眼里可能是知识盲区。多封装点小工具能有效减少 bug 量，让系统更健壮。
未完待续...
