专栏首页前端技术江湖谈谈使用vue对老项目进行重构的一些思考和总结

谈谈使用vue对老项目进行重构的一些思考和总结

作者:凉城a

https://juejin.cn/post/6959808183988650014

前言

2021年3月底,我决定开始重构公司的后台管理项目。2021年5月初,我完成了项目重构。50+个页面,预期2个月,结果一个多月提前完成了。

  • 为什么重构?
  1. 项目是18年开始的,过手人数较多且没有制定代码规范,看起来都费力。
  2. 重复代码随处可见还不能随便删除,否则真的是“给我一个杠杆,我可以撬起整个地球。”
  3. 这个项目是jq+bootstrapt写的,代码十分臃肿,随着版本的不断迭代,项目越来越大,维护成本也越来越高。

这是一个恶性循环,我觉得不管怎么优化,只不过是在给他换深色衣服罢了(深色显瘦),要想根本上解决问题,还是得全面重构。

  • 从零到一的过程困难吗?

既然选择了远方,便只顾风雨兼程。

项目是我一个人全面负责的,有一定的压力同时也收获了很多。无论是做什么,从零到一必定无疑是困难的。我觉得大致可以分为三个阶段:准备阶段:项目需求必须都有大致了解然后决定项目选用框架、项目周期把控、项目细节优化、需求优化、哪些地方可以实现升华,达到质的飞跃。实施阶段:会遇到很多突发状况,你需要迎难而上。比如某个需求无法按照原方案实施、之前采用的依赖版本更新后出现各种问题。结尾阶段:你需要回顾并理清所有需求确保万无一失。

由于项目是我一手开发,所以也建立了一个组件库。

欢迎大家添砖加瓦,共建美好家园。

GitHub地址

成长

错综复杂的权限问题

之前做过的权限这一块,

页面权限是后端直接返回路由,前端直接拿过来用

功能权限的也是后端整理出来,前端直接拿过来用

这次啥都要自己动手着实让人有点头大。

image.png

由于公司的重构是纯前端重构,所以说很多东西都只能在前端改变。

权限这一块分为页面权限功能权限,由于后端返回的是tree数据,我必须要对数据进行处理,

提取出有权限访问页面功能权限点。这个过程无疑是令人难过的。

提取完成之后页面权限的实施方案就是动态路由

功能权限的实施方案就是自定义权限指令

https://juejin.cn/post/6944885228368298020

gis全方位运用

19年的时候就接触过gis,当时是宇通客车的车辆监控以及大屏展示全球化。所以现在做起来还算轻车熟路。

这个需求是echarts结合高德地图实现当日用户活跃地域分布图。也就是用搞得地图打底,echars展示数据。

我决定采用echarts-extension-amap+echars+ 高德API进行实现

在实施过程中遇到过很多问题,而且这类文档较少。必须要自己思考和反复扒拉官方文档。

源文件以及你在开发中可能遇到的坑在这里

极致文件压缩

由于公司业务偏社交,也就避免不了各种图片、大小文件、视频。

对于文件的极致压缩处理是必须的,之前也详细介绍过文件压缩这一块我的解决方案以及心得。

在这里我就不详细说了,下面是直通车。感兴趣的小伙伴可以去看看,相信对你会有帮助。

https://juejin.cn/post/6940430496128040967

https://juejin.cn/post/6935627673989283848

高效文件上传

之前用jq写过关于上传图片到阿里云,这次用Vue显然是要重新封装的。

图片上传分为单图片上传和多图片上传。

  • 为什么要区分单文件还是多文件?

多文件肯定要遍历,出于性能考虑,单文件没有必要走遍历。

说说思路吧

极致压缩 --> 判断是单文件还是多文件 --> 开始上传(以及断点续传、上传失败删除文件等问题)

音视频文件上传

鉴定视频文件是否为h.264格式

由于APP目前只支持h.264格式的音视频文件播放,所以说这个必须得做

播放视频,截取视频封面

这个问题的解决方案很容易想到

  • 页面隐藏一个video标签
  • 用户选择视频后,借助 window.URL.createObjectURL(file)创建一个本地视频链接给页面隐藏的video标签
  • 让它播放,借助videoonloadedmetadataontimeupdate方法创建cavas画布截屏
  • 截取完整后,删除视频链接window.URL.revokeObjectURL(videoUrl)释放内存

上传视频

项目视频上传文件最大为2G,所以说很有必要来一个上传进度条以及断点续传、上传失败特殊处理

multipartUpload方法里有个progress回调会实时返回上传进度,同时支持断点续传。还是比较省心的。

