測(cè)試平臺(tái)開發(fā)vue組件化重構(gòu)前端代碼

更新時(shí)間：2022年05月26日 11:01:19 作者：把蘋果咬哭的測(cè)試筆記

這篇文章主要為大家介紹了測(cè)試平臺(tái)開發(fā)vue組件化重構(gòu)前端代碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

基于 springboot+vue 的測(cè)試平臺(tái)開發(fā)

繼續(xù)更新（人在魔都 T_T）。

這期其實(shí)并不是一個(gè)詳細(xì)的開發(fā)過程記錄，主要還是針對(duì)本次前端重構(gòu)來聊聊幾個(gè)關(guān)注點(diǎn)。

目前重構(gòu)的總進(jìn)度在80%，重構(gòu)完的頁面沒什么變化，再回顧一下。

目前項(xiàng)目的功能開發(fā)重點(diǎn)還是在接口管理這一大塊，內(nèi)容多，任務(wù)重，可當(dāng)我著手準(zhǔn)備繼續(xù)開發(fā)新功能的時(shí)候發(fā)現(xiàn)了個(gè)重大的問題。

我之前接口相關(guān)的功能都寫在一個(gè)vue文件里，看了下代碼行數(shù)已然近800，現(xiàn)在查看之前代碼和改動(dòng)就已經(jīng)非常的不方便的，這后面功能還多了，繼續(xù)寫下去估計(jì)自己都要扔了。

所以重構(gòu)前端代碼優(yōu)先提上了日程。

怎么重構(gòu)，那當(dāng)然還是利用vue的組件化特性來進(jìn)行拆分。已當(dāng)前的完成度來看，從當(dāng)初的 1 個(gè)文件（紅色框的），拆分了現(xiàn)在的 10 文件（其他的）。

這部分主要有 2 個(gè)部分。

這不是廢話么？因?yàn)橹皩?duì)相關(guān)知識(shí)儲(chǔ)備比較少，所以一開始也不知道如何下手，于是找起來。網(wǎng)上有很多博客、視頻等免費(fèi)學(xué)習(xí)資源，大家很容易就可以搜到。

我起初也是想針對(duì)性的補(bǔ)充下vue組件相關(guān)性高的知識(shí)點(diǎn)，后來看著看著，不知不覺幾乎把 vue 系統(tǒng)化的肝了一遍，雖然花費(fèi)了不少時(shí)間，但是收獲也很多，之前許多一知半解的問題都知道為啥了。

這里羅列一些重要的知識(shí)點(diǎn)，僅供參考：

其中比較花費(fèi)精力的就是后面2個(gè)了。因?yàn)榻M件拆分勢(shì)必就會(huì)有多個(gè)組件協(xié)作，那么父子、兄弟、任意組件之間的數(shù)據(jù)傳遞和操作就需要這些技術(shù)來解決。

合理拆分其實(shí)并沒有一個(gè)嚴(yán)格意義的要求，對(duì)我來說重點(diǎn)是2個(gè)：代碼結(jié)構(gòu)更清晰、復(fù)用代碼。

舉例說明一下，看圖。

圖中是接口定義的編輯頁面，本來都是在一個(gè)文件里的一大坨，經(jīng)過拆分之后：

后續(xù)如果有新增或者其他改動(dòng)，代碼結(jié)構(gòu)一目了然，很容易進(jìn)行維護(hù)。

而在實(shí)戰(zhàn)中遵循了這么一個(gè)組件化編碼的流程：

先拆分出靜態(tài)組件，按不同功能拆分，命名合理，如果你的拆分覺得不好取名字，大概率拆的不合理。
再實(shí)現(xiàn)動(dòng)態(tài)組件，看下這個(gè)組件是一個(gè)在用還是會(huì)重復(fù)使用，決定好數(shù)據(jù)要存放的位置。
最后實(shí)現(xiàn)交互，可以從綁定事件開始。

一步步來，中間也踩了不少坑，畢竟將知識(shí)的簡(jiǎn)單demo應(yīng)用到項(xiàng)目實(shí)戰(zhàn)中，還是要花點(diǎn)精力去琢磨的。