談?wù)勈褂胿ue對(duì)老項(xiàng)目進(jìn)行重構(gòu)的一些思考和總結(jié)
點(diǎn)擊上方關(guān)注 前端技術(shù)江湖,一起學(xué)習(xí),天天進(jìn)步
作者:涼城a
https://juejin.cn/post/6959808183988650014
前言
2021年3月底,我決定開(kāi)始重構(gòu)公司的后臺(tái)管理項(xiàng)目。2021年5月初,我完成了項(xiàng)目重構(gòu)。50+個(gè)頁(yè)面,預(yù)期2個(gè)月,結(jié)果一個(gè)多月提前完成了。
為什么重構(gòu)?
項(xiàng)目是18年開(kāi)始的,過(guò)手人數(shù)較多且沒(méi)有制定代碼規(guī)范,看起來(lái)都費(fèi)力。 重復(fù)代碼隨處可見(jiàn)還不能隨便刪除,否則真的是“給我一個(gè)杠桿,我可以撬起整個(gè)地球?!?/section> 這個(gè)項(xiàng)目是jq+bootstrapt寫的,代碼十分臃腫,隨著版本的不斷迭代,項(xiàng)目越來(lái)越大,維護(hù)成本也越來(lái)越高。
這是一個(gè)惡性循環(huán),我覺(jué)得不管怎么優(yōu)化,只不過(guò)是在給他換深色衣服罷了(深色顯瘦),要想根本上解決問(wèn)題,還是得全面重構(gòu)。
從零到一的過(guò)程困難嗎?
既然選擇了遠(yuǎn)方,便只顧風(fēng)雨兼程。
項(xiàng)目是我一個(gè)人全面負(fù)責(zé)的,有一定的壓力同時(shí)也收獲了很多。無(wú)論是做什么,從零到一必定無(wú)疑是困難的。我覺(jué)得大致可以分為三個(gè)階段:準(zhǔn)備階段:項(xiàng)目需求必須都有大致了解然后決定項(xiàng)目選用框架、項(xiàng)目周期把控、項(xiàng)目細(xì)節(jié)優(yōu)化、需求優(yōu)化、哪些地方可以實(shí)現(xiàn)升華,達(dá)到質(zhì)的飛躍。實(shí)施階段:會(huì)遇到很多突發(fā)狀況,你需要迎難而上。比如某個(gè)需求無(wú)法按照原方案實(shí)施、之前采用的依賴版本更新后出現(xiàn)各種問(wèn)題。結(jié)尾階段:你需要回顧并理清所有需求確保萬(wàn)無(wú)一失。
由于項(xiàng)目是我一手開(kāi)發(fā),所以也建立了一個(gè)組件庫(kù)。
歡迎大家添磚加瓦,共建美好家園。
GitHub地址
成長(zhǎng)
錯(cuò)綜復(fù)雜的權(quán)限問(wèn)題
之前做過(guò)的權(quán)限這一塊,
頁(yè)面權(quán)限是后端直接返回路由,前端直接拿過(guò)來(lái)用
功能權(quán)限的也是后端整理出來(lái),前端直接拿過(guò)來(lái)用
這次啥都要自己動(dòng)手著實(shí)讓人有點(diǎn)頭大。

由于公司的重構(gòu)是純前端重構(gòu),所以說(shuō)很多東西都只能在前端改變。
權(quán)限這一塊分為頁(yè)面權(quán)限和功能權(quán)限,由于后端返回的是tree數(shù)據(jù),我必須要對(duì)數(shù)據(jù)進(jìn)行處理,
提取出有權(quán)限訪問(wèn)頁(yè)面和功能權(quán)限點(diǎn)。這個(gè)過(guò)程無(wú)疑是令人難過(guò)的。
提取完成之后頁(yè)面權(quán)限的實(shí)施方案就是動(dòng)態(tài)路由
功能權(quán)限的實(shí)施方案就是自定義權(quán)限指令

