前言

2021年3月底，我決定開始重構(gòu)公司的后臺(tái)管理項(xiàng)目。2021年5月初，我完成了項(xiàng)目重構(gòu)。50+個(gè)頁面，預(yù)期2個(gè)月，結(jié)果一個(gè)多月提前完成了。

• 為什么重構(gòu)？

1. 項(xiàng)目是18年開始的，過手人數(shù)較多且沒有制定代碼規(guī)范，看起來都費(fèi)力。
2. 重復(fù)代碼隨處可見還不能隨便刪除，否則真的是“給我一個(gè)杠桿，我可以撬起整個(gè)地球。”
3. 這個(gè)項(xiàng)目是jq+bootstrapt寫的，代碼十分臃腫，隨著版本的不斷迭代，項(xiàng)目越來越大，維護(hù)成本也越來越高。

這是一個(gè)惡性循環(huán)，我覺得不管怎么優(yōu)化，只不過是在給他換深色衣服罷了（深色顯瘦），要想根本上解決問題，還是得全面重構(gòu)。

• 從零到一的過程困難嗎？

既然選擇了遠(yuǎn)方，便只顧風(fēng)雨兼程。

項(xiàng)目是我一個(gè)人全面負(fù)責(zé)的，有一定的壓力同時(shí)也收獲了很多。無論是做什么，從零到一必定無疑是困難的。我覺得大致可以分為三個(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è)需求無法按照原方案實(shí)施、之前采用的依賴版本更新后出現(xiàn)各種問題。結(jié)尾階段：你需要回顧并理清所有需求確保萬無一失。

由于項(xiàng)目是我一手開發(fā)，所以也建立了一個(gè)組件庫。

歡迎大家添磚加瓦，共建美好家園。

GitHub地址

成長

錯(cuò)綜復(fù)雜的權(quán)限問題

之前做過的權(quán)限這一塊，

頁面權(quán)限是后端直接返回路由，前端直接拿過來用

功能權(quán)限的也是后端整理出來，前端直接拿過來用

這次啥都要自己動(dòng)手著實(shí)讓人有點(diǎn)頭大。

由于公司的重構(gòu)是純前端重構(gòu)，所以說很多東西都只能在前端改變。

權(quán)限這一塊分為頁面權(quán)限和功能權(quán)限，由于后端返回的是tree數(shù)據(jù)，我必須要對(duì)數(shù)據(jù)進(jìn)行處理，

提取出有權(quán)限訪問頁面和功能權(quán)限點(diǎn)。這個(gè)過程無疑是令人難過的。

提取完成之后頁面權(quán)限的實(shí)施方案就是動(dòng)態(tài)路由

功能權(quán)限的實(shí)施方案就是自定義權(quán)限指令

https://juejin.cn/post/6944885228368298020

gis全方位運(yùn)用

19年的時(shí)候就接觸過gis，當(dāng)時(shí)是宇通客車的車輛監(jiān)控以及大屏展示全球化。所以現(xiàn)在做起來還算輕車熟路。

這個(gè)需求是echarts結(jié)合高德地圖實(shí)現(xiàn)當(dāng)日用戶活躍地域分布圖。也就是用搞得地圖打底，echars展示數(shù)據(jù)。

我決定采用echarts-extension-amap+echars+ 高德API進(jìn)行實(shí)現(xiàn)

在實(shí)施過程中遇到過很多問題，而且這類文檔較少。必須要自己思考和反復(fù)扒拉官方文檔。

源文件以及你在開發(fā)中可能遇到的坑在這里

極致文件壓縮

由于公司業(yè)務(wù)偏社交，也就避免不了各種圖片、大小文件、視頻。

對(duì)于文件的極致壓縮處理是必須的，之前也詳細(xì)介紹過文件壓縮這一塊我的解決方案以及心得。

在這里我就不詳細(xì)說了，下面是直通車。感興趣的小伙伴可以去看看，相信對(duì)你會(huì)有幫助。

https://juejin.cn/post/6940430496128040967

https://juejin.cn/post/6935627673989283848

高效文件上傳

之前用jq寫過關(guān)于上傳圖片到阿里云，這次用Vue顯然是要重新封裝的。

圖片上傳分為單圖片上傳和多圖片上傳。

• 為什么要區(qū)分單文件還是多文件？

多文件肯定要遍歷，出于性能考慮，單文件沒有必要走遍歷。

說說思路吧

極致壓縮 --> 判斷是單文件還是多文件 --> 開始上傳（以及斷點(diǎn)續(xù)傳、上傳失敗刪除文件等問題）

