2024年前端最新谈谈使用vue对老项目进行重构的一些思考和总结，今年面试

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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标签

• 让它播放，借助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月份，手上还有两个“小弟”，乙方公司想让我“转正”去他们公司。

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

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-xbnz208C-1715625354733)]