前言

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)？

1. 項(xiàng)目是18年開(kāi)始的，過(guò)手人數(shù)較多且沒(méi)有制定代碼規(guī)范，看起來(lái)都費(fèi)力。
2. 重復(fù)代碼隨處可見(jiàn)還不能隨便刪除，否則真的是“給我一個(gè)杠桿，我可以撬起整個(gè)地球?！?/section>
3. 這個(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)青天。

歡迎自薦投稿到《前端技術(shù)江湖》，如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，記得點(diǎn)個(gè) 「在看」哦