作者：涼城a
https://juejin.cn/post/6959808183988650014
前言
2021年3月底，我決定開始重構公司的背景管理項目。2021年5月初，我完成了項目重構。50+個頁面，預期2個月，結果一個多月提前完成了。
- 為什麼重構？
- 項目是18年開始的，過手人數較多且沒有制定代碼規範，看起來都費力。
- 重複代碼随處可見還不能随便删除，否則真的是“給我一個杠杆，我可以撬起整個地球。”
- 這個項目是jq+bootstrapt寫的，代碼十分臃腫，随着版本的不斷疊代，項目越來越大，維護成本也越來越高。
這是一個惡性循環，我覺得不管怎麼優化，隻不過是在給他換深色衣服罷了（深色顯瘦），要想根本上解決問題，還是得全面重構。
- 從零到一的過程困難嗎？
既然選擇了遠方，便隻顧風雨兼程。
項目是我一個人全面負責的，有一定的壓力同時也收獲了很多。無論是做什麼，從零到一必定無疑是困難的。我覺得大緻可以分為三個階段：準備階段：項目需求必須都有大緻了解然後決定項目選用架構、項目周期把控、項目細節優化、需求優化、哪些地方可以實作升華，達到質的飛躍。實施階段：會遇到很多突發狀況，你需要迎難而上。比如某個需求無法按照原方案實施、之前采用的依賴版本更新後出現各種問題。結尾階段：你需要回顧并理清所有需求確定萬無一失。
由于項目是我一手開發，是以也建立了一個元件庫。
歡迎大家添磚加瓦，共建美好家園。
GitHub位址
成長
錯綜複雜的權限問題
之前做過的權限這一塊，
頁面權限
是後端直接傳回路由，前端直接拿過來用
功能權限
的也是後端整理出來，前端直接拿過來用
這次啥都要自己動手着實讓人有點頭大。
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月份，手上還有兩個“小弟”，乙方公司想讓我“轉正”去他們公司。
我覺得年輕的我應該去一線拼搏，這樣的“養老生活不是我想要的”，于是我拒絕了。
直接裸辭去大理和麗江旅遊了，為期10天的旅遊很快就結束了。
我就直接飛來了魔都上海，在網上找的房子，也順利的住進去了。
第二天開始準備履歷，開始面試了。面試大概一周我發現外面的世界對于“專科畢業”好像不是那麼友好。
面試了7家公司，還好拿下了三個offer。
第一個是外包銀行14K
第二個外包公安13K
第三個是自己公司業務12K，前端負責人
我當時糾結了好久，我一直問自己到底是為了什麼來上海，我覺得自己需要技術沉澱一年，是以最終我選擇了第三個。
是以就有了現在，我還有什麼可猶豫的呢？我不禁想罵自己。
會當淩絕頂,一覽衆山小。
自己負責一個項目從無到有的過程，雖然有過許多挑戰也好、困難也好
但是當你寫完最後一行代碼，進行打包傳遞的那一刻，
仿佛全世界都在為你驕傲，為你鼓掌。
說不出為什麼，但是很開心、很自豪、很有成就感。
可能這就是熱愛吧。
- 對于遇到的問題，我覺得我們需要有自己的思考。
盡信書不如無書
- 對于工作，我覺得無論熱愛與否都需要責任在身
人生須知負責任的苦處，才能知道盡責任的樂趣。
- 對于生活，我覺得無論開心與否都需要樂在其中
明月幾時有，把酒問青天。