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

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

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

说说思路吧

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

音视频文件上传

---

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

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

播放视频，截取视频封面

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

• 页面隐藏一个video标签

• 用户选择视频后，借助 window.URL.createObjectURL(file)创建一个本地视频链接给页面隐藏的video标签

• 让它播放，借助video的onloadedmetadata、ontimeupdate方法创建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，前端负责人

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

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

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

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

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

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

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

可能这就是热爱吧。

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

尽信书不如无书

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

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

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

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

关于本文

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

分享一些前端面试题以及学习路线给大家

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

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

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

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

关于本文

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

分享一些前端面试题以及学习路线给大家

[外链图片转存中…(img-OLnefVPq-1726082044068)]