https://juejin.cn/post/6944885228368298020
gis全方位運(yùn)用
19年的時(shí)候就接觸過(guò)gis,當(dāng)時(shí)是宇通客車的車輛監(jiān)控以及大屏展示全球化。所以現(xiàn)在做起來(lái)還算輕車熟路。
這個(gè)需求是echarts結(jié)合高德地圖實(shí)現(xiàn)當(dāng)日用戶活躍地域分布圖。也就是用搞得地圖打底,echars展示數(shù)據(jù)。
我決定采用echarts-extension-amap+echars+ 高德API進(jìn)行實(shí)現(xiàn)
在實(shí)施過(guò)程中遇到過(guò)很多問(wèn)題,而且這類文檔較少。必須要自己思考和反復(fù)扒拉官方文檔。
源文件以及你在開(kāi)發(fā)中可能遇到的坑在這里
極致文件壓縮
由于公司業(yè)務(wù)偏社交,也就避免不了各種圖片、大小文件、視頻。
對(duì)于文件的極致壓縮處理是必須的,之前也詳細(xì)介紹過(guò)文件壓縮這一塊我的解決方案以及心得。
在這里我就不詳細(xì)說(shuō)了,下面是直通車。感興趣的小伙伴可以去看看,相信對(duì)你會(huì)有幫助。
https://juejin.cn/post/6940430496128040967
https://juejin.cn/post/6935627673989283848
高效文件上傳
之前用jq寫過(guò)關(guān)于上傳圖片到阿里云,這次用Vue顯然是要重新封裝的。
圖片上傳分為單圖片上傳和多圖片上傳。
為什么要區(qū)分單文件還是多文件?
多文件肯定要遍歷,出于性能考慮,單文件沒(méi)有必要走遍歷。
說(shuō)說(shuō)思路吧
極致壓縮 --> 判斷是單文件還是多文件 --> 開(kāi)始上傳(以及斷點(diǎn)續(xù)傳、上傳失敗刪除文件等問(wèn)題)

音視頻文件上傳
鑒定視頻文件是否為h.264格式
由于APP目前只支持h.264格式的音視頻文件播放,所以說(shuō)這個(gè)必須得做

播放視頻,截取視頻封面
這個(gè)問(wèn)題的解決方案很容易想到
頁(yè)面隱藏一個(gè)
video標(biāo)簽用戶選擇視頻后,借助
window.URL.createObjectURL(file)創(chuàng)建一個(gè)本地視頻鏈接給頁(yè)面隱藏的video標(biāo)簽讓它播放,借助
video的onloadedmetadata、ontimeupdate方法創(chuàng)建cavas畫(huà)布截屏截取完整后,刪除視頻鏈接
window.URL.revokeObjectURL(videoUrl)釋放內(nèi)存
上傳視頻
項(xiàng)目視頻上傳文件最大為2G,所以說(shuō)很有必要來(lái)一個(gè)上傳進(jìn)度條以及斷點(diǎn)續(xù)傳、上傳失敗特殊處理
multipartUpload方法里有個(gè)progress回調(diào)會(huì)實(shí)時(shí)返回上傳進(jìn)度,同時(shí)支持?jǐn)帱c(diǎn)續(xù)傳。還是比較省心的。
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)
})
復(fù)制代碼
上傳完成后的鑒權(quán)回顯
對(duì)于鑒權(quán)我之前有介紹過(guò),想了解的小伙伴可以看看,
簡(jiǎn)單來(lái)說(shuō)就一句話“防盜、節(jié)流、快速播放”
詳細(xì)過(guò)程見(jiàn)下文

表格組件
項(xiàng)目中涉及到最多的也就是表格了,所以說(shuō)我單獨(dú)封裝了一套適合大多數(shù)表格頁(yè)面的組件。
由于項(xiàng)目中表格的復(fù)雜程度不一,所以說(shuō)有些頁(yè)面還是必須特殊情況特殊處理。
畢竟我一個(gè)人的力量是有限的,所以也希望大家可以添磚加瓦,進(jìn)一步完善它。
GitHub地址
友情提示:大家使用時(shí)多少會(huì)和你的業(yè)務(wù)邏輯有偏差,略作修改在所難免

即時(shí)通訊的實(shí)現(xiàn)
后臺(tái)管理項(xiàng)目中有個(gè)模塊是鏈接APP聊天室的,實(shí)現(xiàn)即時(shí)通訊+及時(shí)發(fā)現(xiàn)搞事用戶禁言,封禁等功能
采用的是第三方融云實(shí)現(xiàn)的,總體來(lái)說(shuō)還是不錯(cuò)的,建立連接只需要0.1s,基本秒進(jìn)秒同步。
想詳細(xì)了解的小伙伴,請(qǐng)移步