client.multipartUpload(storeName, file, {
// eslint-disable-next-line require-yield
progress: function * (percentage, checkpoint, r) {
  that.progress = Math.ceil(percentage * 100)
}
}).then(function(result) {
    console.log(result)
    result.name = '/' + result.name
    resolve(result)
}).catch(function(err) {
    console.log(err)
})
复制代码

上传完成后的鉴权回显

对于鉴权我之前有介绍过,想了解的小伙伴可以看看,

简单来说就一句话“防盗、节流、快速播放”

详细过程见下文

表格组件

项目中涉及到最多的也就是表格了,所以说我单独封装了一套适合大多数表格页面的组件。

由于项目中表格的复杂程度不一,所以说有些页面还是必须特殊情况特殊处理。

毕竟我一个人的力量是有限的,所以也希望大家可以添砖加瓦,进一步完善它。

GitHub地址

友情提示:大家使用时多少会和你的业务逻辑有偏差,略作修改在所难免

即时通讯的实现

后台管理项目中有个模块是链接APP聊天室的,实现即时通讯+及时发现搞事用户禁言,封禁等功能

采用的是第三方融云实现的,总体来说还是不错的,建立连接只需要0.1s,基本秒进秒同步。

想详细了解的小伙伴,请移步

实战技巧合集

这里面是在项目中遇到的各种比较杂的问题,部分重点问题记录在里面了。

例如:实战中的突发问题、一些好的插件等......

总结

这次项目重构,从零到一,我的的确确成长了不少。

以前都是中途加入某个项目,或者负责某个模块。

刚开始准备全面重构的时候,我是犹豫的,害怕未知的挑战。反正老项目也可以正常运作,我完全可以轻轻松松的维护。

但是我回想自己的coding经历,

19年刚工作在郑州为了工资高点,我以三年工作经验进了外包,为了弥补自己在实战上的经验不足,那段时间我通宵达

旦的学习,每天虽然压力很大,几个月下来我竟然完全适应了这种生活,对于需求轻车熟路。妥妥的“三年经验”,

随后手中负责的项目越来越多,最多的时候有8个。

虽然大家都夸我年纪轻轻,coding技术都这么好。但是我也不敢说我才刚毕业。

一年左右时也就是20年6月份,手上还有两个“小弟”,乙方公司想让我“转正”去他们公司。

我觉得年轻的我应该去一线拼搏,这样的“养老生活不是我想要的”,于是我拒绝了。

直接裸辞去大理和丽江旅游了,为期10天的旅游很快就结束了。

我就直接飞来了魔都上海,在网上找的房子,也顺利的住进去了。

第二天开始准备简历,开始面试了。面试大概一周我发现外面的世界对于“专科毕业”好像不是那么友好。

面试了7家公司,还好拿下了三个offer。

第一个是外包银行14K

第二个外包公安13K

第三个是自己公司业务12K,前端负责人

我当时纠结了好久,我一直问自己到底是为了什么来上海,我觉得自己需要技术沉淀一年,所以最终我选择了第三个。

所以就有了现在,我还有什么可犹豫的呢?我不禁想骂自己。

会当凌绝顶,一览众山小。

自己负责一个项目从无到有的过程,虽然有过许多挑战也好、困难也好

但是当你写完最后一行代码,进行打包交付的那一刻,

仿佛全世界都在为你骄傲,为你鼓掌。

说不出为什么,但是很开心、很自豪、很有成就感。

可能这就是热爱吧。

  • 对于遇到的问题,我觉得我们需要有自己的思考。

尽信书不如无书

  • 对于工作,我觉得无论热爱与否都需要责任在身

人生须知负责任的苦处,才能知道尽责任的乐趣。

  • 对于生活,我觉得无论开心与否都需要乐在其中

明月几时有,把酒问青天。

