清朝项目太臭怎么办？TS重构它！

多图预警，流量党慎入

图片：均图片在上，描述在下

全文：6474字 阅读需要约28分钟

项目背景

最近公司要求给一个老项目加功能，具体就是把原来免费的服务改成付费的，然后再加一点其他的功能，我之前看到过那个项目的线上，这么一说，顿感不妙。截个图简单感受一下：

农业数字云页面

告警平台页

天气监测页面（navBar直接没了，我天😅）

气象大数据页，好家伙直接空壳页面，也是没有navBar了，好像进入了一个全新的大屏项目。

报错什么的咱就不说了，光log信息就看的眼花缭乱，点几下给你log十几行出来，你说log就log吧，把名字取好也行，不过各位，看图😅。

好好好，虽然线上看起来没那么漂亮，可能人家代码写的工整呢？

那咱接下来看看代码，我草！等会jym，咱先不看代码，光这目录结构就把俺老猪吓一跳：

牛蛙牛蛙，今天算开眼了，根目录下命名个entries，好家伙下面还有components、views、App.vue（这是把另一个项目整个搬过来了是吧😅），根目录下同时拥有：utils、tools、service，好家伙，直接跟俺摆迷魂阵！更离谱的是，view下面还有view，view下的文件夹还有components，组件和页面完全分不清啊！敢问掘友们见过这种史诗级屎目录吗？

被目录结构震惊之后，先平复一下心情，看一下代码，代码写的还是挺工整的

做好准备，图来了：

先拿个vue组件看看：

（那个分页函数是我后来写的）嗯~中规中矩，我还可以接受，毕竟命名什么的还算规范，看个十几分钟就没问题了，继续看个组件

啊~行，配合模板部分还是能看懂的，继续来：

啊？我可以接受两个函数长得差不多，但是功能应该也差不多吧？你这addControl2里面的功能和addControl完全不一样啊！！一个是绑定控制地图时的监听回调，一个是添加地图控件，我承认这两种确实都能称之为 Control...但是

vue组件写的还都可以接受

接口封装也行，命名和注释都有

这哥们自己用正则写了个时间格式化函数，我只能说很强，但是没必要。

好吧，看到这，虽然每一项都还算过得去，但是如果让我维护这样的项目，实在是太累了（我截图不是个例各位，每个文件中都有类似的）。改了一周后，我申请了重构，没想到当即被领导拍板，重构吧，交给你了。

敲定技术栈

因为旧的项目变量和全局变量、路由传参、mixin混用，导致页面内的变量来源难以追踪，很多时候知道是这个值引起的问题，但是就是找不到这个值哪来（可能被路由传了好多级才过来）。由此，我准备用 ts + pinia 做类型和状态管理。

旧项目(webpack)每次冷启动或打包都要花费 20s 左右的时间，热更新在 1 - 2s之间还行。由于这个网站一直在使用阿里云云效在线部署，所以我也没特意看打包后的大小，但是估计要在几十上下，其实这些问题都不大，主要优化一些静态文件和无用的代码就好了。但是我还是因此选择了使用 vite

因为旧项目使用了vue2、mixin和vuex和vue-router导致 变量污染问题严重 。为了解决这个问题，除了上面提到的 ts + pinia ，还选用了vue3，因为vue3天然不支持mixin，使用组合式API很容易可以更清晰的实现mixin可以做到的所有功能。

在新项目中，使用vue-router时，只作为备用方案，因为在重构时进行了新一轮的需求整理，直接将告警平台移除，后面两个页面的核心功能合并到农业数字云，在此场景下，新版的农业数字云只需要一个路由就可以承载所有的功能了。并且，使用了pinia-plugin-persistedstate插件对pinia做了全局的持久化，这里要说明一点，很多人觉得在本地存储太多数据不太好，尤其是像我这样一股脑的全部持久化，其实，在localStorage允许的情况下，把一些常用数据甚至是状态信息存储在本地，是效率最高也是性能最好的方式。

最终技术栈为：vue3 + pinia + vue-router + ts

开干

概述