實(shí)戰(zhàn)技巧合集
這里面是在項(xiàng)目中遇到的各種比較雜的問(wèn)題,部分重點(diǎn)問(wèn)題記錄在里面了。
例如:實(shí)戰(zhàn)中的突發(fā)問(wèn)題、一些好的插件等......

總結(jié)
這次項(xiàng)目重構(gòu),從零到一,我的的確確成長(zhǎng)了不少。
以前都是中途加入某個(gè)項(xiàng)目,或者負(fù)責(zé)某個(gè)模塊。
剛開(kāi)始準(zhǔn)備全面重構(gòu)的時(shí)候,我是猶豫的,害怕未知的挑戰(zhàn)。反正老項(xiàng)目也可以正常運(yùn)作,我完全可以輕輕松松的維護(hù)。
但是我回想自己的coding經(jīng)歷,
19年剛工作在鄭州為了工資高點(diǎn),我以三年工作經(jīng)驗(yàn)進(jìn)了外包,為了彌補(bǔ)自己在實(shí)戰(zhàn)上的經(jīng)驗(yàn)不足,那段時(shí)間我通宵達(dá)
旦的學(xué)習(xí),每天雖然壓力很大,幾個(gè)月下來(lái)我竟然完全適應(yīng)了這種生活,對(duì)于需求輕車熟路。妥妥的“三年經(jīng)驗(yàn)”,
隨后手中負(fù)責(zé)的項(xiàng)目越來(lái)越多,最多的時(shí)候有8個(gè)。
雖然大家都夸我年紀(jì)輕輕,coding技術(shù)都這么好。但是我也不敢說(shuō)我才剛畢業(yè)。
一年左右時(shí)也就是20年6月份,手上還有兩個(gè)“小弟”,乙方公司想讓我“轉(zhuǎn)正”去他們公司。
我覺(jué)得年輕的我應(yīng)該去一線拼搏,這樣的“養(yǎng)老生活不是我想要的”,于是我拒絕了。
直接裸辭去大理和麗江旅游了,為期10天的旅游很快就結(jié)束了。
我就直接飛來(lái)了魔都上海,在網(wǎng)上找的房子,也順利的住進(jìn)去了。
第二天開(kāi)始準(zhǔn)備簡(jiǎn)歷,開(kāi)始面試了。面試大概一周我發(fā)現(xiàn)外面的世界對(duì)于“??飘厴I(yè)”好像不是那么友好。
面試了7家公司,還好拿下了三個(gè)offer。
第一個(gè)是外包銀行14K
第二個(gè)外包公安13K
第三個(gè)是自己公司業(yè)務(wù)12K,前端負(fù)責(zé)人
我當(dāng)時(shí)糾結(jié)了好久,我一直問(wèn)自己到底是為了什么來(lái)上海,我覺(jué)得自己需要技術(shù)沉淀一年,所以最終我選擇了第三個(gè)。
所以就有了現(xiàn)在,我還有什么可猶豫的呢?我不禁想罵自己。
會(huì)當(dāng)凌絕頂,一覽眾山小。
自己負(fù)責(zé)一個(gè)項(xiàng)目從無(wú)到有的過(guò)程,雖然有過(guò)許多挑戰(zhàn)也好、困難也好
但是當(dāng)你寫完最后一行代碼,進(jìn)行打包交付的那一刻,
仿佛全世界都在為你驕傲,為你鼓掌。
說(shuō)不出為什么,但是很開(kāi)心、很自豪、很有成就感。
可能這就是熱愛(ài)吧。
對(duì)于遇到的問(wèn)題,我覺(jué)得我們需要有自己的思考。
盡信書(shū)不如無(wú)書(shū)
對(duì)于工作,我覺(jué)得無(wú)論熱愛(ài)與否都需要責(zé)任在身
人生須知負(fù)責(zé)任的苦處,才能知道盡責(zé)任的樂(lè)趣。
對(duì)于生活,我覺(jué)得無(wú)論開(kāi)心與否都需要樂(lè)在其中
明月幾時(shí)有,把酒問(wèn)青天。
關(guān)于本文
作者:涼城a
https://juejin.cn/post/6959808183988650014
The End
歡迎自薦投稿到《前端技術(shù)江湖》,如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā),記得點(diǎn)個(gè) 「在看」哦
點(diǎn)個(gè)『在看』支持下 