本文分享自微信公众号 - 前端技术江湖(bigerfe)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-06-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端职场腹黑学:醉心于编程的你被腹黑了吗?

    前言 2018刚开年,职场上、公司里本应该是一片喜气洋洋的和谐氛围。结果,某晚的一次深度聊天,让我对程序员的职场有了个重新的认知。我在想,程序员不就是敲个代码...

    闰土大叔
  • 苏宁易购:前后端分离架构的落地思考

    IT大咖说
  • 三年前端,面试思考(头条蚂蚁美团offer)

    可以看出,我是个很喜欢折腾的人,大学期间也做过很多项目,非常愿意参与到产品中去。技术上勉强合格,不过独自负责过很复杂的前端项目,所以一般基础面试题还有项目经历都...

    前端迷
  • 个人的前端面经,回馈社会

    酷家乐(10-20k) 电话一面 三十五分钟 如何学习前端,看了什么书 谈实习经历 谈项目,问为什么用那么多插件,有没有想过自己写 position有几个属性 ...

    牛客网
  • 使用electron开发桌面级小程序自动部署系统

    支持部署小程序开发者工具的坑,接下来我将此次开发过程的思考和问题进行总结,从多个角度来介绍本项目。

    李文杨
  • 使用Electron开发桌面级程序——J.A.R.V.I.S诞生记

    现在是凌晨一点,可能是在夜里的时候人会变得比较感性,所以突然想到了王小波在黄金时代中写下的这段话,没有理由的在这篇技术文章中将它作为引言。希望大家在自己的黄金时...

    李文杨
  • 基于nodeJS从0到1实现一个CMS全栈项目(上)

    由于本人对前端领域非常感兴趣,接触到前端的时间也比较早,所以平时会用前端技术做一些有趣的东西,包括H5游戏,一些简单框架的封装,脚手架的设计等等,在我之前的文章...

    徐小夕
  • 上线一个阿里 QianKun “微前端”,逼走了2 位 90后

    鉴于当下流行的开发模式几乎都是前后端分离的,为了组建好团队,前端、后端几乎1比1配置好像有些不太对,因此稍微倾斜了下后端,按80%配置前端,这个比例到底是不是合...

    winty
  • Vue3 究竟好在哪里?(和 React Hook 的详细对比)

    这几天 Vue 3.0 Beta 版本发布了,本以为是皆大欢喜的一件事情,但是论坛里还是看到了很多反对的声音。主流的反对论点大概有如下几点:

    ssh_晨曦时梦见兮
  • Vue 3.0 这个迷人的小妖精,到底好在哪里?(更新原理对比)

    这几天 Vue 3.0 Beta 版本发布了,本以为是皆大欢喜的一件事情,但是论坛里还是看到了很多反对的声音。主流的反对论点大概有如下几点:

    ssh_晨曦时梦见兮
  • 太原面经分享:如何在vue面试环节,展示你晋级阿里P6+的技术功底?

    一年一度紧张刺激的高考开始了,与此同时,我也没闲着,奔走在各大公司的前端面试环节,不断积累着经验,一路升级打怪。

    闰土大叔
  • 再谈构造函数、原型、原型链之间的关系

    构造函数、原型、原型链作为ES5的内容,已经是老生常谈的问题了。首先说说为什么要再次拿起这个话题去说呢?这几天有空我会看一些源码,这些源码的底层实现考虑到兼容性...

    小丑同学
  • 个人分享--web前端学习资源分享

    6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天...

    守候i
  • 在没有DOM操作的日子里,我是怎么熬过来的(终结篇)

    前言 在我写终结篇的日子里,Vue版本稳定在2.9.1。当我摸清Vue的脉络之后,以一个爬坑无数的亲历者的身份,谈谈我在MVVM时代里遇到的那些事儿。 接下来,...

    闰土大叔
  • 2019 前端面试题汇总(主要为 Vue)

    毕业之后就在一直合肥小公司工作,没有老司机、没有技术氛围,在技术的道路上我只能独自摸索。老板也只会画饼充饥,前途一片迷茫看不到任何希望。于是乎,我果断辞职,在新...

    Fundebug
  • 我的Github开源项目,从0到20000 Star!

    2018年3月的时候,我在Github上面闲逛,想要找一个业务和技术相结合的项目,但是发现很多项目都是以技术为主,业务都比较简单。于是我产生了自己写一个业务与技...

    macrozheng
  • 以'权限系统'开始,不晓得会不会遭到鄙视

    距离上一篇博客《关于技术人员自身能力提高的一些思考》已经相隔将近一个月,现在才去更新博文,一方面工作上面确实有点忙,另外一方面自己也可能真的最近有所松懈。老猫也...

    程序员老猫
  • 聊聊北京大部分前端从业者所面临的困境

    国内一线城市,首推北京、上海、广州、深圳,而在这四个强一线城市中互联网氛围最浓厚的,尤其以北京最为典型。那么我们就从北京这个大背景下开始聊起。

    闰土大叔
  • 如何在Vue面试环节,证明自己值月薪15K?

    回想一下,自己平时面试的坐姿,你在面试官眼里,大概是什么形象,可能是工程师,也可能是键盘侠,或者找麻烦的。

    闰土大叔

扫码关注云+社区

领取腾讯云代金券