音視頻文件上傳

鑒定視頻文件是否為h.264格式

由于APP目前只支持h.264格式的音視頻文件播放，所以說這個(gè)必須得做

播放視頻，截取視頻封面

這個(gè)問題的解決方案很容易想到

• 頁面隱藏一個(gè)video標(biāo)簽

• 用戶選擇視頻后，借助 window.URL.createObjectURL(file)創(chuàng)建一個(gè)本地視頻鏈接給頁面隱藏的video標(biāo)簽

• 讓它播放，借助video的onloadedmetadata、ontimeupdate方法創(chuàng)建cavas畫布截屏

• 截取完整后，刪除視頻鏈接window.URL.revokeObjectURL(videoUrl)釋放內(nèi)存

上傳視頻

項(xiàng)目視頻上傳文件最大為2G,所以說很有必要來一個(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)我之前有介紹過，想了解的小伙伴可以看看,

簡單來說就一句話“防盜、節(jié)流、快速播放”

詳細(xì)過程見下文

表格組件

項(xiàng)目中涉及到最多的也就是表格了，所以說我單獨(dú)封裝了一套適合大多數(shù)表格頁面的組件。

由于項(xiàng)目中表格的復(fù)雜程度不一，所以說有些頁面還是必須特殊情況特殊處理。

畢竟我一個(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)的,總體來說還是不錯(cuò)的，建立連接只需要0.1s,基本秒進(jìn)秒同步。

想詳細(xì)了解的小伙伴，請(qǐng)移步

實(shí)戰(zhàn)技巧合集

這里面是在項(xiàng)目中遇到的各種比較雜的問題，部分重點(diǎn)問題記錄在里面了。

例如：實(shí)戰(zhàn)中的突發(fā)問題、一些好的插件等......

總結(jié)

這次項(xiàng)目重構(gòu)，從零到一，我的的確確成長了不少。

以前都是中途加入某個(gè)項(xiàng)目，或者負(fù)責(zé)某個(gè)模塊。

剛開始準(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è)月下來我竟然完全適應(yīng)了這種生活，對(duì)于需求輕車熟路。妥妥的“三年經(jīng)驗(yàn)”，

隨后手中負(fù)責(zé)的項(xiàng)目越來越多，最多的時(shí)候有8個(gè)。

雖然大家都夸我年紀(jì)輕輕，coding技術(shù)都這么好。但是我也不敢說我才剛畢業(yè)。

一年左右時(shí)也就是20年6月份，手上還有兩個(gè)“小弟”，乙方公司想讓我“轉(zhuǎn)正”去他們公司。

我覺得年輕的我應(yīng)該去一線拼搏，這樣的“養(yǎng)老生活不是我想要的”，于是我拒絕了。

直接裸辭去大理和麗江旅游了，為期10天的旅游很快就結(jié)束了。

我就直接飛來了魔都上海，在網(wǎng)上找的房子，也順利的住進(jìn)去了。

第二天開始準(zhǔn)備簡歷，開始面試了。面試大概一周我發(fā)現(xiàn)外面的世界對(duì)于“專科畢業(yè)”好像不是那么友好。

面試了7家公司，還好拿下了三個(gè)offer。

第一個(gè)是外包銀行14K

第二個(gè)外包公安13K

第三個(gè)是自己公司業(yè)務(wù)12K，前端負(fù)責(zé)人

我當(dāng)時(shí)糾結(jié)了好久，我一直問自己到底是為了什么來上海，我覺得自己需要技術(shù)沉淀一年，所以最終我選擇了第三個(gè)。

所以就有了現(xiàn)在，我還有什么可猶豫的呢？我不禁想罵自己。

會(huì)當(dāng)凌絕頂,一覽眾山小。

自己負(fù)責(zé)一個(gè)項(xiàng)目從無到有的過程，雖然有過許多挑戰(zhàn)也好、困難也好

但是當(dāng)你寫完最后一行代碼，進(jìn)行打包交付的那一刻，

仿佛全世界都在為你驕傲，為你鼓掌。

說不出為什么，但是很開心、很自豪、很有成就感。

可能這就是熱愛吧。

• 對(duì)于遇到的問題，我覺得我們需要有自己的思考。

盡信書不如無書

• 對(duì)于工作，我覺得無論熱愛與否都需要責(zé)任在身

人生須知負(fù)責(zé)任的苦處，才能知道盡責(zé)任的樂趣。

• 對(duì)于生活，我覺得無論開心與否都需要樂在其中

明月幾時(shí)有，把酒問青天。

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