因为是旧的项目，所以接口基本都全，整理出来的新需求，后端大哥跟我一起做，速度很快，我们第一周就已经完成了整个项目的99%。

由于重构系统并没有出新的设计图，导致我页面端两眼一抹黑，只能靠模仿旧的大致样式来做（因为和旧版逻辑架构完全不一样了，所以大部分还是重做的），最终做出了一个更清爽的前端页面：

登录页也不是一个单独的页面了，几乎所有的功能都改成了轻量级的弹窗。

这个项目完整的展开后是这种样子：

对比旧的

重构和优化

页面变化

可以看到明显变化的地方有：

1. 
   
2. 新增了行政区域级地块
   
3. 不再对播种、未播种和样板田分类，而是使用tag徽标
   
4. 不再对每个地块单独展示服务项，而是选中地块时使用同一个区域展示
   
5. 移除了信息重复的图表，移除了冗余的图例、地图控件、农事记录
   
6. 灾害信息亦作为服务项、不再单独列出
   
7. 新增了时间轴替代了原本的轮播图
   

代码变化

不明显的变化在于：

移除所有生产环境的log

控制台干净到一尘不染，生产环境的log全部被移除了，且使用ts编写，运行阶段基本不会出错，使用了autofit.js，一行轻松适配设计稿下任何分辨率（就是强无敌）

移除所有第三方大型UI组件库

未使用任何大型UI组件库（我管你能不能树摇），这也使得该项目体积被压缩到了极限，打包后仅有 1M+

清晰代码结构

代码结构清晰，现在内容比较少，但不难看出结构还是比较规范的，基本沿用了vite创建的默认结构，且静态文件基本没有，这也是保证打包体积的重要因素。

使用pinia持久化存储

因为全篇使用了 pinia 持久化存储，开发时不用关心数据什么时候get什么时候set了，随时使用store，即可得到、设置数据，极大的提高了开发幸福感。

接口分类封装

接口分类封装，调用时可以清楚的知道在调用哪个厂商的接口，并且有ts加持，绝不会少一个、错一个参数。

简化拦截器

极简拦截器，拦截器本质上就是一个错误截获器，只需要保证后续流程不崩溃就可以了，所以这里只做了最简单的拦截器，非常好用。

简化路由、使用组件

不出所料的，这个项目没有用到路由切换，所有的内部功能都以轻量化弹窗的形式展示，唯一需要跳转的是支付页面，但那是另一个项目，我们的解决方案是直接带着用户token跳转，简单粗暴。

基于mqtt理念的发布订阅范式

我选择完全相信vue3的watch，以这种方式编码乍一看会很难阅读，但是实际上是仿照了mqtt的消息订阅机制，把watch当成一个subscribe，把store.xxx当成一个topic，你会发现这种写法再好理解不过了，并且这种做法很爽，你如果需要订阅一个数据的变化而做出一些操作的话，就写watch就好了。

清除冗余代码

没有冗余代码，没有！函数、变量命名清晰规范，主打的就是一个清晰，你看我这段代码需要注释吗？

编码规范

规范、规范、还是他妈的规范，这就是规范的节流器，都跟着写！

使用ts定义类型

明确的类型，定义类型可能多花五分钟，但是会在编码时节省一小时。

开发轻量级必要组件

自定义selecter、toast等组件，不需要的一点不写，主打的就是一个轻量。

打包

整个开发流程下来，打包体积达到了惊人的1.94M（少林功夫好耶，太棒辽啊🥳），线上运行表现基本令人满意（少林功夫，够劲！顶呱呱呀🥳）

完事

虽然在第一周改完99%后，又加了大大小小的新需求和新改动，不过在规范的开发面前都迎刃而解，编码成了一种享受，对于这种轻量级项目，就要用轻量级的方法去实现，搞得笨重的像一头装甲熊（没说沃利贝尔），没有任何意义，关于这次重构，除了技术上的学习，还有理念上的进步，往往一个前端项目，只需要保证页面不卡顿、不报错、不崩溃就行了，不要剪了芝麻丢了西瓜、头重脚轻、舍本逐末、南辕北辙。我是德莱厄斯，共勉。