清朝项目太臭怎么办?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. 不再对播种、未播种和样板田分类,而是使用tag徽标
  3. 不再对每个地块单独展示服务项,而是选中地块时使用同一个区域展示
  4. 移除了信息重复的图表,移除了冗余的图例、地图控件、农事记录
  5. 灾害信息亦作为服务项、不再单独列出
  6. 新增了时间轴替代了原本的轮播图

不明显的变化在于:

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

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

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

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

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

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

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

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

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

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

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

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

线上地址

因为本身就是线上商务项目,所以这里可以贴下项目地址供大家观看使用

farm.sino-eco.com/website/sin...

完事

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

相关推荐
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试